/* ============================================
   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);
        }
    }

    /* ========== STORY SECTION ========== */
    .story-content img {
        animation: image-corrupt-reveal linear both;
        animation-timeline: view();
        animation-range: entry 0% cover 50%;
    }

    @keyframes image-corrupt-reveal {
        0% {
            opacity: 0;
            clip-path: inset(0 100% 0 0);
            filter: saturate(3) contrast(2);
        }

        50% {
            opacity: 1;
            clip-path: inset(0 30% 0 0);
            filter: saturate(1.5) contrast(1.2);
        }

        100% {
            opacity: 1;
            clip-path: inset(0 0 0 0);
            filter: saturate(1) contrast(1);
        }
    }

    .story-text {
        animation: text-static-in linear both;
        animation-timeline: view();
        animation-range: entry 10% cover 45%;
    }

    @keyframes text-static-in {
        0% {
            opacity: 0;
            transform: translateY(40px);
            text-shadow: 0 0 20px var(--rot-magenta);
        }

        50% {
            opacity: 0.7;
            transform: translateY(15px);
            text-shadow:
                2px 0 var(--rot-aqua),
                -2px 0 var(--rot-magenta);
        }

        100% {
            opacity: 1;
            transform: translateY(0);
            text-shadow: none;
        }
    }

    /* ========== 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,
    .feature,
    .story-content img,
    .story-text,
    .video-card,
    .testimonial,
    .cta-content,
    .final-content {
        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,
    .feature.is-visible,
    .story-content img.is-visible,
    .story-text.is-visible,
    .video-card.is-visible,
    .testimonial.is-visible,
    .cta-content.is-visible,
    .final-content.is-visible {
        opacity: 1;
        transform: translateY(0);
    }
}

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

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