/*
 * SCROLL ANIMATION SYSTEM — animate.css powered
 *
 * Usage:
 *   <div class="scroll-animate animate-left">...</div>
 *   <div class="scroll-animate animate-right">...</div>
 *   <div class="scroll-animate animate-up">...</div>
 *   <div class="scroll-animate animate-fade">...</div>
 *
 * Stagger:  data-stagger="0.08" on parent wrapper
 * Delay:    data-delay="0.2" on the element (seconds)
 * Repeat:   data-repeat — re-animate every time it enters viewport
 */


/* ── 1. OVERRIDE animate.css keyframes ────────────────────────────
   All four directions travel the exact same 120px distance.
   This file loads AFTER animate.css so these definitions win.
   ──────────────────────────────────────────────────────────────── */
@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translate3d(-120px, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translate3d(120px, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 120px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}


/* ── 2. BASE HIDDEN STATE ─────────────────────────────────────────
   Elements start invisible before JS fires.
   ──────────────────────────────────────────────────────────────── */
.scroll-animate {
    opacity: 0;
    will-change: opacity, transform;
}


/* ── 3. ACTIVE STATE — force uniform duration & easing ───────────
   !important forces our values to win over animate.css .animated
   class (which sets 1s) regardless of specificity order.
   cubic-bezier(0.22, 1, 0.36, 1) = snappy start, slow settle.
   ──────────────────────────────────────────────────────────────── */
.scroll-animate.animated {
    animation-duration:        1.4s !important;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1) !important;
    animation-fill-mode:       both !important;
    opacity: 1;
}


/* ── 4. MOBILE: shorter travel & slightly faster ─────────────────*/
@media screen and (max-width: 768px) {
    @keyframes fadeInLeft  { from { opacity: 0; transform: translate3d(-70px, 0, 0); } to { opacity: 1; transform: none; } }
    @keyframes fadeInRight { from { opacity: 0; transform: translate3d(70px,  0, 0); } to { opacity: 1; transform: none; } }
    @keyframes fadeInUp    { from { opacity: 0; transform: translate3d(0, 70px,  0); } to { opacity: 1; transform: none; } }

    .scroll-animate.animated {
        animation-duration: 0.9s !important;
    }
}


/* ── 5. MARQUEE — CSS replaces GSAP for zero JS overhead ─────────
   .marquee-content has display:inline-flex in style.css.
   Two identical spans + translateX(-50%) = seamless loop.
   ──────────────────────────────────────────────────────────────── */
@keyframes marquee-scroll {
    to { transform: translateX(-50%); }
}
.marquee-content {
    animation: marquee-scroll 25s linear infinite;
}


/* ── 6. ACCESSIBILITY ─────────────────────────────────────────────*/
@media (prefers-reduced-motion: reduce) {
    .scroll-animate {
        opacity: 1 !important;
        animation: none !important;
        transition: none !important;
    }
}