/**
 * HAVEN Child — cinematic Hero.
 *
 * Everything resolves to existing HAVEN tokens; no new colour, font or radius.
 *
 * The stage is pinned inside a tall track. The three video layers are stacked
 * and crossfaded by the scroll driver; the copy sits above them on a scrim that
 * is bounded to the text block rather than veiling the whole frame — a lesson
 * carried from the previous hero, where a full-stage veil washed the artwork
 * out to a ghost.
 */

.hvn-cine {
  --cine-track: 640vh;
  position: relative;
  background: var(--hvn-primary-deep);
  color: var(--hvn-text-invert);
}

.hvn-cine__track { height: var(--cine-track); }

.hvn-cine__pin {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 34rem;
  overflow: hidden;
  display: grid;
  grid-template-areas: "stage";
  isolation: isolate;
}

.hvn-cine__stage,
.hvn-cine__copy { grid-area: stage; }

/* ------------------------------------------------------------------ media */

.hvn-cine__stage { position: relative; overflow: hidden; }

.hvn-cine__layer {
  position: absolute;
  inset: 0;
  will-change: opacity;
}

.hvn-cine__poster,
.hvn-cine__vid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* The poster sits under its own video and is revealed only while that video
   has nothing decoded yet, so a seek never exposes a blank frame. */
.hvn-cine__vid { opacity: 0; transition: opacity 240ms linear; }
.hvn-cine__layer.is-ready .hvn-cine__vid { opacity: 1; }

/* A very slight bottom-weighted scrim keeps the copy legible over bright
   footage without dulling the image. */
.hvn-cine__veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to top, rgba(24, 42, 63, .78) 0%, rgba(24, 42, 63, .34) 34%, rgba(24, 42, 63, 0) 62%),
    linear-gradient(to right, rgba(24, 42, 63, .55) 0%, rgba(24, 42, 63, 0) 52%);
}

/* ------------------------------------------------------------------- copy */

.hvn-cine__copy {
  position: relative;
  z-index: 2;
  display: grid;
  align-content: end;
  padding: var(--hvn-s6) var(--hvn-s5) var(--hvn-s8);
  max-width: var(--hvn-wrap);
  width: 100%;
  margin-inline: auto;
  pointer-events: none;
}

.hvn-cine__copy a { pointer-events: auto; }

.hvn-cine__intro,
.hvn-cine__end {
  grid-area: 1 / 1;
  max-width: 44ch;
  transition: opacity 320ms ease, transform 320ms ease;
  /* A backdrop bounded to the copy block, not a veil over the whole stage.
     The bright mid-sequence footage otherwise leaves white text on a busy
     light ground; a full-stage veil would fix that but wash the cinema out,
     which is the mistake the previous hero made. */
  padding: var(--hvn-s5);
  border-radius: var(--hvn-radius-lg);
  background: linear-gradient(105deg, rgba(24,42,63,.80) 0%, rgba(24,42,63,.66) 58%, rgba(24,42,63,0) 100%);
}

/* The backdrop bleeds left of the text column only where the viewport has the
   room; at narrow widths the negative margin pushed the page canvas wider than
   the screen. */
@media (min-width: 900px) {
  .hvn-cine__intro,
  .hvn-cine__end { margin-left: calc(var(--hvn-s5) * -1); }
}

.hvn-cine__end { opacity: 0; transform: translateY(12px); pointer-events: none; }
.hvn-cine__end.is-on { opacity: 1; transform: none; pointer-events: auto; }
.hvn-cine__intro.is-off { opacity: 0; transform: translateY(-10px); pointer-events: none; }

.hvn-cine h1 {
  color: var(--hvn-text-invert);
  font-size: var(--hvn-fs-h1);
  line-height: var(--hvn-lh-heading);
  letter-spacing: var(--hvn-tr-display);
  font-weight: 600;
  margin: 0 0 var(--hvn-s4);
  text-wrap: balance;
}

.hvn-cine .hvn-eyebrow { color: var(--hvn-text-invert-soft); }

.hvn-cine__lede,
.hvn-cine__endline {
  color: var(--hvn-text-invert-soft);
  font-size: var(--hvn-fs-lede);
  line-height: 1.55;
  margin: 0 0 var(--hvn-s5);
}

.hvn-cine__endline { color: var(--hvn-text-invert); }

/* --------------------------------------------------------------- captions */

.hvn-cine__beats {
  grid-area: 1 / 1;
  list-style: none;
  margin: 0;
  padding: 0;
  align-self: end;
  justify-self: end;
  max-width: 30ch;
  text-align: right;
}

.hvn-cine__beats li {
  position: absolute;
  right: 0;
  bottom: 0;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 280ms ease, transform 280ms ease;
}

.hvn-cine__beats li.is-on { opacity: 1; transform: none; }

.hvn-cine__k {
  display: block;
  font-size: var(--hvn-fs-label);
  letter-spacing: var(--hvn-tr-label);
  text-transform: uppercase;
  color: var(--hvn-tan);
  margin-bottom: var(--hvn-s2);
}

.hvn-cine__t {
  display: block;
  color: var(--hvn-text-invert);
  font-size: var(--hvn-fs-body);
  line-height: 1.45;
}

/* ------------------------------------------------------------ scroll cue */

.hvn-cine__cue {
  position: absolute;
  left: 50%;
  bottom: var(--hvn-s5);
  translate: -50% 0;
  z-index: 3;
  width: 1px;
  height: 2.25rem;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.85) 55%, rgba(255,255,255,0) 100%);
  transition: opacity 300ms ease;
}

.hvn-cine__cue.is-off { opacity: 0; }

/* ------------------------------------------------------------- responsive */

@media (max-width: 899px) {
  /* The captions move under the copy instead of opposite it.
     The track was 460vh here and 380vh below 560px, which measured out at
     roughly three thumb-swipes for the ENTIRE journey — each swipe advanced the
     narrative by a third, so none of the three transformations had enough
     scroll distance to be perceived. Lengthened so the beats read; still well
     short of the desktop track. */
  .hvn-cine { --cine-track: 560vh; }
  .hvn-cine__copy { padding: var(--hvn-s5) var(--hvn-s4) var(--hvn-s7); }
  .hvn-cine__intro, .hvn-cine__end { max-width: none; }
  .hvn-cine__beats { justify-self: start; text-align: left; max-width: 34ch; }
  .hvn-cine__beats li { right: auto; left: 0; }
  .hvn-cine__veil {
    background: linear-gradient(to top, rgba(24,42,63,.86) 0%, rgba(24,42,63,.45) 42%, rgba(24,42,63,.06) 74%);
  }
  .hvn-cine .hvn-actions { flex-wrap: wrap; }
}

@media (max-width: 560px) {
  .hvn-cine { --cine-track: 520vh; }
  .hvn-cine__lede { display: none; }   /* the H1 and CTA carry the first viewport */
}

/* --------------------------------------------------------- reduced motion */

/*
 * No pinning, no scrubbing, no autoplay. The Hero becomes a short stack of the
 * three approved stills with the same text and the same calls to action — the
 * whole narrative is still legible, it simply does not move.
 */
@media (prefers-reduced-motion: reduce) {
  .hvn-cine { --cine-track: auto; }
  .hvn-cine__track { height: auto; }
  .hvn-cine__pin { position: static; height: auto; min-height: 0; display: block; }
  .hvn-cine__stage { position: relative; aspect-ratio: 16 / 9; }
  .hvn-cine__layer { opacity: 1 !important; position: relative; }
  .hvn-cine__layer:not(:first-child) { display: none; }
  .hvn-cine__vid { display: none; }
  .hvn-cine__poster { position: relative; height: auto; }
  .hvn-cine__copy {
    position: relative;
    padding: var(--hvn-s7) var(--hvn-s5);
    display: block;
  }
  .hvn-cine__intro, .hvn-cine__end {
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto;
    max-width: 60ch;
  }
  .hvn-cine__end { margin-top: var(--hvn-s7); }
  .hvn-cine__beats { position: static; max-width: none; text-align: left; margin-top: var(--hvn-s6); }
  .hvn-cine__beats li { position: static; opacity: 1; transform: none; margin-bottom: var(--hvn-s4); }
  .hvn-cine__cue { display: none; }
  .hvn-cine__veil { display: none; }
}