/**
 * Salsa Nativa Theme - Main Stylesheet
 * Minimal CSS - Tailwind CSS handles all styling
 */

/* Basic reset - Tailwind will handle most of this */
* {
	box-sizing: border-box;
}

body {
	font-size: 16px;
}

@media (max-width: 768px) {
	body {
		font-size: 14px;
	}
}

/* Custom colors as CSS variables for potential use */
:root {
	--color-rojo-salsa: #FD3738;
	--color-negro-carbon: #0D0D0D;
	--color-blanco-puro: #FFFFFF;
	--color-arena-suave: #F8E8DD;
	--color-naranja-vibrante: #FF7A3D;
}

/* Typography */
.font-heading {
	font-family: 'Poppins', sans-serif;
}

/* Active state for navigation links */
.nav-link-desktop.active,
.mobile-nav-link.active {
	color: #FD3738 !important;
}

/* Ensure navbar logo has proper transitions */
.navbar-logo {
	transition: all 0.3s ease;
}

.hero-background-image {
	animation: heroBackgroundScale 1.5s ease-out forwards;
}

@keyframes heroBackgroundScale {
	from {
		transform: scale(1.1);
	}
	to {
		transform: scale(1);
	}
}

.hero-content {
	opacity: 0;
	animation: heroContentFadeIn 0.8s ease-out 0.2s forwards;
}

@keyframes heroContentFadeIn {
	to {
		opacity: 1;
	}
}

.hero-logo {
	opacity: 0;
	transform: translateY(30px);
	animation: heroLogoFadeIn 0.8s ease-out 0.2s forwards;
}

@keyframes heroLogoFadeIn {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.hero-title {
	opacity: 0;
	transform: translateY(50px);
	animation: heroTitleFadeIn 1s ease-out 0.4s forwards;
}

@keyframes heroTitleFadeIn {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.hero-subtitle {
	opacity: 0;
	transform: translateY(30px);
	animation: heroSubtitleFadeIn 0.8s ease-out 0.6s forwards;
}

@keyframes heroSubtitleFadeIn {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.hero-cta {
	opacity: 0;
	transform: translateY(30px);
	animation: heroCtaFadeIn 0.8s ease-out 0.8s forwards;
}

@keyframes heroCtaFadeIn {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.hero-scroll-indicator {
	opacity: 0;
	animation: heroScrollIndicatorFadeIn 0.5s ease-out 1.5s forwards;
}

@keyframes heroScrollIndicatorFadeIn {
	to {
		opacity: 1;
	}
}

.scroll-indicator-outer {
	animation: scrollIndicatorBounce 2s ease-in-out infinite;
}

@keyframes scrollIndicatorBounce {
	0%, 100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(10px);
	}
}

/* Dance Styles Section Animations */
.dance-styles-header {
	opacity: 1;
	transform: translateY(20px);
	transition: transform 0.3s ease-out;
}

.dance-styles-header.animate-in-view {
	transform: translateY(0);
}

.dance-style-card {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.25s ease-out, transform 0.25s ease-out;
	will-change: transform, opacity;
}

.dance-style-card.animate-in-view {
	opacity: 1;
	transform: translateY(0);
	will-change: auto;
}

/* Trigger animations on scroll */
.dance-styles-section,
.instructors-section,
.pricing-section,
.schedule-section,
.faqs-section {
	scroll-margin-top: 80px; /* Account for fixed navbar */
}

/* Instructors Section Animations */
.instructors-section-header {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

.instructors-section-header.animate-in-view {
	opacity: 1;
	transform: translateY(0);
}

.instructor-card {
	opacity: 0;
	transform: translateX(-30px);
	transition: opacity 0.25s ease-out, transform 0.25s ease-out;
	will-change: transform, opacity;
}

.instructor-card.animate-in-view {
	opacity: 1;
	transform: translateX(0);
	will-change: auto;
}

/* Pricing Section Animations */
.pricing-section-header {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

.pricing-section-header.animate-in-view {
	opacity: 1;
	transform: translateY(0);
}

.pricing-card {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.25s ease-out, transform 0.25s ease-out;
	will-change: transform, opacity;
}

.pricing-card.animate-in-view {
	opacity: 1;
	transform: translateY(0);
	will-change: auto;
}

.pricing-additional-info {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.3s ease-out 0.05s, transform 0.3s ease-out 0.05s;
}

.pricing-additional-info.animate-in-view {
	opacity: 1;
	transform: translateY(0);
}

/* FAQs Section Animations */
.faqs-section-header {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

.faqs-section-header.animate-in-view {
	opacity: 1;
	transform: translateY(0);
}

.faq-item {
	opacity: 0;
	transform: translateY(15px);
	transition: opacity 0.25s ease-out, transform 0.25s ease-out;
}

.faq-item.animate-in-view {
	opacity: 1;
	transform: translateY(0);
}

.faq-answer {
	transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.faqs-cta {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.3s ease-out 0.1s, transform 0.3s ease-out 0.1s;
}

.faqs-cta.animate-in-view {
	opacity: 1;
	transform: translateY(0);
}

/* Schedule Section Animations */
.schedule-section-header {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

.schedule-section-header.animate-in-view {
	opacity: 1;
	transform: translateY(0);
}

.schedule-day {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.25s ease-out, transform 0.25s ease-out;
	will-change: transform, opacity;
}

.schedule-day.animate-in-view {
	opacity: 1;
	transform: translateY(0);
	will-change: auto;
}

/* Footer Section Animations */
.footer-logo-section {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.25s ease-out, transform 0.25s ease-out;
}

.footer-logo-section.animate-in-view {
	opacity: 1;
	transform: translateY(0);
}

.footer-social-link {
	opacity: 0;
	transform: translateY(15px);
	transition: opacity 0.25s ease-out, transform 0.25s ease-out, color 0.3s ease;
}

.footer-social-link.animate-in-view {
	opacity: 1;
	transform: translateY(0);
}

.footer-links-section {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.25s ease-out 0.05s, transform 0.25s ease-out 0.05s;
}

.footer-links-section.animate-in-view {
	opacity: 1;
	transform: translateY(0);
}

.footer-contact-section {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.25s ease-out 0.1s, transform 0.25s ease-out 0.1s;
}

.footer-contact-section.animate-in-view {
	opacity: 1;
	transform: translateY(0);
}

.footer-bottom {
	opacity: 0;
	transition: opacity 0.25s ease-out 0.15s;
}

.footer-bottom.animate-in-view {
	opacity: 1;
}

/* CTA Section Animations */
.cta-gradient-bg {
	background: linear-gradient(45deg, var(--color-rojo-salsa), var(--color-naranja-vibrante));
	/* Static gradient, no animation */
}

.cta-content {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

.cta-content.animate-in-view {
	opacity: 1;
	transform: translateY(0);
}

.cta-buttons {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.3s ease-out 0.05s, transform 0.3s ease-out 0.05s;
}

.cta-buttons.animate-in-view {
	opacity: 1;
	transform: translateY(0);
}

.cta-social {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.3s ease-out 0.1s, transform 0.3s ease-out 0.1s;
}

.cta-social.animate-in-view {
	opacity: 1;
	transform: translateY(0);
}

/* Performance optimizations - removed problematic content-visibility */

/* Instant animations for fast scrolling */
.instant-animation,
.instant-animation * {
	transition-duration: 0.15s !important;
	transition-delay: 0s !important;
}

/* Tailwind will handle all other styling */