/* ============================================================================
   S1 · Night — the poster hero, then the route-out (Gasp 1).
   The CSS default is the key pose and it is visible from the first paint: three lines flush left at the gutter,
   ERNEST / JOHN / MASKARIÑO at one size (MASKARIÑO fitted to the gutters), the tilde drawn in Signal on the Ñ,
   the role line top-left, the serif one-liner right-aligned beside ERNEST, the order line bottom-right under the
   rail. The load choreography (tilde draw, corner lines) is plain CSS on its own clock from first paint; nothing
   waits on JS. JS only fits the type exactly, adds the order dot and the light, and moves things away on scroll.
   ========================================================================== */

/* The name's own fallback: Arial Black set wide enough that MASKARIÑO takes the same width as Anybody at
   wdth 125, so the first paint before the web font lands is already the composed frame and the swap changes only
   the letterforms, never the layout. */
@font-face {
  font-family: "Hero Name Fallback";
  src: local("Arial Black"), local("ArialMT-Black"), local("Impact");
  size-adjust: 118%;
  ascent-override: 74%;
  descent-override: 19.5%;
}
/* the three-line phone edition sets the surname at wdth ≈ 79, which the fallback cannot do: a narrower face for it */
@font-face {
  font-family: "Hero Narrow Fallback";
  src: local("Arial Black"), local("ArialMT-Black"), local("Impact");
  size-adjust: 76.5%;
  ascent-override: 114%;
  descent-override: 30%;
}
.hero__line,
.hero__fly {
  font-family: "Anybody", "Hero Name Fallback", var(--display);
}

.scene--hero .scene__stage {
  background: transparent;
  /* the same fitting rules JS applies, approximated so the first paint is already composed:
     S = MASKARIÑO (8.216em at wdth 125) fitted to the gutters, capped so the block (2.78em: three 0.86em lines and
     the tilde's 0.2em band) stays under the role line and in the lower part of the stage */
  --hero-avail: calc(100vw - 2 * var(--gutter));
  --hero-B: calc(max(var(--gutter), 24px) + 1.4 * var(--mono-s) + 14px);
  --hero-S: min(calc(var(--hero-avail) / 8.216), 24svh, calc((100svh - var(--hero-B) - 113px) / 2.78));
  /* the print: as tall as ERNEST + JOHN (ERNEST's cap top to JOHN's baseline = 1.546em), 4:5 */
  --hero-PH: calc(var(--hero-S) * 1.546);
  --hero-PW: calc(var(--hero-PH) * 0.8);
  --hero-gap: max(24px, calc(var(--hero-S) * 0.2));
}

/* Nothing in the name transitions: JS measures it synchronously, and the base reduced-motion rule
   (transition-duration 0.01ms on *) would otherwise return the previous size for a frame. */
.hero__name,
.hero__name * {
  transition: none !important;
}

/* the name block: three lines flush left, bottom-anchored above the order line */
.hero__name {
  position: absolute;
  z-index: 3;
  left: var(--gutter);
  right: var(--gutter);
  bottom: var(--hero-B);
}
.hero__line {
  --wdth: 125;
  position: relative;
  display: block;
  white-space: nowrap;
  text-align: left;
  font-size: var(--hero-S);
  font-variation-settings: "wdth" var(--wdth), "wght" 900;
}
.hero__line--last {
  /* open leading: the tilde gets its own band above the Ñ, under JOHN's baseline */
  margin-top: 0.2em;
}
.hero__w {
  display: inline-block;
  white-space: nowrap;
}
.hero__l {
  position: relative;
  display: inline-block;
}
/* a zero-size inline-block sits on the baseline: JS reads it to align the serif line with ERNEST */
.hero__base {
  display: inline-block;
  width: 0;
  height: 0;
  vertical-align: baseline;
}
/* The tilde: a Signal stroke above the N's cap (cap top = 0.024em under the letter box top in Anybody at
   line-height 0.86). Must match TILDE_BOX in js/scenes/hero.js. */
.hero__tilde {
  position: absolute;
  left: 4%;
  top: -0.29em;
  width: 92%;
  height: 0.26em;
  color: var(--signal);
  overflow: visible;
  pointer-events: none;
}
/* freed by JS at mount: one overlay on the stage, path in stage pixels */
.hero__tilde--free {
  position: absolute;
  inset: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
}
/* the 1px rail under MASKARIÑO, the word's width; the light canvas runs its traffic along it */
.hero__rail {
  position: relative;
  width: 100%;
  height: 1px;
  margin-top: 10px;
  background: color-mix(in srgb, var(--bone) 30%, transparent);
}
/* the E and the J that fly to the header mark (JS clones; sit exactly on the originals at rest).
   --fw runs 125 → 110 in flight so the shapes match the header's glyphs at the swap. */
.hero__fly {
  position: absolute;
  z-index: 4;
  margin: 0;
  transform-origin: 0 0;
  white-space: nowrap;
  font-variation-settings: "wdth" var(--fw, 125), "wght" 900;
}

.hero__role {
  max-width: 44ch;
}
/* the portrait: a framed monochrome print standing in the ragged-right space, its right edge on the gutter, its
   top on ERNEST's cap line and its foot on JOHN's baseline. Visible from first paint, no JS. 2px of paper, a 1px
   bone line; no shadow, no rounding, no rotation. */
.hero__print {
  position: absolute;
  z-index: 2;
  right: var(--gutter);
  bottom: calc(var(--hero-B) + 11px + var(--hero-S) * 1.212);
  height: var(--hero-PH);
  width: var(--hero-PW);
  margin: 0;
  padding: 2px;
  box-sizing: border-box;
  background: var(--paper);
  outline: 1px solid var(--bone);
  outline-offset: -1px;
}
.hero__print img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* the serif one-liner: in the notch beside JOHN, between the name and the print, its last baseline on JOHN's
   (approximated here; JS places it exactly from the baseline markers) */
.hero__line-serif {
  left: calc(var(--gutter) + var(--hero-S) * 3.81 + var(--hero-gap));
  bottom: calc(var(--hero-B) + 11px + var(--hero-S) * 1.212 - 0.28em);
  text-align: left;
  max-width: min(22ch, calc(var(--hero-avail) - var(--hero-S) * 3.81 - var(--hero-PW) - 2 * var(--hero-gap)));
}
.hero__order {
  white-space: nowrap;
}

/* ---------- The load choreography: CSS only, timed from first paint, motion edition only ----------
   0.8s the tilde draws (the order dot, added by JS when it boots in time, rides its tip on the same clock);
   1.2s the serif and order lines fade in. Nothing is hidden waiting for JS: everything is fully assembled at
   1.6s whether or not JS ever runs. JS adds .hero--settled to jump to the end state when the visitor scrolls
   during it. Never a transform (GSAP owns those): opacity only. */
html.js.motion .scene--hero:not(.hero--settled) .hero__tilde-path {
  animation: hero-draw 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0.8s backwards;
}
html.js.motion .scene--hero:not(.hero--settled) .hero__in {
  animation: hero-in 0.4s linear 1.2s backwards;
}
@keyframes hero-draw {
  from {
    stroke-dasharray: 1 1;
    stroke-dashoffset: 1;
  }
  to {
    stroke-dasharray: 1 1;
    stroke-dashoffset: 0;
  }
}
@keyframes hero-in {
  from {
    opacity: 0;
  }
}

/* ---------- Phone edition, and portrait tablets up to 1023px: the same poster, fitted to the gutters ----------
   ERNEST fitted to the gutters; JOHN at the same size; MASKARIÑO at the same size, fitted on the width axis
   (wdth ≈ 79). The serif line and the order line stack bottom-left under the rail. */
@media (max-width: 1023px) and (orientation: portrait) {
  .scene--hero .scene__stage {
    --hero-S: min(calc(var(--hero-avail) / 5.27), 20svh); /* ERNEST = 5.27em */
  }
  .scene--hero .scene__stage {
    /* the print stands above the name, right-aligned: 42vw wide, less when the room under the role line is short */
    --hero-NB: max(15svh, 140px);
    --hero-gap: max(20px, calc(var(--hero-S) * 0.22));
    --hero-PH: min(52.5vw, calc(100svh - var(--hero-NB) - 9px - var(--hero-S) * 2.78 - var(--hero-gap) - var(--header-h) - 24px - 2.8 * var(--mono-s)));
  }
  .hero__name {
    bottom: var(--hero-NB);
  }
  .hero__print {
    bottom: calc(var(--hero-NB) + 9px + var(--hero-S) * 2.758 + var(--hero-gap));
  }
  .hero__w--last {
    --wdth: 78.7; /* JS: fitted */
    font-family: "Anybody", "Hero Narrow Fallback", var(--display);
    font-variation-settings: "wdth" var(--wdth), "wght" 900;
  }
  .hero__rail {
    margin-top: 8px;
  }
  .hero__order {
    left: var(--gutter);
    right: auto;
    text-align: left;
  }
  .hero__line-serif {
    left: var(--gutter);
    right: auto;
    bottom: calc(max(var(--gutter), 24px) + 28px);
    text-align: left;
    max-width: 24ch;
  }
}

/* ---------- Landscape phones: the print at the right, header to rail; the name lines fitted to its left ---------- */
@media (max-height: 500px) and (orientation: landscape) {
  .scene--hero .scene__stage {
    --hero-PH: calc(100svh - var(--header-h) - 8px - var(--hero-B) - 11px);
    --hero-avail: calc(100vw - 2 * var(--gutter) - var(--hero-PW) - 24px);
  }
  .hero__print {
    bottom: calc(var(--hero-B) + 11px);
  }
  /* no notch left beside JOHN at this height: the serif line runs as one line bottom-left, on the order line's row */
  .hero__line-serif {
    left: var(--gutter);
    bottom: calc(max(var(--gutter), 24px) - 2px);
    max-width: none;
    white-space: nowrap;
    font-size: min(18px, 2.7vw);
  }
}