/* ============================================
   SCROLL-DRIVEN ANIMATIONS
   Using CSS animation-timeline (Chrome 115+)
   With fallback for unsupported browsers
   ============================================ */

/* ========== FEATURE DETECTION ========== */
/* These animations only work in supporting browsers */
@supports (animation-timeline: view()) {

    /* ========== HERO REVEAL ========== */
    .hero-content {
        animation: hero-reveal linear both;
        animation-timeline: view();
        animation-range: entry 0% cover 50%;
    }

    @keyframes hero-reveal {
        from {
            opacity: 0;
            filter: blur(15px) brightness(2);
            transform: translateY(60px) scale(0.95);
        }

        to {
            opacity: 1;
            filter: blur(0) brightness(1);
            transform: translateY(0) scale(1);
        }
    }

    /* ========== FEATURE CARDS STAGGER ========== */
    .feature {
        animation: feature-glitch-in linear both;
        animation-timeline: view();
        animation-range: entry 10% cover 40%;
    }

    @keyframes feature-glitch-in {
        0% {
            opacity: 0;
            transform: translateX(-30px) skewX(5deg);
            filter: hue-rotate(90deg) blur(5px);
        }

        30% {
            opacity: 0.8;
            transform: translateX(10px) skewX(-2deg);
            filter: hue-rotate(-45deg) blur(2px);
        }

        60% {
            opacity: 1;
            transform: translateX(-5px) skewX(1deg);
            filter: hue-rotate(20deg) blur(0);
        }

        100% {
            opacity: 1;
            transform: translateX(0) skewX(0);
            filter: hue-rotate(0) blur(0);
        }
    }

    /* ========== ABOUT SECTION ========== */
    .about-content {
        animation: text-static-in linear both;
        animation-timeline: view();
        animation-range: entry 10% cover 45%;
    }

    /* Stagger delays for sibling elements */
    .feature:nth-child(2) { animation-delay: 0.15s; }
    .feature:nth-child(3) { animation-delay: 0.3s; }

    .video-card:nth-child(2) { animation-delay: 0.15s; }
    .video-card:nth-child(3) { animation-delay: 0.3s; }

    .testimonial:nth-child(2) { animation-delay: 0.15s; }
    .testimonial:nth-child(3) { animation-delay: 0.3s; }

    /* STORY SECTION: scroll reveal disabled per request (image + text render statically) */

    /* ========== GALLERY CARDS ========== */
    .video-card {
        animation: card-data-stream linear both;
        animation-timeline: view();
        animation-range: entry 5% cover 35%;
    }

    @keyframes card-data-stream {
        0% {
            opacity: 0;
            transform: translateY(50px) perspective(1000px) rotateX(10deg);
        }

        60% {
            opacity: 1;
            transform: translateY(10px) perspective(1000px) rotateX(2deg);
        }

        100% {
            opacity: 1;
            transform: translateY(0) perspective(1000px) rotateX(0);
        }
    }

    /* ========== TESTIMONIALS ========== */
    .testimonial {
        animation: testimonial-fade linear both;
        animation-timeline: view();
        animation-range: entry 10% cover 40%;
    }

    @keyframes testimonial-fade {
        0% {
            opacity: 0;
            transform: scale(0.9);
            border-color: var(--rot-magenta);
            box-shadow: 0 0 30px var(--rot-magenta);
        }

        50% {
            border-color: var(--rot-aqua);
            box-shadow: 0 0 15px var(--rot-aqua);
        }

        100% {
            opacity: 1;
            transform: scale(1);
            border-color: var(--rot-border);
            box-shadow: none;
        }
    }

    /* ========== CTA SECTIONS ========== */
    .cta-content,
    .final-content {
        animation: cta-pulse linear both;
        animation-timeline: view();
        animation-range: entry 0% cover 60%;
    }

    @keyframes cta-pulse {
        0% {
            opacity: 0;
            filter: brightness(0.5);
        }

        50% {
            opacity: 1;
            filter: brightness(1.3);
        }

        100% {
            opacity: 1;
            filter: brightness(1);
        }
    }

    /* ========== SECTION HEADERS ========== */
    .gallery h2,
    .testimonials h2 {
        animation: header-glitch linear both;
        animation-timeline: view();
        animation-range: entry 0% cover 30%;
    }

    @keyframes header-glitch {
        0% {
            opacity: 0;
            letter-spacing: 0.5em;
            filter: blur(10px);
        }

        25% {
            opacity: 0.5;
            letter-spacing: 0.2em;
            transform: translateX(-5px);
        }

        50% {
            opacity: 0.8;
            letter-spacing: 0.1em;
            transform: translateX(3px);
        }

        75% {
            opacity: 1;
            letter-spacing: 0.05em;
            transform: translateX(-1px);
        }

        100% {
            opacity: 1;
            letter-spacing: normal;
            transform: translateX(0);
            filter: blur(0);
        }
    }

    /* ========== PROGRESSIVE CORRUPTION ========== */
    /* Body gets more "corrupted" as user scrolls deeper */
    body {
        animation: progressive-corruption linear;
        animation-timeline: scroll();
    }

    @keyframes progressive-corruption {
        0% {
            --scanline-opacity: 0.03;
            --noise-intensity: 0.05;
        }

        50% {
            --scanline-opacity: 0.06;
            --noise-intensity: 0.1;
        }

        100% {
            --scanline-opacity: 0.1;
            --noise-intensity: 0.15;
        }
    }
}

/* ========== FALLBACK FOR UNSUPPORTED BROWSERS ========== */
@supports not (animation-timeline: view()) {

    /* Simple fade-in using Intersection Observer via JS */
    .hero-content,
    .about-content,
    .feature,
    .testimonial,
    .cta-content,
    .final-content,
    .char-card {
        opacity: 0;
        transform: translateY(30px);
        transition:
            opacity var(--duration-slow, 0.5s) var(--ease-smooth),
            transform var(--duration-slow, 0.5s) var(--ease-smooth);
    }

    .hero-content.is-visible,
    .about-content.is-visible,
    .feature.is-visible,
    .testimonial.is-visible,
    .cta-content.is-visible,
    .final-content.is-visible,
    .char-card.is-visible {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========== REDUCED MOTION ========== */
@media (prefers-reduced-motion: reduce) {

    .hero-content,
    .about-content,
    .feature,
    .testimonial,
    .cta-content,
    .final-content,
    .char-card,
    .gallery h2,
    .testimonials h2 {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
}