/* ============================================================
   HERO — full-viewport film with scrim
   ============================================================ */

/* ------------------------------------------------------------
   PARALLAX OVERSIZE — the one piece of maths in this file

   The film lags the page by --hero-parallax (0.25) of the scroll
   distance, moving DOWN while the page moves up. That means the media
   layer has to be bigger than the hero box, or the top of the box
   empties out as the hero leaves.

   Deriving it: with hero height H, factor f and scroll s in [0,H], the
   media occupies [top + f*s, top + f*s + height]. To cover [0,H] at
   every s:
     at s=H  ->  top + f*H <= 0        ->  top    = -f*H  = -25%
     at s=0  ->  top + height >= H     ->  height = (1+f)H = 125%
   So the box is 125% tall, pulled up 25%. Those two numbers and the
   0.25 in hero-parallax.js are the same number three times; changing
   one alone leaves a visible strip at the top of a departing hero.

   This oversize is also why the film was re-encoded at 1080p — see the
   note in template-parts/home/hero.php.
   ------------------------------------------------------------ */
.hero{
  --hero-parallax:.25;
  position:relative;min-height:100svh;display:flex;flex-direction:column;
  justify-content:flex-end;overflow:hidden;
  /* the film lags, so the box behind it must never be the page white */
  background:var(--grey-d);
}
.hero-media{
  position:absolute;left:0;right:0;
  top:calc(var(--hero-parallax) * -100%);
  height:calc(100% + var(--hero-parallax) * 100%);
  z-index:0;will-change:transform;
}
.hero-video{width:100%;height:100%;object-fit:cover;object-position:center 40%}
.hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(21,22,22,.78) 0%,rgba(21,22,22,.2) 36%,rgba(21,22,22,.96) 90%)}

/* BREATHABLE. The comp packed the copy against the bottom edge with
   clamp(2.2rem,6vh,4rem) beneath it. The client's reference gives its
   headline roughly a fifth of the viewport as clear space below, which is
   most of what "breathable" is describing — the type is not fighting the
   fold for room. margin-top:auto keeps it bottom-anchored inside the
   flex column while the padding opens the space up. */
.hero-in{
  position:relative;z-index:2;width:100%;margin-top:auto;
  padding-top:calc(var(--navh) + 2rem);
  padding-bottom:clamp(4rem,13vh,8.5rem);
  will-change:transform,opacity;
}
.hero h1{max-width:13ch}
.hero h1 i{font-style:normal;color:var(--orange)}
.hero .lede{max-width:40ch;margin:1.5rem 0 0}

/* ---------- scroll cue ----------
   A thin rule that travels down its own track. Not a chevron and not a
   mouse glyph: the design has no icon set, and a 1px rule in --paper is
   already its vocabulary. Sits clear of .hero-in's padding. */
.hero-cue{
  position:absolute;left:50%;bottom:clamp(1.1rem,3vh,2rem);z-index:2;
  width:1px;height:clamp(34px,5vh,54px);margin-left:-.5px;
  background:rgba(247,247,243,.22);overflow:hidden;
  transition:opacity .45s ease;
}
.hero-cue span{
  position:absolute;left:0;right:0;top:0;height:42%;
  background:var(--paper);
  animation:hero-cue 2.4s cubic-bezier(.7,0,.3,1) infinite;
}
@keyframes hero-cue{
  0%{transform:translateY(-100%)}
  60%,100%{transform:translateY(240%)}
}

@media(max-width:640px){
  .hero h1{max-width:100%}
  /* Mobile browsers swap 100svh for 100vh as the chrome collapses, which
     moves the hero's height mid-scroll. A smaller factor keeps the film
     from visibly jumping when that happens. */
  .hero{--hero-parallax:.16}
  .hero-in{padding-bottom:clamp(3rem,10vh,5.5rem)}
}

/* ---------- motion safety ----------
   hero-parallax.js attaches nothing at all under this preference, so the
   hero has to be correct with no inline transform ever written. It is:
   the oversize is symmetrical enough that the untransformed media still
   covers the box, and the cue stops travelling. */
@media (prefers-reduced-motion:reduce){
  .hero-media{transform:none !important}
  .hero-in{transform:none !important;opacity:1 !important}
  .hero-cue span{animation:none;top:29%}
}

/* ---------- hero pause control (WCAG 2.2.2) — KNOWN GAP ----------
   The pause control was removed at client request. WCAG 2.2.2 (Level A)
   asks for a pause mechanism for autoplaying motion over 5s, and the
   film is a 12.4s loop behind text. Without the button the film still
   stops for anyone who has requested reduced motion (handled in
   assets/js/hero-video.js), but this is a documented gap, not an
   oversight. Flag it before touching the hero.

   The comp left behind a dangling `.hero:hover` selector with no
   declaration block and an empty `@media(max-width:640px){}` where the
   control's styles used to be. CSS error recovery swallowed both as one
   invalid rule so nothing downstream was lost, but it is dead and is not
   carried forward. Restoring the control means adding real rules here. */