/* ============================================================
   v3-hero.css — Red Banana v3 "THE OBJECT", HERO LANE.
   Contract: redesign-2026/RB-V3-DIRECTION-CONTRACT.md §3.1/§3.2.

   OWNS: the stacking of the hero canvas over its poster fallback,
   and nothing about [data-slot="hero"]'s own layout, type or copy —
   that box belongs to v3.css (INTEGRATOR). Every selector below is
   scoped to the v3-hero-* class names this lane defines; paste the
   matching markup from parts/WIRING.md, do not invent new class
   names against this file.

   Scripts-off / pre-load state, by construction rather than by rule:
   a bare <canvas> with no JS painting it is a transparent replaced
   element, so .v3-hero-poster underneath is visible through it with
   no extra CSS. Once v3-hero.js runs, its first renderer.render()
   call paints the canvas opaque and it naturally covers the poster —
   no opacity transition or JS-toggled class needed for that hand-off.
   ============================================================ */

.v3-hero-stage {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* DEFECT 2 fix, 24 Sep (Bob's screenshot measurement: a visibly
     lighter band, hard top/bottom edges, y~300-785px at 1440x900).
     Root cause: this was pure #000 while the page's real ground colour
     is v3.css's --ground:#080808 (v3.css:54, also body's own
     background, v3.css:124) — wherever the WebGL canvas doesn't fully
     opaque-paint over this box (edges, any low-alpha region), the old
     #000 showed through against the surrounding #080808 page as a
     visible seam with hard edges at this box's own top:33.333%/
     bottom:112px bounds (v3.css's ".hero .v3-hero-stage", desktop —
     that rule only sets position/size, never background, so this
     file's background is the one actually in effect; confirmed by
     reading it in full, no competing background rule exists there or
     on ".is-engineering-live").
     var(--ground) over a bare "transparent": this same class also
     renders in the ORDINARY (non-pinned) hero, where the ancestor
     chain (.hero .inner -> .hero .v3-section -> body) carries no
     background of its own except body's var(--ground) — so
     transparent would work there too, BUT during the pinned
     #engineering walk-around this box is position:fixed
     (.is-engineering-live, v3.css "2. engineering"), painting on top
     of whatever #engineering's own section background is; that
     section was not confirmed byte-identical to body's ground at
     every point this box can appear, so relying on transparency to
     inherit the right colour through two different ancestor chains
     (hero's own vs. engineering's fixed overlay) is the less robust
     of the two options. An explicit, exact colour match removes that
     dependency entirely regardless of which context paints behind it.
     var(--ground) is used directly rather than hardcoded: v3.css
     (which defines --ground on :root) is always loaded before this
     stylesheet on the only page that includes it (index.html, checked
     — no other page links assets/css/v3-hero.css), so the token
     resolves correctly and stays in sync if the ground colour is ever
     retuned; the literal #080808 fallback after the comma is only a
     defensive belt-and-suspenders match for v3.css's own value, in
     case this file is ever reused on a page that doesn't load v3.css. */
  background: var(--ground, #080808);
}

.v3-hero-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 1;
  /* Never hidden by attribute or display:none — this is the
     scripts-off and pre-resolve fallback, contract §3.2. */
}

.v3-hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 2;
  background: transparent;
  /* Vertical page scroll must always reach the browser, even on a
     touch drag that starts over the canvas (web-motion floor #4: no
     scroll hijack). v3-hero.js only ever adds passive touchmove
     listeners for the spin nudge; this is the declarative half of
     that same promise. */
  touch-action: pan-y;
}