/* ============================================================
   HOME V2 — THE FILM. Rendered by //site/_home_v2_film.php, driven by
   js/concept-home-v2.js. A two-screen hero: one viewport pinned plus a
   100vh runway (--hv2-runway in base.css). This sheet owns what MOVES —
   the canvas, the vignette, the two beats riding the motion in one
   right-hand column (one after the other, so they can never collide) and
   the static fallback. What is PINNED (identity block, proof strip, skip)
   is fold.css.

   Film round 2 (2026-09-03) — the hand-off: the identity block's words
   leave as beat 1 arrives and its one red button rides up onto the beats'
   line (the engine, from data-hv2-identity-out/-gone on the section; the
   markup comment in _home_v2_film.php says why). This sheet carries the
   consequences: the beat title steps up to the headline's own scale (it is
   the frame's one headline once the identity words are gone) and the beat
   doors are quiet text links (.hv2-beat-door), not ghost buttons. Nothing
   here styles .hv2-identity — that stays fold.css's; the engine only writes
   inline opacity/transform while the hand-off is under way.

   Film round 3 (2026-09-03) — one subject per frame: the proof strip now
   leaves with the identity words (engine, inline styles only, nothing here
   touches .hv2-proof — fold.css keeps its rest state; the skip stays the
   fold's, revealed by scroll and faded by the engine at the film's end)
   and the standing button becomes each beat's shop button
   (relabelled by the engine from data-hv2-btn on the beat). So the beats
   lost their doors in film mode: .hv2-cta-row inside a .hv2-line is
   display:none here and comes back in the static column, where no engine
   relays the button and each beat needs its own door. The markup comment
   in _home_v2_film.php says why.
   ============================================================ */

.hv2-film {
  position: relative;
  height: calc(var(--hv2-runway) + 100vh - var(--hv2-header-h));
  background: #000;
}
.hv2-sticky {
  position: sticky;
  top: var(--hv2-header-h);
  height: calc(100vh - var(--hv2-header-h));
  width: 100%;
  overflow: hidden;
  background: #000;
}
#hv2-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.hv2-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(130% 100% at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.5) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, transparent 24%, transparent 70%, rgba(0, 0, 0, 0.8) 100%);
}
.hv2-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
}

/* ---- the riding beats -----------------------------------------------
   ONE column for both beats, in the frame's black upper-right quadrant.
   The numbers come from measuring every drawn frame at 1280x720 (panel
   coords, header excluded): the parked SynQ-S body ends at x 629 (x 705
   while it is still sliding at the runway's first quarter), the module
   rides in along y 347-505 from p 0.545, the skip sits above y 58 and the
   proof strip starts at y 432. The column therefore starts at 57% (x 730),
   is capped at 470px (right edge 1200, inside the module's entry), and
   opens at 15.6% (y 100) — low enough that the eyebrow stays under the
   header when the panel slides its last 80px out at the end of the runway,
   high enough that a 235px beat ends above the module band. Each beat is
   BUILT to fit that 240px: see the row and grid rules below (since round 3
   the beats carry no door in film mode, so beat 1 ends ~185px down the
   column and beat 2 ~190px — 50px of air above the module band at 1280).
   Percentages scale the column with the panel at 1366/1536/1920, where the
   frame's product band sits proportionally lower and the budget only grows. */
.hv2-line {
  position: absolute;
  left: 57%;
  top: 15.6%;
  width: min(37vw, 470px);
  opacity: 0;
  margin: 0;
  text-align: left;
  will-change: opacity, transform;
}
/* The eyebrow is a <p>, and base.css's `.hv2 p { margin: 0 }` (0,1,1) beats
   any single class (0,1,0) — which is how the old sub-line (also a <p>) lost
   its 24px margin and ran into the title. So the eyebrow's margin is set at
   two classes. Everything else below stays single-class on purpose: the
   phone block at the end of this sheet (and fold.css) re-sizes these same
   selectors for ≤860px, and it must keep winning by source order. */
.hv2-beat .hv2-eyebrow { margin: 0 0 10px; }
/* The headline's own scale (fold.css .hv2-headline: 46px at 1280), not the
   40px of round 1: once the identity words have handed off, this title is
   the only headline in the frame, and the relay reads as one headline
   replacing another only if the two match. The column still holds it —
   EVERYTHING INCLUDED is ~444px at 46px inside the 470px cap, INTRODUCING /
   THE Q SERIES breaks where its <br> says — and each beat still ends above
   y 340 (beat 1 ~219px tall from y 100, beat 2 the same). */
.hv2-beat-title {
  font-family: "Oswald", sans-serif;
  font-weight: 700;
  font-size: clamp(30px, 3.6vw, 56px);
  line-height: 0.98;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--hv2-ink);
  margin: 0;
}
.hv2-beat-title b { color: var(--hv2-accent); }

/* Beat 1's in-the-box list: three one-line rows (name, then description on
   the same baseline) under a hairline each — a packing list, 34px a row, so
   the whole beat ends ~100px above the module band. Stacked name/description
   rows cost 48px each and pushed the door onto the module. The row wraps if
   a description ever runs long, which only makes the row taller. */
.hv2-beat-list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  border-top: 1px solid var(--hv2-line);
}
.hv2-beat-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 12px;
  padding: 8px 0 7px;
  border-bottom: 1px solid var(--hv2-line);
}
.hv2-beat-list b {
  flex: none;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.3;
  color: var(--hv2-ink);
}
.hv2-beat-list small {
  font-family: "Inter", sans-serif;
  font-size: 12px;
  line-height: 1.3;
  color: var(--hv2-muted);
}

/* Beat 2's four points as a 2x2 grid (content-sized columns, so "Serial
   connectivity" never wraps at 1280): two rows of 30px instead of four, the
   saving that keeps the door above the module. The "+" marks are dim, not
   red — the eyebrow, the title's "Q Series" and the pinned button already
   carry the red on this screen. */
.hv2-beat-points {
  list-style: none;
  display: grid;
  grid-template-columns: max-content max-content;
  column-gap: 30px;
  row-gap: 6px;
  margin: 16px 0 0;
  padding: 0;
}
.hv2-beat-points li {
  font-family: "Oswald", sans-serif;
  font-weight: 600;
  font-size: clamp(17px, 1.7vw, 24px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--hv2-ink);
  line-height: 1.15;
  margin: 0;
  padding-left: 20px;
  position: relative;
  white-space: nowrap;
}
.hv2-beat-points li::before {
  content: "+";
  position: absolute;
  left: 0;
  top: 0.05em;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.8em;
  color: var(--hv2-dim);
}
/* THE DOOR RIDES WITH THE BEAT (2026-09-06, Hamza). Round 3 hid the beat
   doors in film mode and let the fold's standing button relay to the beat
   on screen; that relay is retired (_home_v2_film.php, the header). The Q
   beat's door is now the page's red button (base.css .hv2-btn, the -sm
   size: 12px 26px, 14px, ~40px tall) at the foot of the block, so it fades,
   holds and drifts with the words — the row is part of the .hv2-line the
   engine animates, and the engine flips the row's pointer-events with the
   beat's opacity. SEATING: the block must still end above the module band.
   At 1280x720 the module's top edge, at its mark, is y 349 in the panel
   and the column opens at y 100; eyebrow + title + the 2x2 points run to
   y 286, the row gets 12px of air and the 40px button ends at y 338 —
   11px above the band (measured, film-shots.mjs) — and at every wider
   size the air only grows (1366x768: foot 355, band 375). The old quiet
   text-link rules
   (.hv2-beat-door as Inter 14px) are gone: they would have out-ranked
   .hv2-btn by source order. */
.hv2-beat .hv2-cta-row { margin-top: 12px; }
.hv2-beat .hv2-btn { white-space: nowrap; }

/* Static-mode shots stay out of film mode entirely. */
.hv2-static-shot { display: none; }

/* ============================================================
   STATIC FALLBACK — phones and reduced motion (mirrored by the <noscript>
   block in _home_v2_film.php; KEEP THE TWO IN SYNC). The film's composition
   is spatial — product in one half of a 16:9 frame, words in the other —
   which a portrait cover-crop cannot keep, so below 860px the hero becomes a
   stacked static column: no runway, no canvas, no frames fetched (the engine
   gates on this same media list), each beat above its catalog shot.
   ============================================================ */
@media (max-width: 860px), (prefers-reduced-motion: reduce) {
  .hv2-film { height: auto; }
  .hv2-sticky { position: static; height: auto; overflow: visible; }
  #hv2-canvas, .hv2-vignette { display: none; }
  .hv2-overlay {
    position: static;
    pointer-events: auto;
    max-width: 680px;
    margin: 0 auto;
    padding: 34px 22px 8px;
  }
  .hv2 .hv2-line {
    position: static;
    opacity: 1 !important;
    transform: none !important;
    width: auto;
    max-width: none;
    margin: 18px 0 0;
    will-change: auto;
  }
  /* The beat doors come back: no engine, no relayed button, so each beat
     needs its own way to its product (display:none in film mode, above). */
  .hv2-line .hv2-cta-row { display: flex; pointer-events: auto !important; }
  .hv2-static-shot { display: block; width: 100%; height: auto; margin: 22px 0 4px; }
  .hv2-beat-title { font-size: clamp(28px, 7.4vw, 44px); }
  /* The 2x2 grid is a film-mode economy (it exists to end the beat above
     the module band); in the stacked column the four points read as one
     list again, phone-sized, and the rows may wrap their descriptions.
     Single-class selectors, same as the film-mode rules, so the phone block
     below still overrides the sizes by source order. */
  .hv2-beat-points { grid-template-columns: max-content; row-gap: 0; margin-top: 18px; }
  .hv2-beat-points li { font-size: clamp(17px, 4.6vw, 24px); margin: 0 0 8px; white-space: normal; }
  .hv2-beat-list li { padding: 10px 0 9px; }
  .hv2-beat-list b { font-size: 15px; }
  .hv2-beat-list small { font-size: 13px; }
}

/* ============================================================
   PHONES ONLY (≤860px) — the stacked column's order. Phone round 1,
   2026-09-03. The sticky panel becomes the flex column and the overlay
   dissolves (display: contents) so the proof strip — OUTSIDE the overlay in
   the markup — can take its slot under the button; fold.css carries the
   identity block's slots and the strip's. Order groups: 0 = headline, h1,
   price row, first catalog shot; 1 = button, proof; 2 = the beats and the
   second shot — source order inside each group. The shots run edge to edge
   (the masters carry their own black, so there is no seam) and are never
   cropped: 390px wide is 244px tall from the 1440x900 master. Beat titles
   step up to the phone's display scale (36px at 390) and the eyebrows'
   tracking eases so "SynQ-S siren controller · In the box" holds one line
   at 346px. KEEP IN SYNC with fold.css.
   ============================================================ */
@media (max-width: 860px) {
  .hv2-sticky {
    display: flex;
    flex-direction: column;
    max-width: 680px;
    margin: 0 auto;
    padding: 0 0 40px;
  }
  .hv2-overlay { display: contents; }
  /* THE HERO SHOT — phone round 2, 2026-09-03. The blind critic's one
     remaining gap: the fold sold "a dark, unlit keypad under an abstract
     slogan", so a stranger saw a grid of buttons where the lights the
     company sells should be. Apple's phone fold is the product, lit, at
     more than half the screen. So the fold's picture is now a LIT light —
     the Q-200 stick's Solid Black master (black-bg/card/, the glow state:
     red end caps, both lenses lit red / amber / white), the one still in
     the page's own library that reads as an emergency light from across
     the room. A pseudo-element on the column, not new markup (the film's
     partial is not this round's to edit): it is a flex item like the
     others, `order: 1` puts it after the order-0 words (headline, h1, price
     row) and — first in tree order — ahead of the button and the strip,
     so the fold reads what we make → how much → the lit light → the one
     button. Desktop never generates it (this block is phones-only), so it
     costs the film nothing.
     The master is 1440x900 with the product on 171-1282 x 176-736 and its
     reflection fading out by row 856; everything outside that is the
     stage's own black. The box shows a 1152x730 window of it (aspect-ratio
     1152/730 → 247px tall at 390): the background is 125% wide, centred,
     so the window is columns 144-1296 — 27 and 14 master px of black past
     the product's ends, the product itself 340px wide on a 390 screen
     instead of 303 — and starts at row 150 (offset -150 of the 170-row
     overrun → 88.24%), above the first pixel of aura at 144-ish. Only
     black leaves the frame — the Made in America band's own rule for its
     plate. Relative URL: the sheet lives two levels under the webroot. */
  .hv2-sticky::before {
    content: "";
    display: block;
    order: 1;
    flex: none;
    width: 100%;
    aspect-ratio: 1152 / 730;
    margin: 6px 0 0;
    background: #000 url("../../img/products/black-bg/card/q-200-stick.webp") center 88.24% / 125% auto no-repeat;
  }
  /* The catalog shot rides with its beat (round 2 — the keypad left the
     fold for the hero shot above): the shot ABOVE the beat that describes
     it, source order inside group 2 — the Q module then "Introducing the Q
     Series". 30px of air over it, the beat's own 20px under it. (The SynQ-S
     shot and its "Everything included" beat left in THE CUT, 2026-09-06 —
     _home_v2_film.php.) */
  .hv2-static-shot { order: 2; margin: 30px 0 0; }
  .hv2 .hv2-line { order: 2; margin: 20px 22px 0; }
  .hv2-beat .hv2-eyebrow { letter-spacing: 0.2em; }
  .hv2-beat-title { font-size: clamp(30px, 9.2vw, 40px); }
  .hv2-beat-points { margin-top: 14px; }
  .hv2-beat-points li { font-size: clamp(17px, 4.9vw, 24px); margin-bottom: 8px; }
  .hv2-beat .hv2-cta-row { margin-top: 18px; }
  /* The beat door is a text link since film round 2 (no .hv2-btn-sm in the
     beats any more); the phone's body size for it is 15px, like the h1. */
  .hv2-beat-door { font-size: 15px; }
}

/* ============================================================
   PHONES ONLY (≤860px) — phone round 4, 2026-09-03: THE Q SERIES DOOR IS
   THE FOLD'S BUTTON. The blind critic's gap after round 3 (fold.css, the
   round-4 block, has the whole reading): the fold showed a lit Q Series
   200 stick (round 2) over words that sold SynQ — "controllers from
   $1,099", EXPLORE SYNQ — and a lights buyer saw no shop path until Three
   Ways. The stacked column already carries the honest door for that
   picture: the Q Series beat's own "Shop the Q Series" (→ /q-series, the
   line the stick belongs to — product 1607, "Q Series 200", in the Q
   Series category), a quiet text link under the beat's points. This block
   lifts it onto the fold as the page's red button and re-groups the column
   around it — one subject at a time, the fold's subject first:
     0  headline, h1                       (fold.css; the price line is off)
     1  the lit stick, SHOP THE Q SERIES, the proof card
     2  the Q module shot, "Introducing the Q Series" and its four points
     3  EXPLORE SYNQ, a ghost button closing the column (fold.css, still order: 4 there)
   (THE CUT, 2026-09-06: the SynQ-S shot, "Everything included" and "Shop
   the SynQ-S" were group 3 until the beat was removed — _home_v2_film.php.)
   The lift is CSS only: the Q beat dissolves (display: contents) so its
   eyebrow, title, points and door become flex items of the column with
   their own order and 22px edges (the beat's own margin went with its
   box); the door's row takes order 1 — after the stick (the column's
   ::before, first in tree order) and before the proof — and the anchor is
   painted as base.css's .hv2-btn: same href, same data-hv2-cta, the markup
   chevron hidden. Nothing here reaches film mode: the engine never
   initialises the scrub under this media list (js/concept-home-v2.js,
   staticMode), so no inline style ever lands on the dissolved beat. The
   beat is addressed by its own class (.hv2-beat--q — the relay attribute
   it was keyed on retired on 2026-09-06) and the shot by its file. Four
   classes on every rule, so the static block's and the phone
   block's (0,2,0) above lose whatever order the sheets take. The <noscript>
   styles in _home_v2_film.php do not carry this order (they never carried
   the phone order); a no-JS phone gets the plain column. KEEP IN SYNC with
   fold.css.
   ============================================================ */
@media (max-width: 860px) {
  .hv2-overlay .hv2-beat.hv2-beat--q { display: contents; }
  /* The door: order 1, the page's red button, full width under the light —
     8px under the box, where the master's reflection has already faded. */
  .hv2-overlay .hv2-beat.hv2-beat--q .hv2-cta-row {
    order: 1;
    display: grid;
    grid-template-columns: 1fr;
    margin: 8px 22px 0;
  }
  .hv2-overlay .hv2-beat.hv2-beat--q .hv2-beat-door {
    display: block;
    padding: 15px 12px;
    background: var(--hv2-accent);
    border: 1px solid var(--hv2-accent);
    border-radius: 4px;
    font-family: "Oswald", sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: center;
    color: #fff;
    white-space: nowrap;
    transition: background 0.2s, border-color 0.2s;
  }
  .hv2-overlay .hv2-beat.hv2-beat--q .hv2-beat-door:hover,
  .hv2-overlay .hv2-beat.hv2-beat--q .hv2-beat-door:focus-visible {
    background: var(--hv2-accent-soft);
    border-color: var(--hv2-accent-soft);
    color: #fff;
  }
  /* The Q beat's words, group 2, on the page's 22px edge: the eyebrow
     carries the 20px the beat's box used to hold above the block. */
  .hv2-overlay .hv2-static-shot[src$="/q-surface-mount.webp"] { order: 2; }
  .hv2-overlay .hv2-beat.hv2-beat--q .hv2-eyebrow { order: 2; margin: 20px 22px 10px; }
  .hv2-overlay .hv2-beat.hv2-beat--q .hv2-beat-title { order: 2; margin: 0 22px; }
  .hv2-overlay .hv2-beat.hv2-beat--q .hv2-beat-points { order: 2; margin: 14px 22px 0; }
}