/* Tyll: the cover.
   Round 7: one screen, one looping film. The 360vh pin, the scroll-driven
   currentTime, the zoom and the navy handover have all been removed; what is
   left is a section the height of the viewport with a video in it. */

.cover{
  height:100vh;height:100svh;
  padding:0;
  position:relative;
}

.cover-stage{
  position:relative;
  height:100vh;height:100svh;
  overflow:hidden;
  /* a neutral near-black while the poster loads, not the old navy */
  background:#0C0C0D;
}

.cover-vid{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:50% 48%;
}

/* ROUND 7: the blue is gone.
   The old scrim was four navy gradients washing 80% of the frame, which is
   what read as a blue tint over the whole hero. What is left is a single
   NEUTRAL black gradient, low opacity, sitting only under the words on the
   left. The right half of the frame, which is the half you actually watch,
   is now completely untouched footage. */
.cover-scrim{
  position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(to right,
    rgb(0 0 0 / .62) 0%,
    rgb(0 0 0 / .50) 34%,
    rgb(0 0 0 / .24) 58%,
    rgb(0 0 0 / 0) 76%);
}

/* Below 760px the copy runs the full width, so the wash has to come from the
   foot instead of the left edge. Still neutral, still only under the words. */
@media (max-width:760px){
  .cover-scrim{
    background:linear-gradient(to top,
      rgb(0 0 0 / .72) 0%,
      rgb(0 0 0 / .58) 38%,
      rgb(0 0 0 / .30) 70%,
      rgb(0 0 0 / .18) 100%);
  }
}

/* reduced motion: the poster still, never the moving footage */
@media (prefers-reduced-motion: reduce){
  .cover-vid{display:none}
  .cover-stage{
    background-image:url('video/hero-loop-poster.webp');
    background-size:cover;background-position:50% 48%;
  }
}

.cover-content{
  position:absolute;inset:0;z-index:4;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;
  /* aligned to the same left gutter as the logo; the right 55% stays film.
     The headline starts at 40% of the viewport — measured from the top rather
     than centred, so it lands in the same place whatever the copy length. */
  padding:40vh var(--gut) 0;
  /* Real widths, not ch: `ch` resolves against this block's 16px font, not
     the headline's, and silently clamped the column to 52%.
     "That extra hour, gone." is 9.514em wide, so the column has to hold
     9.514 x the font size or the specified two-line break turns into three. */
  width:min(62%, 1100px);
  opacity:var(--content,1);
  transform:translateY(var(--lift,0));
  will-change:opacity,transform;
}
/* on a short window 40vh would push the button off the foot, so the block
   re-centres instead of overflowing */
@media (max-height:760px){
  .cover-content{justify-content:center;padding-top:0;padding-bottom:0}
}
@media (max-width:1100px){ .cover-content{width:min(78%,780px)} }
@media (max-width:760px){ .cover-content{width:100%} }

.cover-content h1{
  font-family:var(--sans);
  font-size:var(--fs-display);
  font-weight:400;                /* large, not heavy */
  line-height:1.05;
  letter-spacing:-.02em;
  color:var(--paper);
  margin:0;
}
/* One short sentence, held to a tight measure under the headline. At 46ch it
   ran four lines across most of the frame and read as a paragraph competing
   with the headline rather than supporting it. */
.cover-lede{
  margin:var(--sp-5) 0 0;
  max-width:34ch;
  font-size:var(--fs-body);
  line-height:1.6;
  color:rgb(255 255 255 / .94);
}
.cover-content .btn-primary{
  margin-top:var(--sp-4);
  background:var(--accent);color:var(--paper);border-color:var(--accent);
}
.cover-content .btn-primary:hover{
  background:var(--accent-hover);border-color:var(--accent-hover);color:var(--paper);
}

/* the counterweight in the bottom-right corner: it balances all the
   left-aligned weight, and it leaves with the rest of the hero's content */
.cover-mark{
  position:absolute;right:var(--gut);bottom:clamp(30px,6vh,58px);z-index:4;
  display:flex;flex-direction:column;align-items:flex-start;gap:.85rem;
  opacity:var(--content,1);
}
.cover-mark i{display:block;width:280px;max-width:32vw;height:1px;background:rgb(255 255 255 / .34)}
.cover-mark span{
  font-family:var(--sans);font-size:.6875rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:rgb(255 255 255 / .70);
}
@media (max-width:760px){ .cover-mark{display:none} }


/* ---------- the cover on a phone ----------
   No pin on any viewport now: the hero is one screen with a looping film in
   it, and the copy sits at the foot so the footage owns the top of the frame
   rather than being a strip behind a headline. */
@media (max-width:1023px), (pointer:coarse){
  .cover-content{
    position:absolute;inset:auto 0 0 0;width:auto;max-width:none;
    transform:none;opacity:1;justify-content:flex-end;
    padding:0 var(--gut) calc(clamp(28px,6vh,56px) + env(safe-area-inset-bottom));
  }
  .cover-mark{display:none}
  .cover-content h1{font-size:clamp(2.25rem,9vw,2.75rem)}   /* 36-44px */
}

/* cover.css loads after site.css, so site.css's mobile body-copy floor loses on
   source order here. The hero lede is body copy and holds 16px on a phone. */
@media (max-width:1023px), (pointer:coarse){
  .cover-lede{font-size:1rem;line-height:1.55}
}