/* ==========================================================================
   Cinematic Scroll-Driven Animations
   Pure CSS scroll-driven animations using the Scroll-Driven Animations API.
   Progressive enhancement: elements remain visible without animation support.
   Respectful motion: all animations honor prefers-reduced-motion.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Reduced Motion — disable ALL scroll animations globally
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    [data-reveal],
    [data-parallax],
    .section-divider,
    hr,
    .member-card,
    .album-card,
    .article-card,
    .news-card,
    #scroll-progress,
    .hero,
    .hero-section,
    .hero__title,
    img[data-scroll-reveal],
    .scroll-reveal-img {
        animation: none !important;
        animation-timeline: none !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        clip-path: none !important;
    }
}

/* --------------------------------------------------------------------------
   1. Scroll-Triggered Text Reveals — [data-reveal]
   --------------------------------------------------------------------------
   Graceful fallback: elements are fully visible without @supports.
   Inside @supports, elements start hidden and animate in on scroll.
   -------------------------------------------------------------------------- */

@supports (animation-timeline: view()) {

    /* --- Base: hide elements before scroll reveal --- */
    [data-reveal] {
        animation-fill-mode: both;
        animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
        animation-duration: 1ms; /* overridden by timeline */
        animation-timeline: view();
        animation-range: entry 10% cover 40%;
    }

    /* --- Fade + Translate Up --- */
    @keyframes reveal-up {
        from {
            opacity: 0;
            transform: translateY(30px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    [data-reveal="up"] {
        animation-name: reveal-up;
    }

    /* --- Fade + Translate from Left --- */
    @keyframes reveal-left {
        from {
            opacity: 0;
            transform: translateX(-30px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }
    [data-reveal="left"] {
        animation-name: reveal-left;
    }

    /* --- Fade + Translate from Right --- */
    @keyframes reveal-right {
        from {
            opacity: 0;
            transform: translateX(30px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }
    [data-reveal="right"] {
        animation-name: reveal-right;
    }

    /* --- Fade + Scale --- */
    @keyframes reveal-scale {
        from {
            opacity: 0;
            transform: scale(0.85);
        }
        to {
            opacity: 1;
            transform: scale(1);
        }
    }
    [data-reveal="scale"] {
        animation-name: reveal-scale;
    }

    /* --- Fade + Blur --- */
    @keyframes reveal-blur {
        from {
            opacity: 0;
            filter: blur(8px);
        }
        to {
            opacity: 1;
            filter: blur(0);
        }
    }
    [data-reveal="blur"] {
        animation-name: reveal-blur;
    }

    /* --- Staggered Children --- */
    [data-stagger] > * {
        animation-fill-mode: both;
        animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
        animation-duration: 1ms;
        animation-timeline: view();
        animation-range: entry 10% cover 40%;
    }

    /* Inherit the parent's reveal type for children */
    [data-stagger][data-reveal="up"] > * { animation-name: reveal-up; }
    [data-stagger][data-reveal="left"] > * { animation-name: reveal-left; }
    [data-stagger][data-reveal="right"] > * { animation-name: reveal-right; }
    [data-stagger][data-reveal="scale"] > * { animation-name: reveal-scale; }
    [data-stagger][data-reveal="blur"] > * { animation-name: reveal-blur; }

    /* Stagger delays via nth-child (up to 12 children) */
    [data-stagger] > :nth-child(1) { animation-delay: 0ms; }
    [data-stagger] > :nth-child(2) { animation-delay: 60ms; }
    [data-stagger] > :nth-child(3) { animation-delay: 120ms; }
    [data-stagger] > :nth-child(4) { animation-delay: 180ms; }
    [data-stagger] > :nth-child(5) { animation-delay: 240ms; }
    [data-stagger] > :nth-child(6) { animation-delay: 300ms; }
    [data-stagger] > :nth-child(7) { animation-delay: 360ms; }
    [data-stagger] > :nth-child(8) { animation-delay: 420ms; }
    [data-stagger] > :nth-child(9) { animation-delay: 480ms; }
    [data-stagger] > :nth-child(10) { animation-delay: 540ms; }
    [data-stagger] > :nth-child(11) { animation-delay: 600ms; }
    [data-stagger] > :nth-child(12) { animation-delay: 660ms; }

} /* end @supports (animation-timeline: view()) */


/* --------------------------------------------------------------------------
   2. Parallax Depth Layers — [data-parallax]
   -------------------------------------------------------------------------- */

@supports (animation-timeline: scroll()) {

    @keyframes parallax-slow {
        from { transform: translateY(-5%); }
        to   { transform: translateY(5%); }
    }
    @keyframes parallax-medium {
        from { transform: translateY(-8%); }
        to   { transform: translateY(8%); }
    }
    @keyframes parallax-fast {
        from { transform: translateY(-12%); }
        to   { transform: translateY(12%); }
    }

    [data-parallax] {
        animation-fill-mode: both;
        animation-timing-function: linear;
        animation-duration: 1ms;
        animation-timeline: scroll();
        will-change: transform;
    }

    [data-parallax="slow"] {
        animation-name: parallax-slow;
    }

    [data-parallax="medium"] {
        animation-name: parallax-medium;
    }

    [data-parallax="fast"] {
        animation-name: parallax-fast;
    }

} /* end @supports (animation-timeline: scroll()) */


/* --------------------------------------------------------------------------
   3. Section Divider Animations
   --------------------------------------------------------------------------
   .section-divider and <hr> elements draw a red gradient line on scroll.
   -------------------------------------------------------------------------- */

/* Fallback: always show the divider */
.section-divider,
hr {
    border: none;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent,
        var(--accent, #dc2626) 20%,
        var(--accent-red-light, #ef4444) 50%,
        var(--accent, #dc2626) 80%,
        transparent
    );
    margin: 2rem auto;
    max-width: 100%;
}

@supports (animation-timeline: view()) {

    @keyframes divider-draw {
        from {
            transform: scaleX(0);
            opacity: 0.3;
        }
        to {
            transform: scaleX(1);
            opacity: 1;
        }
    }

    .section-divider,
    hr {
        transform-origin: left center;
        animation-name: divider-draw;
        animation-fill-mode: both;
        animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        animation-duration: 1ms;
        animation-timeline: view();
        animation-range: entry 15% cover 50%;
    }

} /* end @supports */


/* --------------------------------------------------------------------------
   4. Card Entrance Choreography
   --------------------------------------------------------------------------
   .member-card, .album-card, .article-card, .news-card
   Staggered fade + rise with 80ms delay between siblings.
   -------------------------------------------------------------------------- */

@supports (animation-timeline: view()) {

    @keyframes card-entrance {
        from {
            opacity: 0;
            transform: translateY(24px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .member-card,
    .album-card,
    .article-card,
    .news-card {
        animation-name: card-entrance;
        animation-fill-mode: both;
        animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
        animation-duration: 1ms;
        animation-timeline: view();
        animation-range: entry 5% cover 35%;
    }

    /* Stagger cards within their grid/flex container using nth-child */
    .member-card:nth-child(1),
    .album-card:nth-child(1),
    .article-card:nth-child(1),
    .news-card:nth-child(1) { animation-delay: 0ms; }

    .member-card:nth-child(2),
    .album-card:nth-child(2),
    .article-card:nth-child(2),
    .news-card:nth-child(2) { animation-delay: 80ms; }

    .member-card:nth-child(3),
    .album-card:nth-child(3),
    .article-card:nth-child(3),
    .news-card:nth-child(3) { animation-delay: 160ms; }

    .member-card:nth-child(4),
    .album-card:nth-child(4),
    .article-card:nth-child(4),
    .news-card:nth-child(4) { animation-delay: 240ms; }

    .member-card:nth-child(5),
    .album-card:nth-child(5),
    .article-card:nth-child(5),
    .news-card:nth-child(5) { animation-delay: 320ms; }

    .member-card:nth-child(6),
    .album-card:nth-child(6),
    .article-card:nth-child(6),
    .news-card:nth-child(6) { animation-delay: 400ms; }

    .member-card:nth-child(7),
    .album-card:nth-child(7),
    .article-card:nth-child(7),
    .news-card:nth-child(7) { animation-delay: 480ms; }

    .member-card:nth-child(8),
    .album-card:nth-child(8),
    .article-card:nth-child(8),
    .news-card:nth-child(8) { animation-delay: 560ms; }

    .member-card:nth-child(n+9),
    .album-card:nth-child(n+9),
    .article-card:nth-child(n+9),
    .news-card:nth-child(n+9) { animation-delay: 640ms; }

} /* end @supports */


/* --------------------------------------------------------------------------
   5. Scroll Progress Indicator — #scroll-progress
   --------------------------------------------------------------------------
   A thin red line fixed at the top that fills based on page scroll.
   -------------------------------------------------------------------------- */

#scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    z-index: 10001; /* above site-header (z-index: 1000) and reading-progress (10000) */
    pointer-events: none;
    background: linear-gradient(
        90deg,
        var(--accent, #dc2626),
        var(--accent-red-light, #ef4444) 60%,
        var(--accent, #dc2626)
    );
    transform-origin: left center;
    transform: scaleX(0);
}

@supports (animation-timeline: scroll()) {

    @keyframes scroll-progress-fill {
        from { transform: scaleX(0); }
        to   { transform: scaleX(1); }
    }

    #scroll-progress {
        animation-name: scroll-progress-fill;
        animation-fill-mode: both;
        animation-timing-function: linear;
        animation-duration: 1ms;
        animation-timeline: scroll();
    }

} /* end @supports */


/* --------------------------------------------------------------------------
   6. Hero Parallax Effect
   --------------------------------------------------------------------------
   .hero / .hero-section background at 0.4x scroll rate.
   .hero__title text at 0.6x rate for subtle depth separation.
   -------------------------------------------------------------------------- */

@supports (animation-timeline: scroll()) {

    @keyframes hero-bg-parallax {
        from { transform: translateY(0); }
        to   { transform: translateY(15%); }
    }

    @keyframes hero-title-parallax {
        from { transform: translateY(0); }
        to   { transform: translateY(25%); }
    }

    .hero .hero-background,
    .hero-section .hero-background {
        animation-name: hero-bg-parallax;
        animation-fill-mode: both;
        animation-timing-function: linear;
        animation-duration: 1ms;
        animation-timeline: scroll();
        will-change: transform;
    }

    .hero__title,
    .hero-section .hero-title {
        animation-name: hero-title-parallax;
        animation-fill-mode: both;
        animation-timing-function: linear;
        animation-duration: 1ms;
        animation-timeline: scroll();
        will-change: transform;
    }

} /* end @supports */


/* --------------------------------------------------------------------------
   7. Image Reveal on Scroll — clip-path wipe effect
   --------------------------------------------------------------------------
   img[data-scroll-reveal] and .scroll-reveal-img get a left-to-right
   clip-path wipe as they enter the viewport.
   -------------------------------------------------------------------------- */

/* Fallback: images are fully visible */
img[data-scroll-reveal],
.scroll-reveal-img {
    clip-path: inset(0);
}

@supports (animation-timeline: view()) {

    @keyframes image-wipe-reveal {
        from {
            clip-path: inset(0 100% 0 0);
        }
        to {
            clip-path: inset(0 0 0 0);
        }
    }

    img[data-scroll-reveal],
    .scroll-reveal-img {
        animation-name: image-wipe-reveal;
        animation-fill-mode: both;
        animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        animation-duration: 1ms;
        animation-timeline: view();
        animation-range: entry 10% cover 45%;
    }

} /* end @supports */