/* ── Hero: scroll-scrubbed frame sequence ───────────────────────────── */

.hero {
  position: relative;
  /* The spacer's height IS the scrub duration. */
  height: 300vh;
}
@media (max-width: 820px) { .hero { height: 300vh; } }

.hero__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  background: var(--ink);
}

.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Poster paints instantly so the first frame is never an empty box. */
.hero__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 900ms var(--ease);
}
.hero__stage.is-ready .hero__poster { opacity: 0; }

/* Vignette + grain: the tactile, organic imperfection the art direction needs. */
.hero__vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 45%, transparent 42%, rgba(5,16,11,0.55) 100%),
    linear-gradient(to bottom, rgba(5,16,11,0.5) 0%, transparent 22%, transparent 68%, rgba(5,16,11,0.85) 100%);
}
.grain {
  position: absolute;
  inset: -50%;
  pointer-events: none;
  opacity: 0.028;
  mix-blend-mode: overlay;
  will-change: transform;
}

/* A soft centred scrim: the copy sits over the artwork, so it needs its own
   ground to read against without darkening the whole frame. */
.hero__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(64% 44% at 50% 26%,
    rgba(5, 16, 11, 0.60) 0%,
    rgba(5, 16, 11, 0.38) 48%,
    rgba(5, 16, 11, 0) 100%);
}

/* ── Hero typography beats ──────────────────────────────────────────── */
.hero__type {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: start;
  justify-items: center;
  text-align: center;
  padding: clamp(3.5rem, 10vh, 7rem) var(--gutter) 0;
  pointer-events: none;
  z-index: 2;
}

.beat {
  grid-area: 1 / 1;
  align-self: start;
  opacity: 0;
  max-width: min(34rem, 88vw);
  will-change: opacity, transform;
  text-shadow: 0 1px 32px rgba(5, 16, 11, 0.7);
}
.beat a { pointer-events: auto; }

.beat--open { max-width: min(48rem, 92vw); }
.beat--open .d1 {
  font-size: clamp(2.5rem, 1rem + 4.6vw, 6rem);
}

.beat--open .d1::after {
  content: '';
  display: block;
  width: 2.5rem;
  height: 1px;
  margin: clamp(1.5rem, 3.5vh, 2.25rem) auto 0;
  background: var(--amber);
  opacity: 0.75;
}

.hero__meta {
  margin: clamp(1.25rem, 3vh, 1.75rem) 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0.35rem 1.75rem;
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cream-dim);
  line-height: 1.8;
}
@media (max-width: 700px) {
  /* The role is too long to set well at this width -- the name carries it,
     and the role is stated again in the closing section. */
  .hero__meta span + span { display: none; }
  .hero__type { padding-top: clamp(4rem, 12vh, 7rem); }
  .beat--open .d1 { font-size: clamp(2.25rem, 8.6vw, 3.25rem); }
}

/* Scroll cue — a hairline that breathes, not an animated mouse icon. */
.hero__cue {
  position: absolute;
  left: var(--gutter);
  bottom: clamp(1.75rem, 4vh, 2.75rem);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.625rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--cream-faint);
  transition: opacity 700ms var(--ease);
}
.hero__cue::after {
  content: '';
  width: clamp(3rem, 8vw, 6rem);
  height: 1px;
  background: linear-gradient(to right, var(--cream-faint), transparent);
}
.hero__stage.is-scrolled .hero__cue { opacity: 0; }


/* ── Preloader ──────────────────────────────────────────────────────── */
.preload {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-content: center;
  gap: 1.75rem;
  justify-items: center;
  background: var(--ink);
  transition: opacity 900ms var(--ease), visibility 900ms var(--ease);
}
.preload.is-done {
  opacity: 0;
  visibility: hidden;
}
.preload__mark {
  font-family: var(--serif);
  font-variation-settings: 'opsz' 144, 'WONK' 1;
  font-weight: 400;
  font-size: clamp(2.25rem, 1.5rem + 2.6vw, 3.75rem);
  letter-spacing: 0.16em;
  text-indent: 0.16em;      /* re-centre against the trailing letter-space */
  color: var(--cream);
}
.preload__rule {
  width: clamp(5rem, 14vw, 9rem);
  height: 1px;
  background: rgba(239, 231, 215, 0.14);
  overflow: hidden;
}
.preload__rule span {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--amber);
  transition: width 420ms var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .hero { height: 100svh; }
  .grain { display: none; }
  .hero__stage.is-ready .hero__poster { opacity: 1; }
}