/**
 * Scrollytelling catalog CSS.
 *
 * The motion rules that drive the className / data-attribute hooks emitted
 * by content pages and headers (.reveal-on-scroll, .hero-content,
 * .scroll-progress, .narrative-pin, hide-on-scroll-down header,
 * active-anchor nav underline). Gated end-to-end on
 * prefers-reduced-motion: no-preference so opted-out users see no motion.
 *
 * Shipped as a separate stylesheet (not folded into style.css) and
 * enqueued frontend-only from scrollytelling.php via wp_enqueue_scripts.
 * The block editor loads style.css inside its iframe canvas for WYSIWYG
 * preview; if the .reveal-on-scroll opacity: 0 rule landed there, every
 * reveal section would render blank in the editor and the canvas would
 * read as uneditable. Living in its own frontend-only file keeps the
 * editor preview unaffected.
**/

@media (prefers-reduced-motion: no-preference) {
    /* Section reveal on enter view */
    .reveal-on-scroll {
        opacity: 0;
        transform: translateY(24px);
        transition: opacity 0.7s ease, transform 0.7s ease;
    }
    .reveal-on-scroll.is-visible {
        opacity: 1;
        transform: translateY(0);
    }

    /* Hero scroll-fade (CSS scroll-driven animation; older browsers no-op) */
    @supports (animation-timeline: view()) {
        .hero-content {
            animation: hero-fade linear;
            animation-timeline: view();
            animation-range: cover 0% cover 60%;
        }
        @keyframes hero-fade {
            from { opacity: 1; transform: translateY(0); }
            to   { opacity: 0; transform: translateY(-40px); }
        }
    }

    /* Scroll progress bar (CSS scroll-driven animation; older browsers no-op) */
    @supports (animation-timeline: scroll()) {
        .scroll-progress {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: var(--wp--preset--color--accent, currentColor);
            transform-origin: left center;
            transform: scaleX(0);
            z-index: 1000;
            animation: scroll-progress-grow linear;
            animation-timeline: scroll(root);
            pointer-events: none;
        }
        @keyframes scroll-progress-grow {
            from { transform: scaleX(0); }
            to   { transform: scaleX(1); }
        }
    }

    /* Sticky narrative pin (NYT-style scrolling visuals beside pinned text) */
    .narrative-pin > .wp-block-column:first-child {
        position: sticky;
        top: var(--wp--custom--scroll-padding-top, 96px);
        align-self: flex-start;
    }

    /* Hide-on-scroll-down header variant */
    .wp-site-blocks > header.wp-block-template-part {
        transition: transform 0.3s ease;
    }
    body.header-hidden .wp-site-blocks > header.wp-block-template-part {
        transform: translateY(-100%);
    }

    /* Active-anchor underline (landing-page nav) */
    .wp-block-navigation a {
        position: relative;
    }
    .wp-block-navigation a::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: -4px;
        height: 2px;
        background: currentColor;
        transform: scaleX(0);
        transform-origin: left center;
        transition: transform 0.3s ease;
    }
    .wp-block-navigation a.is-active::after {
        transform: scaleX(1);
    }
}