/* ============================================================
   Loader + Hero — section —, 01
   Ported from refer/loader_9.html, remapped to the real
   tokens.css semantic names (was local --n-* shim) and the real
   --ease-reveal / --dur-hero tokens (was --ease-settle/1400ms).
   ============================================================ */

body.is-loading{ overflow:hidden; }

#loader{
  position:fixed; inset:0; z-index:var(--z-loader);
  display:flex; align-items:center; justify-content:center;
  background:var(--bg); color:var(--text);
}
#loader[hidden]{ display:none; }

#loader-word{
  font-family:var(--font-display); font-size:clamp(28px,6vw,72px);
  line-height:1.12; white-space:nowrap;
  transition:opacity var(--dur-1) linear;
}
#loader-word.is-gone{ opacity:0; }

.hero{
  min-height:100vh; display:flex; flex-direction:column;
  justify-content:center; padding-block:var(--sp-9);
}
/* Tight to the headline it labels — the closest relationship in the
   stack, so the smallest gap. */
.hero__eyebrow{
  font-family:var(--font-text); font-size:var(--fs-t4);
  letter-spacing:var(--ls-caps); text-transform:uppercase;
  color:var(--text-muted); margin:0 0 var(--sp-4);
}
.hero__display{
  font-family:var(--font-display); font-size:var(--fs-d1);
  line-height:var(--lh-display); letter-spacing:var(--ls-display);
  font-weight:400; margin:0;
}

/* Below the headline the copy does two different jobs — the pitch
   (what this person builds) and a bio credential (who they are,
   structurally) — and each gets its own tier instead of sharing one
   paragraph. Loose gap in from the headline (new register: statement
   to supporting prose); tight gap down to the credential (same
   register: both still "about the work/person"); loose gap down to
   the links (new register again: prose to utility row). */
.hero__pitch{
  font-family:var(--font-text); font-size:var(--fs-t1); max-width:46ch;
  margin:var(--sp-6) 0 0; color:var(--text-muted);
}
.hero__cred{
  font-family:var(--font-text); font-size:var(--fs-t4);
  letter-spacing:var(--ls-caps); text-transform:uppercase;
  margin:var(--sp-3) 0 0; color:var(--text-muted);
}
.hero__links{
  font-family:var(--font-text); margin-top:var(--sp-6);
  font-size:var(--fs-t3); color:var(--text-muted);
}
.hero__links a{ color:inherit; text-decoration:none; }
.hero__links a:not(.link):hover{ text-decoration:underline; text-underline-offset:.18em; }

/* padding-block + negative margin opens the clip box so tight leading
   doesn't shave ascenders mid-flight, without changing layout */
.hero__mask{ overflow:hidden; display:block; padding-block:.1em; margin-block:-.1em; }
/* Owner request: match refer/feel-sample_1.html's specific reveal
   feel — that reference runs every mask reveal on ONE curve (its own
   --ease, identical to this site's --ease-move) at 1.109s, not a
   second, steeper curve at 980ms. --dur-5/--ease-move already exist as
   tokens (1109ms is literally --dur-5's value) — this just points the
   hero's own reveal at them instead of --dur-hero/--ease-reveal, which
   read snappier/more "triggered" by comparison. Scoped to .hero__line
   only; every other section's own reveal timing is untouched. */
.hero__line{ display:block; transition:transform var(--dur-5) var(--ease-move); }

/* 125%, not 105% — overflow:hidden clips the padding box, so the mask
   is taller than the line inside it; 105% would leave the top visible */
.js .hero__line{ transform:translateY(125%); }
.hero.is-in .hero__line{ transform:translateY(0); }
.hero.is-in .hero__line--eyebrow{ transition-delay:0ms; }
.hero.is-in .hero__line--a      { transition-delay:90ms; }
.hero.is-in .hero__line--b      { transition-delay:170ms; }
.hero.is-in .hero__line--pitch  { transition-delay:280ms; }
.hero.is-in .hero__line--cred   { transition-delay:330ms; }
.hero.is-in .hero__line--links  { transition-delay:400ms; }

@media (prefers-reduced-motion:reduce){
  #loader{ display:none !important; }
  .js .hero__line{ transform:none; }
  .hero__line{ transition:none; }
}