/* ===========================================================
   Home hero film (index.html; js/hero-film.js, js/home-scene.js).
   The coded film that plays across the hero tiles replaced the hero
   video: this file holds the viewer's layout: the film's full version drawn square at the viewer's size,
   its chapter copy beside it, and the chapter bar (a button per beat,
   with progress) along the bottom next to the pause/full-screen pill.
   Loaded after home.css; overrides it with scoped selectors.
   Motion: things snap into place (--hs-snap); transform/opacity only.
   =========================================================== */

/* The tiles' film draws on white (the old video poster is no longer used) */
.home-page .hs-mod-media{ background: #FFFFFF; }


/* ---------- Viewer ---------- */
.hs-viewer .hf-frame{
  background: var(--hs-bg); container-type: size;
  --vp-x: 4cqw; --vp-t: 5cqh; --vp-b: max(0.875rem, 3.4cqh); --ch-h: 3.375rem; --pill-w: 6.5rem;
}
/* The pill sits at the end of the chapter bar's row */
.hs-viewer .hf-frame .hero-video-controls{ right: var(--vp-x); bottom: var(--vp-b); box-shadow: 0 0.625rem 1.5rem rgba(17,18,26,.14); }
.hf-view{
  position:absolute; inset:0; display:flex; flex-direction:column; gap: 2.6cqh;
  padding: var(--vp-t) var(--vp-x) var(--vp-b);
}
.hf-view-main{ flex:1 1 auto; min-height:0; display:flex; align-items:center; gap: 5cqw; }
.hf-view-stage{ flex:none; width: min(calc(100cqh - var(--vp-t) - var(--vp-b) - var(--ch-h) - 2.6cqh), 52cqw); aspect-ratio:1; }
.hf-view-canvas{ display:block; width:100%; height:100%; border-radius: clamp(0.5rem, 1.4cqw, 1.125rem); box-shadow: 0 0 0 1px var(--hs-ink-06); }
.hf-view-copy{ flex:1 1 0; min-width:0; max-width: 34em; }
.hf-view-eyebrow{
  display:flex; align-items:center; gap:0.625rem; margin:0;
  font-size: clamp(0.6875rem, 1.8cqh, 1rem); font-weight:700; letter-spacing:.12em; text-transform:uppercase; color: var(--hs-ink-70);
}
.hf-view-eyebrow::before{ content:""; flex:none; width:0.5625rem; height:0.5625rem; border-radius:2px; background: var(--hs-accent); }
.hf-view-title{
  margin: clamp(0.5rem, 2cqh, 1rem) 0 0;
  font-size: clamp(1.375rem, 6cqh, 4.75rem); line-height:1.04; letter-spacing:-.025em; font-weight:600; color: var(--hs-head);
}
.hf-view-line{ margin: clamp(0.5rem, 1.8cqh, 0.875rem) 0 0; font-size: clamp(0.875rem, 2.4cqh, 1.625rem); line-height:1.4; color: var(--hs-ink-70); max-width: 28em; }
.hf-view-steps{ list-style:none; margin: clamp(0.75rem, 3cqh, 1.5rem) 0 0; padding:0; display:grid; gap: clamp(0.375rem, 1.4cqh, 0.75rem); }
.hf-view-steps:empty{ display:none; }
.hf-view-steps li{
  position:relative; padding-left:1.375rem;
  font-size: clamp(0.8125rem, 2.1cqh, 1.4375rem); line-height:1.35; font-weight:500; color: var(--hs-ink);
  opacity:.38; transition: opacity .35s var(--hs-ease);
}
.hf-view-steps li::before{
  content:""; position:absolute; left:0; top:.42em; width:0.5625rem; height:0.5625rem; border-radius:2px;
  box-shadow: inset 0 0 0 1.5px var(--hs-ink-45);
  transform: translate(0.1875rem,-0.3125rem) rotate(28deg); transition: transform .45s var(--hs-snap);
}
.hf-view-steps li.is-on{ opacity:1; }
.hf-view-steps li.is-on::before{ transform:none; box-shadow:none; background: var(--hs-ink); }
.hf-view-steps li.is-now::before{ background: var(--hs-accent); }
.hf-view-note{ margin: clamp(0.625rem, 2.4cqh, 1.25rem) 0 0; font-size: clamp(0.7813rem, 1.3cqh, 1rem); line-height:1.4; color: var(--hs-ink-45); }
.hf-view-note:empty{ display:none; }

/* ---------- Chapter bar: a button per beat; its track fills as it plays ---------- */
.hf-chapters{
  flex:none; height: var(--ch-h); margin-right: calc(var(--pill-w) + 3cqw);
  display:flex; align-items:stretch; gap: 0.375rem;
}
.hf-ch{
  position:relative; flex:1 1 0; min-width:0;
  display:flex; flex-direction:column; justify-content:center; gap:0.5625rem;
  padding: 0 1px; border:0; border-radius:0.375rem; background:none; font:inherit; text-align:left; cursor:pointer;
  color: var(--hs-ink); -webkit-tap-highlight-color: transparent;
  transition: transform .35s var(--hs-snap);
}
.hf-ch:active{ transform: scale(.97); transition-duration:.12s; }
.hf-ch:focus-visible{ outline:2px solid var(--hs-accent); outline-offset:0.1875rem; }
.hf-ch-track{ display:block; height:0.25rem; border-radius:0.25rem; background: var(--hs-ink-14); overflow:hidden; transform-origin: 50% 100%; transition: transform .35s var(--hs-snap); }
.hf-ch-track i{ display:block; height:100%; border-radius:inherit; background: var(--hs-ink); transform: scaleX(0); transform-origin:left; }
.hf-ch[aria-current] .hf-ch-track i{ background: var(--hs-accent); }
.hf-ch:hover .hf-ch-track{ transform: scaleY(1.5); }
.hf-ch-text{
  display:flex; align-items:center; gap:0.375rem; min-width:0;
  font-size: clamp(0.75rem, 1.2cqh, 1rem); font-weight:600; line-height:1.35; white-space:nowrap;
  opacity:.5; transition: opacity .3s var(--hs-ease);
}
.hf-ch:hover .hf-ch-text, .hf-ch[aria-current] .hf-ch-text{ opacity:1; }
.hf-ch-num{ flex:none; font-variant-numeric: tabular-nums; color: var(--hs-ink-45); }
/* Wide viewers show the labels; the number stays in the button's name */
@container (min-width: 1041px){
  .hf-ch-num{ position:absolute; width:1px; height:1px; overflow:hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space:nowrap; }
  .hf-ch-text{ gap:0.3125rem; }
}
.hf-ch-label{ min-width:0; overflow:hidden; text-overflow:ellipsis; }
/* The current chapter's marker snaps in beside its label */
.hf-ch-text::before{
  content:""; flex:none; width:0.4375rem; height:0.4375rem; border-radius:2px; background: var(--hs-accent);
  opacity:0; transform: translate(0.25rem,-0.3125rem) rotate(35deg) scale(.6);
  transition: transform .45s var(--hs-snap), opacity .2s ease;
}
.hf-ch[aria-current] .hf-ch-text::before{ opacity:1; transform:none; }

/* Narrower viewers: numbers only (the label stays the button's name) */
@container (max-width: 1040px){
  .hf-ch-label{ position:absolute; width:1px; height:1px; overflow:hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space:nowrap; }
  .hf-ch-text{ justify-content:center; gap:0.25rem; }
  .hf-ch-text::before{ display:none; }
  .hf-ch[aria-current] .hf-ch-num{ color: var(--hs-ink); }
}
@container (max-height: 520px){
  .hf-view-steps{ display:none; }
}

/* The pill's full-screen button is hidden where the browser can't do it */
.hero-video-controls [hidden]{ display:none !important; }

/* Portrait screens: the film on top, its copy below, then the chapters
   above the pill */
@media (max-aspect-ratio: 1/1){
  .hs-viewer .hf-frame{ width: min(100%, 38.75rem, calc((100svh - 2 * var(--pad)) * 3 / 5.6)); aspect-ratio: 3 / 5.6; --vp-x: 5cqw; --vp-t: 5cqw; --ch-h: 2.5rem; }
  .hs-viewer .hf-frame:fullscreen{ width:100vw; height:100vh; aspect-ratio:auto; }
  .hf-view{ gap: 4cqw; padding-bottom: calc(var(--vp-b) + 3.125rem); }
  .hf-view-main{ flex-direction:column; align-items:stretch; justify-content:flex-start; gap: 4.5cqw; }
  .hf-view-stage{ width: min(100%, 55cqh); align-self:center; }
  .hf-view-copy{ flex:1 1 auto; max-width:none; min-height:0; overflow:hidden; padding: 0 1cqw; }
  .hf-view-title{ font-size: clamp(1.375rem, 7cqw, 2.5rem); }
  .hf-view-line{ font-size: clamp(0.875rem, 3.9cqw, 1.125rem); }
  .hf-view-steps li{ font-size: clamp(0.8125rem, 3.7cqw, 1.0625rem); }
  .hf-chapters{ margin-right:0; gap:0.25rem; }
  .hf-ch{ gap:0.4375rem; }
}
@media (max-aspect-ratio: 1/1) and (max-height: 900px){
  .hf-view-steps{ display:none; }
}

@media (prefers-reduced-motion: reduce){
  .hf-view-steps li::before{ transform:none; transition:none; }
  .hf-ch, .hf-ch-track, .hf-ch-text::before{ transition:none; }
  .hf-ch:hover .hf-ch-track, .hf-ch:active{ transform:none; }
}