/* ============================================================
   HOME V2 — THE HERO (Hamza, 2026-09-12). The scroll film's slot at the top
   of the homepage, held by ONE still: the SynQ family in the "Spotlight
   Noir" look he picked from the ten cinematic looks (black under the dark
   theme; its white twin under the light theme — Theme::media() answers the
   twin per file from /images/concepts/home-hero/light/). Rendered by
   //site/_home_v2_hero.php. The film itself plays on, whole, at
   /concepts/scroll-film, with every sheet it always had.

   One viewport, no runway, nothing pinned, no engine work: the picture
   covers the panel, the fold's identity block (fold.css) stands centred in
   the void the spotlight leaves above the family, the proof capsule keeps
   its place at the foot. Below 861px, and on any window squarer than 3:2
   (a tablet held upright would crop the SynQ-R and the SynQ-H off the
   sides), the picture is a 16:9 band under the words — same markup,
   stacked. Light-theme rules live in theme-light/parts/70-home-live.css.
   ============================================================ */

.hv2-hero {
  position: relative;
  height: calc(100vh - var(--hv2-header-h));
  min-height: 520px;
  max-height: 1100px;
  overflow: hidden;
  background: #000;
}
.hv2-hero-img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 16:9 art on a wider panel loses a band top and bottom: keep the void
     above the family (the words stand in it) and give up the floor first.
     At 1280x640 the SynQ-S's crown sits 227px down and the block ends near
     200; the SynQ-H's crown is at x 928+, the centred words end near 865. */
  object-position: 50% 40%;
}
/* THE WORDS. fold.css seats the identity block at left 40 / top 22 for the
   film's frame, where the family stood to the right of it; here the family
   spans the whole width and the spotlight's void is above it, so the block
   stands centred in that void. Two classes beat fold.css's one at every
   width, and the phone block below keeps winning by source order. */
.hv2-hero .hv2-identity {
  position: absolute;
  left: 50%;
  top: 7%;
  transform: translateX(-50%);
  display: block;
  width: min(92%, 760px);
  max-width: none;
  text-align: center;
  z-index: 2;
}
.hv2-hero .hv2-identity .hv2-cta-row { justify-content: center; }
.hv2-hero .hv2-headline { text-shadow: 0 2px 30px rgba(0, 0, 0, 0.9); }
/* THE CAPSULE'S SEAT (Hamza, 2026-09-12: "lower this a little away from the
   controller, about halfway between the controller base and the fold").
   fold.css seats it 76px off the fold, which put it on the SynQ-S's
   reflection. The family's base moves with the cover-fit, so the seat is
   computed, not fixed: the picture is 16:9 at the panel's width (56.25vw
   tall), object-position 40% cuts 0.4 of the overflow off the top, and
   the SynQ-S rests on the floor at 72% of the picture's height - so the
   base sits 18vw + 40vh - 32px below the panel's top and the room under
   it is 60vh - 18vw - 48px. Half of that, less half the capsule (~32px),
   is the bottom offset: 47px at 1280x720, 97px at 1920x1080, 150px at
   2560x1440. Clamped so a short window never pushes it under the fold. */
.hv2-hero .hv2-proof { z-index: 3; bottom: clamp(20px, calc(30vh - 9vw - 54px), 160px); }

/* ---- stacked: phones and square windows ------------------------------ */
@media (max-width: 860px), (max-aspect-ratio: 3/2) {
  .hv2-hero {
    height: auto;
    min-height: 0;
    max-height: none;
    display: flex;
    flex-direction: column;
    padding: 26px 0 24px;
  }
  .hv2-hero-img {
    position: relative;
    inset: auto;
    order: 2;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-position: 50% 50%;
  }
  .hv2-hero .hv2-identity {
    position: static;
    transform: none;
    order: 1;
    display: block;
    width: auto;
    margin: 0 22px 16px;
    text-align: left;
  }
  .hv2-hero .hv2-identity .hv2-cta-row { justify-content: flex-start; margin: 16px 0 0; }
  .hv2-hero .hv2-proof {
    position: static;
    transform: none;
    order: 3;
    width: auto;
    margin: 18px 16px 0;
  }
}