/* ============================================================
   MORE, V1.1 scroll-driven hero
   Frame-sequence wave scrubbed by scroll, pinned then released
   into the normal page. Uses the site's existing design tokens.
   ============================================================ */

/* Tall section; the inner stage pins (sticky) for its whole height.
   Scroll length = --shero-vh; more = a slower, more deliberate scrub. */
.shero{
  position: relative;
  height: var(--shero-vh, 250vh);
  background: var(--ink-900);
}
.shero-stage{
  position: sticky; top: 0;
  height: 100vh;            /* iOS < 16.4 fallback */
  height: 100dvh;
  overflow: hidden;
  background: var(--ink-900);
}

.shero-canvas, .shero-poster{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
/* Poster shows until the first frame is drawn (and as the no-JS /
   reduced-motion fallback). */
.shero-poster{ z-index: 1; transition: opacity .6s var(--ease-out); }
.shero-canvas{ z-index: 2; opacity: 0; transition: opacity .4s var(--ease-out); }
.shero-stage.ready .shero-canvas{ opacity: 1; }
.shero-stage.ready .shero-poster{ opacity: 0; }

/* Depth over the footage, matching the site's ink palette */
.shero-vignette{
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    radial-gradient(120% 95% at 50% 32%, transparent 46%, rgba(11,31,25,.42) 100%),
    linear-gradient(to bottom, rgba(11,31,25,.34) 0%, transparent 22%, transparent 60%, rgba(11,31,25,.62) 100%);
}

/* Baseline, one gentle line that fades out as the wave rolls in */
.shero-baseline{
  position: absolute; inset: 0; z-index: 4; margin: 0;
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 24px;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(2.4rem, 7vw, 5.2rem); line-height: 1; letter-spacing: -.01em;
  color: var(--sand-050);
  text-shadow: 0 2px 34px rgba(11,31,25,.5);
  will-change: opacity, transform;
}
/* Text lives in a single span child: a flex container would turn the bare
   text node and the <em> into two separate items and eat the space between
   them ("Less noise.More life."). One child = normal inline flow. */
.shero-baseline > span{ display: block; }
.shero-baseline em{ color: var(--terra-400); font-style: italic; }

/* Scroll beats, lines that fade in then out as the wave story unfolds.
   Hidden by default (opacity 0); JS drives them, so no-JS and
   reduced-motion visitors just get the baseline over the poster. */
.shero-beat{
  position: absolute; inset: 0; z-index: 4; margin: 0;
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 24px min(10vw, 140px);
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(2rem, 5.6vw, 4.2rem); line-height: 1.12; letter-spacing: -.01em;
  color: var(--sand-050);
  text-shadow: 0 2px 34px rgba(11,31,25,.5);
  opacity: 0; will-change: opacity, transform;
}
.shero-beat > span{ display: block; }
.shero-beat em{ color: var(--terra-400); font-style: italic; }

/* Each half is one unbreakable unit: the line may wrap between the two
   halves, never inside one of them. */
.shero-baseline .ln, .shero-baseline em,
.shero-beat .ln, .shero-beat em{ display: inline-block; white-space: nowrap; }

/* Scroll hint (fades after the first scroll) */
.shero-hint{
  position: absolute; left: 50%; bottom: 30px; z-index: 5; transform: translateX(-50%);
  width: 26px; height: 42px; border: 2px solid rgba(245,237,224,.6); border-radius: 16px;
  transition: opacity .5s var(--ease-out);
}
.shero-hint span{
  position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; border-radius: 2px;
  background: var(--sand-050); transform: translateX(-50%);
  animation: shero-hint 1.8s var(--ease-out) infinite;
}
.shero-hint.hide{ opacity: 0; }
@keyframes shero-hint{
  0%{ opacity: 0; transform: translate(-50%, 0); }
  30%{ opacity: 1; }
  100%{ opacity: 0; transform: translate(-50%, 14px); }
}

/* Shorter, calmer scrub on phones so the story isn't exhausting.
   Mobile fills the screen (cover) with a portrait 9:16 frame set. */
@media (max-width: 760px){
  .shero{ height: var(--shero-vh-mobile, 200vh); }
}

/* Narrow phones: the halves are unbreakable, so give them room and let the
   type shrink a little rather than overflow the screen. */
@media (max-width: 400px){
  .shero-baseline{ padding: 24px 4vw; font-size: clamp(1.9rem, 8.4vw, 2.6rem); }
  .shero-beat{ padding: 24px 4vw; font-size: clamp(1.7rem, 7.6vw, 2.4rem); }
}

/* Fallbacks: without JS the canvas never draws, show the poster full-bleed
   and don't force a giant empty scroll. */
.no-js .shero{ height: auto; }
.no-js .shero-stage{ position: relative; }
.no-js .shero-canvas, .no-js .shero-hint{ display: none; }
.no-js .shero-stage.ready .shero-poster{ opacity: 1; }

@media (prefers-reduced-motion: reduce){
  .shero{ height: auto; }
  .shero-stage{ position: relative; }
  .shero-hint span{ animation: none; }
  .shero-canvas{ display: none; }
  .shero-stage .shero-poster{ opacity: 1; }
}