/* Shared Animations */

/* 
   STRATEGY:
   1. Default: Static & Visible.
      To prevent "animations finished before I saw them", we default to NO animation.
   2. Enhanced: Scroll-Driven.
      Only if the browser supports timelines, we hide the element and animate it in on scroll.
*/

.animate-on-scroll {
    opacity: 1;
    /* Default visible */
}

/* Define Keyframes */
@keyframes fly-in-up {
    from {
        opacity: 0;
        transform: translateY(50px);
    }

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

@keyframes fly-in-down {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }

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

@keyframes fly-in-right {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fly-in-left {
    from {
        opacity: 0;
        transform: translateX(50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes marquee-scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(calc(-100% - 1rem));
    }
}

@keyframes marquee-scroll-reverse {
    from {
        transform: translateX(calc(-100% - 1rem));
    }

    to {
        transform: translateX(0);
    }
}

/* MODERN SCROLL SUPPORT */
@supports (animation-timeline: view()) {

    /* Standard Scroll Driver: Hides element and waits for scroll entry */
    .animate-on-scroll:not(.animate-on-load) {
        opacity: 0;
        animation-fill-mode: both;
        animation-duration: 1ms;
        animation-timing-function: linear;
        animation-timeline: view(block);

        /* 
           Range: 'entry' means start at 0% (just entering) and end at 100% (fully entered).
           This ensures bottom cards finish animating even if you can't scroll past them.
        */
        animation-range: entry;

        animation-delay: 0s !important;
    }

    /* Names apply to scroll-driven elements */
    .animate-on-scroll:not(.animate-on-load).fade-up {
        animation-name: fly-in-up;
    }

    .animate-on-scroll:not(.animate-on-load).fade-down {
        animation-name: fly-in-down;
    }

    .animate-on-scroll:not(.animate-on-load).fade-right {
        animation-name: fly-in-right;
    }

    .animate-on-scroll:not(.animate-on-load).fade-left {
        animation-name: fly-in-left;
    }
}

/* 
   FORCE LOAD ANIMATION 
   For Hero items that must animate immediately.
*/
.animate-on-load {
    opacity: 0;
    /* Start hidden */
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-timing-function: ease-out;
    animation-play-state: running;

    /* Ensure no timeline is attached */
    animation-timeline: auto !important;
    animation-range: normal !important;
}

/* Apply names for load animations */
.animate-on-load.fade-up {
    animation-name: fly-in-up;
}

.animate-on-load.fade-down {
    animation-name: fly-in-down;
}

.animate-on-load.fade-right {
    animation-name: fly-in-right;
}

.animate-on-load.fade-left {
    animation-name: fly-in-left;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {

    .animate-on-scroll,
    .animate-on-load {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}