/* Pinned scroll-scrubbed hero video — shared by the home hero and character pages. Desktop pointers (flagged `scrub-on` on before paint) get a tall "track" section whose inner `__pin` sticks to the viewport; JS runs the all-keyframe clip from the track's scroll progress, so the hero holds while the clip plays and the page only advances once it reaches the end. Touch / reduced-motion keep the static poster and normal flow (no pin, clip never downloaded). */ /* The video layer */ .scrub-video{ position:absolute;inset:0;width:100%;height:100%; object-fit:cover;object-position:50% 38%; z-index:0;background:#0b0710;pointer-events:none; } /* keep the scrim + copy above the video */ .home-hero__scrim,.char-hero__scrim{position:absolute;inset:0;z-index:1} .home-hero__inner,.char-hero__inner{position:relative;z-index:2} .release-countdown{z-index:3} /* copy fades out over the back half of the scrub so it hands off to the page */ [data-scrub-box] .home-hero__inner, [data-scrub-box] .char-hero__inner, [data-scrub-box] .release-countdown{opacity:var(--scrub-fade,1)} /* --- default: pin wrapper is layout-neutral (so mobile behaves as before) --- */ .home-hero__pin,.char-hero__pin{display:contents} /* --- desktop scrub: tall track + sticky pin --- NB: the track must NOT be an overflow container or position:sticky on the pin breaks; the pin itself clips the video. */ .scrub-on .home-hero{height:170vh;min-height:0;display:block;overflow:visible} .scrub-on .char-hero[data-scrub-box]{height:165vh;min-height:0;display:block;overflow:visible} .scrub-on .home-hero .home-hero__pin, .scrub-on .char-hero[data-scrub-box] .char-hero__pin{ display:flex;align-items:flex-end; position:sticky;top:var(--header-h); height:calc(100vh - var(--header-h)); overflow:hidden; } /* a taller character hero when it carries a clip (non-scrub / mobile) */ .char-hero[data-scrub-box]{min-height:clamp(420px,58vh,620px)} @media (prefers-reduced-motion:reduce){ [data-scrub-box] .home-hero__inner, [data-scrub-box] .char-hero__inner, [data-scrub-box] .release-countdown{opacity:1} }