/* ---- hero ---------------------------------------------------------------
   A pinned stage carrying nothing but the wordmark, built on the Orris hero
   pattern: the picture fills the pin and scales gently while the type lifts
   and fades out over the scroll.

   ONE DEVIATION FROM THAT REFERENCE, AND IT MATTERS
   Orris multiplies its photograph into a plaster-white ground so the ink of
   the letterforms passes through the still life. Multiply against this page's
   near-black ground resolves to near-black: the picture would disappear
   entirely. On a dark ground the equivalent move is to let the photograph
   carry its own light and lay the wordmark over it, with a scrim tuned only
   as far as legibility needs, so the image stays a photograph rather than
   becoming a texture.
   ------------------------------------------------------------------------ */

.hero {
  position: relative;
  height: 300svh;                 /* the scroll length the scrub runs over */
}

.hero__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  display: grid;
  place-items: center;
}

/* The media layer is what scales on scroll, kept separate from the scrim
   so the gradient below is not stretched along with the picture. */
.hero__media {
  position: absolute;
  inset: 0;
  transform: scale(1.04);
  will-change: transform;
}
.hero__media > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__still {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Legibility scrim, a sibling rather than a pseudo-element on the media, so
   the scrub's scale does not stretch the gradient along with the picture.

   Tuned for this photograph specifically: a lit concrete wall that is far
   brighter across the middle than the footage it replaced, so the band under
   the wordmark has to carry more weight than a dark frame would need. */
.hero__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    /* A band across the middle, where the wordmark crosses the flame. Bodoni's
       hairlines are the first thing to disappear against that strip, so this
       carries more weight than the corners, which stay open. */
    linear-gradient(to bottom, rgba(12, 12, 13, 0) 22%, rgba(12, 12, 13, 0.62) 42%, rgba(12, 12, 13, 0.62) 60%, rgba(12, 12, 13, 0) 80%),
    radial-gradient(120% 66% at 50% 50%, rgba(12, 12, 13, 0.42) 0%, rgba(12, 12, 13, 0.22) 58%, rgba(12, 12, 13, 0.05) 100%),
    linear-gradient(to bottom, rgba(12, 12, 13, 0.46) 0%, rgba(12, 12, 13, 0) 24%);
}

.hero__type {
  position: relative;
  z-index: 1;
  padding-inline: var(--gut);
  will-change: transform, opacity;
}

/* --- the wordmark ---------------------------------------------------------
   Sized from its own character count, not from a bare viewport width. Bodoni
   runs wide (about .60em average advance), so a vw value tuned to a short
   word clips a long one, and the pin's overflow:hidden would hide that from
   any page-level overflow check. --chars must match the wordmark's length. */
.hero__mark {
  --chars: 12;
  /* Average advance, measured rather than assumed. The reference's .60em is a
     safe guess for a five-letter word; measured on this twelve-letter mark at
     weight 600 it left the type at 71vw, well short of the poster scale the
     treatment depends on. .55 fills the line while keeping the guard that
     stops a long wordmark from ever clipping inside the pin's overflow. */
  font-family: var(--mark);
  font-weight: 600;
  font-optical-sizing: auto;
  font-size: min(clamp(3.5rem, 34vw, 20rem), calc(88vw / (var(--chars) * 0.55)));
  line-height: 0.8;
  /* -.05em suits a short word. Across twelve letters it accumulates into
     visibly colliding stems, so the tightening is eased off here. */
  letter-spacing: -0.02em;
  white-space: nowrap;
  text-align: center;
  color: var(--bone);
  /* Bodoni's thin strokes disappear against a bright flame; a soft shadow
     holds the hairlines together without reading as a glow. */
  text-shadow: 0 2px 40px rgba(12, 12, 13, 0.55);
}

/* Load reveal: the mark rises inside its own mask so it prints on rather than
   fading in. Scoped to .js so it is simply present when scripting is off. */
.js .hero__mark-clip { display: block; overflow: hidden; padding-bottom: 0.12em; }
.js .hero__mark-clip > span { display: block; transform: translateY(105%); }
.js .hero.is-lit .hero__mark-clip > span {
  transform: translateY(0);
  transition: transform 1.25s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .js .hero__mark-clip > span { transform: none; transition: none; }
}

@media (max-width: 899px) {
  /* Three viewport heights of a still image is tedious on a phone, where the
     same scrub covers far less pixel distance per swipe. */
  .hero { height: 200svh; }
}