/* ==========================================================================
   Manavdhan Global Language School — Animation Keyframes & Reveal States
   ========================================================================== */

/* --- Ticker Marquee Continuous Loop --- */
@keyframes tickerMarquee {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(-50%, 0, 0);
    }
}

/* --- Photo Marquee Continuous Loop --- */
@keyframes marqueeScrollLeft {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(-50%, 0, 0);
    }
}

@keyframes marqueeScrollRight {
    0% {
        transform: translate3d(-50%, 0, 0);
    }
    100% {
        transform: translate3d(0, 0, 0);
    }
}

.marquee-track.marquee-left {
    animation: marqueeScrollLeft 36s linear infinite;
}

.marquee-track.marquee-right {
    animation: marqueeScrollRight 36s linear infinite;
}

.marquee-wrapper:hover .marquee-track,
.marquee-track:hover {
    animation-play-state: paused;
}

/* --- Form Highlight Pulse Effect on Course-to-Enrollment Bridge --- */
@keyframes formHighlightPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(201, 162, 39, 0.7);
        border-color: var(--gold);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 0 14px rgba(201, 162, 39, 0);
        border-color: var(--gold);
        transform: scale(1.015);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(201, 162, 39, 0);
        border-color: var(--border-color);
        transform: scale(1);
    }
}

.form-highlight-pulse {
    animation: formHighlightPulse 1.4s ease-out 2;
}

/* --- Bouncing Hero Indicator --- */
@keyframes bobIndicator {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(10px);
    }
}

.bob-indicator {
    animation: bobIndicator 2s ease-in-out infinite;
}

/* --- Pulse Glow Animation for High-Priority CTAs --- */
@keyframes pulseGlow {
    0% {
        box-shadow: 0 0 0 0 rgba(201, 162, 39, 0.4);
    }
    70% {
        box-shadow: 0 0 0 14px rgba(201, 162, 39, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(201, 162, 39, 0);
    }
}

.pulse-cta {
    animation: pulseGlow 2.5s infinite;
}

/* --- Scroll Reveal Classes --- */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

.reveal-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-left.active {
    opacity: 1;
    transform: translateX(0);
}

.reveal-right {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-right.active {
    opacity: 1;
    transform: translateX(0);
}

/* --- Staggered Children Transitions --- */
.reveal-stagger > * {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-stagger.active > *:nth-child(1) { transition-delay: 0.05s; opacity: 1; transform: translateY(0); }
.reveal-stagger.active > *:nth-child(2) { transition-delay: 0.12s; opacity: 1; transform: translateY(0); }
.reveal-stagger.active > *:nth-child(3) { transition-delay: 0.19s; opacity: 1; transform: translateY(0); }
.reveal-stagger.active > *:nth-child(4) { transition-delay: 0.26s; opacity: 1; transform: translateY(0); }
.reveal-stagger.active > *:nth-child(5) { transition-delay: 0.33s; opacity: 1; transform: translateY(0); }
.reveal-stagger.active > *:nth-child(6) { transition-delay: 0.40s; opacity: 1; transform: translateY(0); }
.reveal-stagger.active > *:nth-child(7) { transition-delay: 0.47s; opacity: 1; transform: translateY(0); }
.reveal-stagger.active > *:nth-child(8) { transition-delay: 0.54s; opacity: 1; transform: translateY(0); }

/* --- Form Submit Loading Spinner Animation --- */
@keyframes spinIndicator {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.spin-icon {
    display: inline-block;
    animation: spinIndicator 0.8s linear infinite;
}

/* --- Inline Card Fade-in Animation --- */
@keyframes fadeInCard {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.animate-fade-in {
    animation: fadeInCard 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}