/** * Guester Cinema, the hero entrance. * * The pinned hero used to open on the full composition: text at 16vh, the * screen tilted at rest, four satellites floating. Now the first scene is * the sentence alone, near the stage's centre, and the composition is * earned by scroll: the screen rises from below the fold, the satellites * deal out to their rest poses, and from 40% on the shipped choreography * plays exactly as before. The timeline itself lives in main.js (vo()); * this sheet carries only what CSS must hold before that script binds. * * Two jobs, both scoped to html.js-motion so no-JS visitors keep the * static composed hero exactly as hero.php ships it, and both inside the * same motion-safe/lg media the pinned subtree is gated by, so the flat * hero (mobile, reduced motion) never sees any of this: * * 1. The runway grows 240vh -> 300vh so the prepended entrance does not * squeeze the shipped arc. Beats .h-\[240vh\] on specificity; the * markup keeps its own value for the no-JS reading. * 2. The pre-bind rest state. js-motion is stamped by an inline * script, so these apply before first paint: screen, satellites and * shadow open hidden, the text block sits 14vh below its markup spot, * i.e. optically centred. vo() lifts .he-bound in the same frame its * first inline styles land (the class is stamped inside the scrub * callback), so there is no frame where both or neither writer holds * the elements. The !important is needed against the markup's inline * rest-pose styles and costs nothing after the handoff: once he-bound * is on , these selectors never match again. * * Delete novamira-sandbox/hero-entrance-enqueue.php to roll the sheet * back; main.js then still runs the new timeline from a 240vh runway with * one pre-bind frame of the composed pose, which is degraded but whole. */ @media (prefers-reduced-motion: no-preference) and (min-width: 64rem) { html.js-motion [data-fx="hero"] { height: 300vh; } html.js-motion:not(.he-bound) [data-fx="hero-screen"], html.js-motion:not(.he-bound) [data-fx="hero-sat"], html.js-motion:not(.he-bound) [data-fx="hero-shadow"] { opacity: 0 !important; } html.js-motion:not(.he-bound) [data-fx="hero-text"] { transform: translateY(14vh); } }