@layer animations;

@layer animations {
    /* ============================================
       PREFERS-REDUCED-MOTION - Accessibility
       ============================================ */
    @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
            scroll-behavior: auto !important;
        }
        
        .scroll-reveal,
        .scroll-reveal--visible {
            opacity: 1 !important;
            transform: none !important;
        }
    }

    /* ============================================
       SCROLL-REVEAL ANIMATIONS
       ============================================ */
    .scroll-reveal {
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 0.6s cubic-bezier(0.23, 1, 0.32, 1),
                    transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
        will-change: opacity, transform;
    }

    .scroll-reveal--visible {
        opacity: 1;
        transform: translateY(0);
    }

    /* Stagger delay support via CSS custom property */
    .scroll-reveal[style*="--stagger-delay"] {
        transition-delay: var(--stagger-delay);
    }

    @keyframes slide-up {
        from {
            opacity: 0;
            transform: translateY(30px);
        }

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

    @keyframes reveal-from-bottom {
        from {
            opacity: 0;
            transform: translateY(40px);
        }

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

    @keyframes cursor-blink {

        0%,
        100% {
            opacity: 1;
        }

        50% {
            opacity: 0;
        }
    }

    @keyframes rotate-mesh {
        to {
            --gradient-angle: 360deg;
        }
    }

    .animate-reveal {
        animation: reveal-from-bottom 0.8s cubic-bezier(0.23, 1, 0.32, 1) both;
    }

    .animate-on-scroll {
        animation: reveal-from-bottom linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 30%;
    }

    .typewriter-cursor::after {
        content: '|';
        animation: cursor-blink 0.75s step-end infinite;
        color: var(--color-primary);
        margin-inline-start: 2px;
    }

    /* Marquee Animation */
    @keyframes marquee-scroll {
        from {
            transform: translateX(0);
        }

        to {
            transform: translateX(-50%);
        }
    }

    /* Smooth entry for marquee - gentle ease-in */
    @keyframes marquee-entry {
        from {
            opacity: 0;
            transform: translateX(30px);
        }

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

    .partners-marquee {
        display: flex;
        gap: var(--space-12);
        width: max-content;
        animation: marquee-scroll 30s linear infinite;
    }

    /* ============================================
       INFINITE LOGO MARQUEE - 2026 Performance
       ============================================ */
    
    @keyframes marquee-infinite-scroll {
        0% {
            transform: translate3d(0, 0, 0);
        }
        100% {
            transform: translate3d(-50%, 0, 0);
        }
    }

    /* Animation class - applied via JS after entry */
    .logo-marquee--animating {
        animation: marquee-infinite-scroll 40s linear infinite;
        /* 40s for smoother, more elegant movement */
    }

    /* Entry animation - soft ease-in on page load */
    .logo-marquee--entering {
        opacity: 0;
        animation: marquee-entry 1.2s cubic-bezier(0.23, 1, 0.32, 1) forwards;
    }

    /* Paused state for hover (Smart Pause) */
    .logo-marquee--paused {
        animation-play-state: paused !important;
    }

    /* Smooth stop when out of viewport */
    .logo-marquee--stopped {
        animation: none !important;
        transition: opacity 0.3s ease;
    }

    /* Hero Gradient Mesh Animation */
    .hero__bg {
        position: absolute;
        inset: 0;
        z-index: -1;
        background: conic-gradient(from var(--gradient-angle),
                #FF3B30 0%,
                #FF9500 25%,
                #08192E 50%,
                #0F2744 75%,
                #FF3B30 100%);
        filter: blur(80px);
        animation: rotate-mesh 12s linear infinite;
        will-change: transform, opacity;
        opacity: 0.25;
        transform: translateZ(0);
    }
}