/**
 * Honey King parallax depth layers.
 *
 * Ported from the "Parallax Depth" card in the Claude Design project
 * "Honey King — Page Transitions" (scroll/02-parallax-depth.html). The transform
 * rule and the reduced-motion opt-out are the design's; the bleed rule below is
 * an adaptation this site needs.
 *
 * parallax.js sets --y on any [data-par] element as it moves through the
 * viewport. A positive data-par drifts with the scroll, a negative one against
 * it, which is what gives the layers their sense of depth.
 *
 * WHY THE BLEED
 * The design's parallax layer is authored oversized (inset:-16% 0) so it has
 * headroom to move inside a fixed frame. This site's .story-media is inset:0 and
 * exactly fills its box, so drifting it would slide the image edge into view.
 * Extending it vertically gives it the same headroom; section.story already has
 * overflow:hidden, so the excess is clipped and the layout is unchanged.
 *
 * TRANSFORM SAFETY
 * data-par is only ever put on decorative media layers - .story-media, which at
 * most holds an id-less background <video> - and never on a <section> or on
 * anything that contains an anchor target. A transform on a section would move
 * its own bounding rect, and the anchor scroll computes its target from exactly
 * that rect, so every #section link would land at the wrong offset.
 */

[data-par] {
    will-change: transform;
    transform: translate3d(0, var(--y, 0px), 0);
}

/* ---- scroll reveals ------------------------------------------------------
   Ported from the design's [data-reveal] system. Section copy rises in as it
   enters the viewport instead of simply being there, which is what makes a long
   page feel like it is unfolding rather than pre-rendered.

   FAIL-SAFE: the attribute is added by parallax.js at runtime, never authored in
   the HTML. If the script does not run, nothing carries the attribute, nothing is
   hidden, and the page renders exactly as before. */

[data-reveal] {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
    transition: opacity 0.78s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.78s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: var(--d, 0ms);
    will-change: opacity, transform;
}

[data-reveal].in {
    opacity: 1;
    transform: none;
}

/* Headroom so the drifting image never reveals its own edge. */
.story-media[data-par] {
    inset: -9% 0;
}

@media (prefers-reduced-motion: reduce) {
    [data-par] {
        transform: none !important;
    }

    .story-media[data-par] {
        inset: 0;
    }

    [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}