/* ==========================================================================
   Scroll-scrubbed video hero.
   Scroll distance is allocated in proportion to each clip's frame count, so
   the scrub speed stays constant across the seams between clips.
   ========================================================================== */

.sh{position:relative}
.sh__stage{
  position:sticky;top:0;height:100svh;overflow:hidden;background:#0F1518;
  display:flex;align-items:flex-end;
}
.sh__media{position:absolute;inset:0}
.sh__media img,.sh__media video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.sh__media video{opacity:0}
.sh__media video.is-live{opacity:1}
.sh__poster{z-index:1;transition:opacity .7s var(--ease)}
.sh.is-ready .sh__poster{opacity:0}
/* ...unless the video failed, in which case the poster is all there is.
   is-static sets is-ready too, and without this the hero faded the poster out
   and left an empty frame. */
.sh.is-static .sh__poster{opacity:1}
.sh__media video{z-index:2}
.sh__scrim{position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(180deg,rgba(15,21,24,.42) 0,rgba(15,21,24,.05) 38%,
    rgba(15,21,24,.16) 62%,rgba(15,21,24,.72) 100%)}

.sh__in{position:relative;z-index:4;width:100%;color:#fff;
  padding-bottom:clamp(46px,7vw,96px)}
/* ---------- lockup ---------------------------------------------------------
   Dead centre of the frame, vertically and horizontally, over the video. It
   holds the screen alone at rest and clears out as the first copy beat comes
   up bottom left — the two never share the frame. */
.sh__lock{
  position:absolute;inset:0;z-index:4;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;color:#fff;pointer-events:none;
  padding:0 var(--gut);
  transition:opacity .6s var(--ease),transform .6s var(--ease);
}
.sh__lock b{display:block;font-size:clamp(23px,3.1vw,38px);font-weight:600;
  letter-spacing:.42em;text-indent:.42em;text-transform:uppercase}
.sh__lock span{display:block;margin-top:17px;font-size:clamp(11.5px,1.2vw,13px);
  font-weight:500;letter-spacing:.34em;text-indent:.34em;text-transform:uppercase;opacity:.72}
.sh.is-past .sh__lock{opacity:0;transform:translateY(-14px)}

/* copy beats */
.sh__beats{position:relative;min-height:clamp(150px,20vh,230px)}
.sh__beat{
  position:absolute;left:0;bottom:0;max-width:19ch;
  opacity:0;transform:translateY(18px);
  transition:opacity .75s var(--ease),transform .75s var(--ease);
}
.sh__beat.is-live{opacity:1;transform:none}
.sh__beat p{margin:0;font-size:clamp(26px,3.9vw,54px);font-weight:300;
  line-height:1.06;letter-spacing:-.035em}
.sh__beat small{display:block;margin-top:18px;font-size:13px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;opacity:.66;max-width:none}

.sh__cta{margin-top:clamp(26px,3vw,42px);display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.sh__cta .btn{background:#fff;color:#0F1518;border-color:#fff}
.sh__cta .btn:hover{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}

/* progress hairline */
.sh__prog{position:absolute;left:0;bottom:0;height:2px;width:100%;z-index:5;
  background:rgba(255,255,255,.16)}
.sh__prog i{display:block;height:100%;width:0;background:#fff;transition:width .1s linear}

/* loading gate */
.sh__load{position:absolute;inset:0;z-index:6;display:grid;place-items:center;
  background:#0F1518;transition:opacity .6s var(--ease)}
.sh.is-ready .sh__load{opacity:0;pointer-events:none}
/* Waiting on iOS's first gesture is not loading — drop the label and let the
   poster and lockup stand as the hero until the video can take over. */
.sh.is-primed .sh__load{opacity:0;pointer-events:none}
.sh__load span{font-size:11px;letter-spacing:.28em;text-transform:uppercase;
  color:rgba(255,255,255,.5)}

.sh__hint{position:absolute;right:var(--gut);bottom:clamp(46px,7vw,96px);z-index:4;
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.55);
  writing-mode:vertical-rl;transition:opacity .5s var(--ease)}
.sh.is-past .sh__hint{opacity:0}

/* if the clips are missing, the hero collapses to a single poster frame */
.sh.is-static{height:auto !important}
.sh.is-static .sh__stage{position:relative}
.sh.is-static .sh__prog,.sh.is-static .sh__hint{display:none}
.sh.is-static .sh__beat:first-child{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .sh__beat{transition:none}
}