/* W3_HERO 2026-10-14: hero, loader and nav overrides, loaded after sections.css (which W3_SECTIONS owns). The approved
 * look is unchanged: the open printed kit, the urn in front, live GL, the same opening move. What changes is how the
 * first screen arrives (one picture, no cross-fade, no headline jump, no layout shift) and how it holds on small phones.
 * Sources: design3/quality/AUDIT.md (Q), craft/AUDIT.md (C), ux/AUDIT.md (U). */

/* Q P0-1 / P1-10: the headline is placed by transform only, before first paint where it can be (page.js prePlace), so
 * neither its first placement nor the per-frame parting is a layout. Default = the old 40 % of the bench height. */
.split { top: 0; transform: translate3d(0, var(--split-top, calc(min(max(100svh, 640px), 1100px) * .4)), 0); }
/* C P1-3: both blocks of the headline keep a hard left edge (block A was right-aligned: "Your next" sat indented) */
@media (min-width: 761px) { .split-line .blk-a { text-align: left; } }

/* Q P0-1: the poster is a still of this canvas mapped onto it (js/hero-frame.js); the GL's first frame is the same
 * picture, so the swap is a cut between identical frames: no cross-fade, no ghost kit. */
.stage-poster { left: 0; top: 0; width: var(--poster-w, 1000px); height: var(--poster-h, 1000px); max-width: none; max-height: none;
  transform-origin: 0 0; transform: translate3d(calc(50vw - 330px), 17svh, 0); mix-blend-mode: normal; transition: none; }
.bench.is-live .stage-poster { opacity: 0; visibility: hidden; }
.stage canvas { transition: none; }

/* U P1-7 / Q P0-2: the kit readout is the first screen's one real measurement. Its line is in the HTML from the start
 * (no layout shift when the GL fills it in) and it is set to read, not to whisper. */
.bench-size { min-height: 1.5em; margin-top: 4px; font: 400 13px/1.5 var(--font-mono); color: var(--ink-2); letter-spacing: 0; }

/* C P1-2: scrolled content no longer shows in the gap above the floating dock on desktop (the phone had this already) */
body::after { content: ""; position: fixed; left: 0; right: 0; top: 0; height: 18px; z-index: 29; pointer-events: none;
  background: linear-gradient(var(--paper) 62%, rgb(255 255 255 / 0)); }

@media (max-width: 760px) {
  /* Q P0-1: the phone headline sits under the dock from the first paint (dock bottom 66 + 18), as page.js keeps it */
  .split { --split-top: 84px; }
  body::after { height: 12px; }
  /* Q P0-3: at 360 px the two doors stay on one row (they wrapped to two full-width rows and pushed the lede up) */
  .bench .doors { flex-wrap: nowrap; gap: 10px; }
  .bench .doors .pill { flex: 1 1 0; min-width: 0; padding: 0 12px; }
  .bench-size { font-size: 12px; }
}
@media (max-width: 380px) {
  .bench .doors .pill { padding: 0 8px; font-size: 13px; }
  .bench-sub { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .split { transition: none; }
}

/* The skip link waits inside the viewport, clipped to nothing, instead of parked 64 px above it (detector: html/body
 * "clip a positioned child"); it appears in the same place on focus. */
.skip { top: 12px; }
.skip:not(:focus) { clip-path: inset(50%); opacity: 0; pointer-events: none; }
/* the pearls exist once the kit can be cut and opened (they did nothing before; they also sat at the bench's corner) */
.bench:not(.is-live) .pearl { display: none; }
main:focus { outline: none; }
/* the caption and its readout: two calm lines, never a number broken across lines */
.bench-cap { max-width: 36em; }
.bench-cap > span:first-child { display: block; text-wrap: balance; }
@media (min-width: 761px) { .bench-size { white-space: nowrap; } }

/* poster boxes: each poster's CSS box is its crop on the canvas it was shot on (js/hero-frame.js POSTERS[*].box); the
 * <picture> sources and these queries pick the same variant. Before page.js maps it, it sits roughly centred. */
.stage-poster { --poster-w: 732.0px; --poster-h: 673.0px; }
@media (prefers-reduced-motion: reduce) { .stage-poster { --poster-w: 778.5px; --poster-h: 682.5px; } }
@media (max-width: 760px) {
  .stage-poster { --poster-w: 390.0px; --poster-h: 442.67px; transform: translate3d(calc(50vw - 195px), 22svh, 0); }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) { .stage-poster { --poster-w: 386.0px; --poster-h: 424.67px; } }
/* the pearls' 48 px hit field is centred on its point with `translate`, not negative offsets (bench.js writes the point
 * into `transform`; the two compose), so nothing is parked outside the bench */
.pearl { left: 0; top: 0; translate: -24px -24px; }
/* Reduced motion opens on the settled pose, which has depth (the halves stand 420 mm behind the urn): on a phone whose
 * proportions differ from the poster's (390 x 844) the halves can sit ~20 px apart from the GL's. A 200 ms dissolve
 * (opacity only) replaces that cut. The closed pose needs none; it matches within compression noise. */
@media (prefers-reduced-motion: reduce) {
  .bench .stage canvas { transition: opacity .2s ease !important; }
  .bench .stage .stage-poster { transition: opacity .2s ease, visibility 0s linear .2s !important; }
}