/* 00 THE CINE — hero.
   22s of source across three clips, extracted to 367 WebP frames
   (assets/cine/01 then assets/cine/02, one continuous sequence) and
   scrubbed frame-by-frame by scroll position on a single canvas — no video
   element, no autoplay, no crossfade. Scroll position is the only thing
   that ever picks a frame. See hero-scroll.js's header for why the frames
   were re-extracted from the original clips.

   Pin mechanic matches the rest of the deck: .cine is fixed full-viewport,
   .cine__spacer (height set by JS, from the same frame-count config the
   loader uses) reserves the scroll distance a fixed element can't, and
   .is-gone hides the layer once the sequence's own scroll span ends so the
   next scene can take over. */

.cine {
  position: fixed; inset: 0; height: 100svh; z-index: 2;
  background: #0B2E2A;
  overflow: hidden;
}
.cine.is-gone { visibility: hidden; }

.cine__canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}

/* ============ GRADE ============
   Stands in for the old boxed scrim. A colourist darkens the frame under a
   title rather than dropping a card behind it — this is that, as CSS: one
   soft radial fall-off weighted to where the copy sits, plus a whisper of
   top-to-bottom grade for the whole frame. No edge is ever visible because
   there is no edge, only a gradient, so it never reads as a UI element. */
.cine__grade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(60% 78% at 18% 90%, rgb(5 9 10 / .82) 0%, rgb(5 9 10 / .48) 40%, transparent 74%),
    linear-gradient(to top, rgb(5 9 10 / .32) 0%, transparent 34%);
}

/* ============ COPY ============
   A lower third, not a hero card — the caption convention from Easton's
   own trade (broadcast/film) rather than a marketing banner. Legibility
   comes from .cine__grade above plus text-shadow below, never from a box:
   there is nothing here with its own background. Sits under the loading
   screen (z-index below it) so both reveal together once frames are ready. */

/* The positioned box: the constrained-width copy block stacks inside it in
   normal flow, so its height can never collide with anything else
   regardless of which of the three differently-long rotating slides is
   showing. Used to also hold a value-props trust bar as a flex sibling
   here — removed (see the audit note in deck.html) since a hero fold with
   an eyebrow, headline, subhead, CTA *and* a fourth trust block was
   crowding the one thing a hero needs to do; the About section right
   after already carries the real version of that trust signal. */
.cine__lower {
  position: absolute; z-index: 2; inset: auto 0 0 0;
  padding: clamp(20px, 5svh, 64px) var(--pad) clamp(20px, 4svh, 40px);
  display: flex; flex-direction: column; gap: clamp(14px, 2.4svh, 26px);
}

.cine__copy {
  display: grid; gap: clamp(14px, 1.8svh, 20px); justify-items: start;
  max-width: min(760px, 92vw);
  animation: cine-copy-in .9s .3s var(--ease) both;
}
@keyframes cine-copy-in {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to   { opacity: 1; transform: none; }
}

/* The one accent element, reused from how .pillar__in and .signoff already
   mark a block of copy elsewhere in the deck — a bar, not a fill. */
.cine__copy-text {
  min-height: clamp(160px, 25svh, 230px);
  border-left: 3px solid var(--accent);
  padding-left: clamp(14px, 2vw, 22px);
}
.cine__copy-text.is-swapping { animation: cine-copy-swap .4s var(--ease); }
@keyframes cine-copy-swap {
  0%   { opacity: 0; transform: translate3d(0, 6px, 0); }
  100% { opacity: 1; transform: none; }
}

.cine__kicker {
  font-family: var(--mono); font-size: clamp(9px, 1.1vmin, 11px);
  letter-spacing: .18em; text-transform: uppercase;
  color: rgb(255 255 255 / .58);
  text-shadow: 0 1px 4px rgb(0 0 0 / .6);
  margin-bottom: 2px;
}
.cine__kicker b { color: var(--accent); font-weight: 500; }

.cine__title {
  font-family: var(--display); font-weight: 800;
  font-variation-settings: "wdth" 112;
  font-size: clamp(1.6rem, 4.7vmin, 3.1rem); line-height: 1.06;
  letter-spacing: -.025em; color: var(--print); text-wrap: balance;
  text-shadow: 0 2px 18px rgb(0 0 0 / .55), 0 1px 3px rgb(0 0 0 / .85);
}
.cine__title span { color: var(--accent); }

.cine__say {
  max-width: 58ch;
  font-size: clamp(13px, 1.6vmin, 16px); line-height: 1.55;
  color: rgb(255 255 255 / .88);
  text-shadow: 0 1px 8px rgb(0 0 0 / .55), 0 1px 2px rgb(0 0 0 / .8);
}

/* Glass, not a solid pill — the CTA is still clearly a control (a glass
   bar plus a solid circular icon, matching the arrow-button convention
   used for every other CTA in the deck) without dropping a flat block
   onto the frame. */
.cine__cta {
  margin-top: 6px;
  display: inline-flex; align-items: center; gap: 14px;
  padding: 6px 6px 6px 22px;
  font-family: var(--mono); font-size: clamp(9px, 1.1vmin, 11px);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--print);
  background: rgb(5 9 10 / .3);
  backdrop-filter: blur(6px);
  border: 1px solid rgb(255 255 255 / .55);
  border-radius: 40px; text-decoration: none;
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.cine__cta i {
  display: grid; place-items: center; flex: none;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--accent); color: var(--ink);
  transition: transform .2s var(--ease);
}
.cine__cta i svg { width: 46%; height: 46%; }
@media (hover: hover) and (pointer: fine) {
  .cine__cta:hover { border-color: var(--accent); transform: translateY(-2px); }
  .cine__cta:hover i { transform: translateX(3px); }
}
.cine__cta:active { border-color: var(--accent); transform: translateY(0); }
.cine__cta:active i { transform: translateX(2px); }

@media (max-width: 720px) {
  /* Same lower-third can't hold the kicker, headline, subhead and CTA at
     comfortable size on a phone screen at once — the subhead is what gives
     first, since the headline and kicker carry the actual message. */
  .cine__say { display: none; }

  /* The three rotating titles each carry a hard <br> splitting them into two
     authored lines. That break is sized for a desktop measure: at 375px each
     half is ~373px of text in ~326px of space, so both halves wrap anyway
     and the <br> turns a 2-line headline into a ragged 4-line one. Dropping
     it hands the line breaking back to text-wrap: balance, which can see the
     real measure. The <br> stays in the markup because it is doing real work
     at desktop width — this only overrides where it stops helping. */
  .cine__title br { display: none; }

  /* Slightly smaller floor and tighter leading now that the copy wraps on
     its own: 1.6rem was set when the <br> guaranteed short lines. */
  .cine__title {
    font-size: clamp(1.35rem, 6.4vw, 2rem);
    line-height: 1.12;
  }

  /* min-height still has a job — the three slides differ by about a line, and
     without a floor the CTA below would hop every time the copy swaps. But
     25svh (~203px on a phone) was reserving far more than the ~95px the copy
     now measures, stranding the CTA under a gap. Re-floored to just above the
     tallest of the three so it still absorbs the swap without the dead
     space. */
  .cine__copy-text { min-height: 118px; }
}

/* ============ LOADING ============ */

.cine__loading {
  position: absolute; inset: 0; z-index: 3;
  display: grid; place-items: center; gap: 14px;
  background: #0B2E2A;
  opacity: 1;
  transition: opacity .5s var(--ease);
}
.cine__loading.is-ready { opacity: 0; pointer-events: none; }

.cine__loading-label {
  font-family: var(--mono); font-size: clamp(9px, 1.2vmin, 11px);
  letter-spacing: .18em; text-transform: uppercase;
  color: rgb(255 255 255 / .6);
}
.cine__loading-bar {
  width: min(220px, 40vw); height: 2px;
  background: rgb(255 255 255 / .16);
}
.cine__loading-bar i {
  display: block; height: 100%; width: 0%;
  background: var(--accent);
  transition: width .15s linear;
}
.cine__loading-pct {
  font-family: var(--mono); font-size: clamp(9px, 1.2vmin, 11px);
  letter-spacing: .1em;
  color: rgb(255 255 255 / .4);
  font-variant-numeric: tabular-nums;
}

/* ============ REDUCED MOTION ============
   No frame-by-frame scrub. Hold the final frame, already resolved, as a
   plain static image — nothing here depends on scroll to be readable. */

@media (prefers-reduced-motion: reduce) {
  .cine { position: static; height: 70svh; }
  .cine__spacer { display: none; }
  .cine__grade { display: none; }
  .cine__lower {
    position: static;
    padding: clamp(20px, 5svh, 64px) var(--pad);
  }
  .cine__copy { animation: none; opacity: 1; transform: none; }
  .cine__copy-text { animation: none !important; }
}