/* ============================================================================
   HERO — the opening spread. Type only: no image, no blend modes, no artwork.

   The name is the graphic. Two lines run off the left edge of the viewport
   (cropped on purpose, like a printed page), the first solid, the second
   outlined at 1px. Behind them a measured page: two vertical hairlines and one
   horizontal, each labelled with a coordinate. Everything is 1px and quiet so
   the type stays the only mass on the page.
   ========================================================================= */

#hero {
  --hero-bleed: 0.13em;            /* how far the name runs past the left edge */
  --hero-label: 10px;              /* the coordinate labels on the rules */
  position: relative;
  isolation: isolate;
  height: 100svh;
  min-height: 560px;
  overflow: clip;                  /* the crop happens here, not on <body> */
  background: var(--bg);
  padding: 0;
}

/* ---------- the name ----------------------------------------------------- */
.hero-words {
  position: absolute;
  left: 0;
  right: 0;
  top: clamp(96px, 19svh, 212px);
  z-index: 2;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  pointer-events: none;
}

.hero-name {
  margin: 0;
  margin-left: calc(-1 * (var(--gutter) + var(--hero-bleed)));
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(3.3rem, 14.2vw, 13.4rem);
  line-height: 0.92;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
  will-change: transform;
}

.hero-name-line {
  display: block;
  padding-block: 0.04em;
}

/* each line wipes up into place, 90ms apart */
.hero-name-line {
  clip-path: inset(100% 0 -0.1em 0);
  animation: hero-mask 900ms var(--ease) forwards;
}

.hero-name-line:nth-child(1) { animation-delay: 80ms; }
.hero-name-line:nth-child(2) { animation-delay: 170ms; }

/* line two is a contour: transparent fill, 1px ink stroke */
.hero-name-line--outline {
  color: transparent;
  -webkit-text-stroke: 1px var(--ink);
}

@supports not ((-webkit-text-stroke: 1px currentColor) or (text-stroke: 1px currentColor)) {
  .hero-name-line--outline {
    color: var(--ink);
  }
}

/* ---------- statement ---------------------------------------------------- */
.hero-line {
  max-width: min(64ch, 620px);
  margin-top: clamp(16px, 2.8vh, 30px);
  color: var(--muted);
  font-size: var(--t-b);
  line-height: 1.55;
  text-wrap: pretty;
  animation: hero-fade-in 900ms var(--ease) 520ms both;
}

/* ---------- hairline page ------------------------------------------------
   The vertical rules are taller than the frame and drift on scroll, so their
   ends never come into view. Labels ride the rule they belong to. ---------- */
.hero-rules {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.hero-rule {
  position: absolute;
  background: var(--line);
}

.hero-rule--w,
.hero-rule--e {
  top: 0;
  bottom: 0;
  width: 1px;
  will-change: transform;
}

.hero-rule--w { left: 20%; }
.hero-rule--e { left: 62%; }

.hero-rule--h {
  left: 0;
  right: 0;
  top: 55%;
  height: 1px;
}

.hero-coord {
  position: absolute;
  font-family: var(--mono);
  font-size: var(--hero-label);
  letter-spacing: 0.18em;
  line-height: 1;
  color: var(--faint);
  white-space: nowrap;
}

.hero-rule--w .hero-coord,
.hero-rule--e .hero-coord {
  left: 8px;
  top: 96px;
}

.hero-rule--h .hero-coord {
  right: calc(18px + 8px);
  top: -16px;
}

/* ---------- kicker ------------------------------------------------------- */
.hero-kicker {
  position: absolute;
  left: var(--gutter);
  top: clamp(72px, 9.5vh, 100px);
  z-index: 4;
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--faint);
}

/* ---------- bottom row --------------------------------------------------- */
.hero-foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(20px, 4vh, 40px);
  z-index: 4;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 0 var(--gutter);
  animation: hero-fade-in 900ms var(--ease) 640ms both;
}

.hero-meta {
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--faint);
  line-height: 1.5;
}

.hero-scroll {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: 1px;
}

.hero-scroll-rule {
  display: block;
  width: 64px;
  height: 1px;
  background: currentColor;
  transform-origin: left center;
  animation: hero-rule 2s var(--ease) infinite;
}

.hero-scroll:hover .hero-scroll-rule,
.hero-scroll:focus-visible .hero-scroll-rule {
  animation-play-state: paused;
  transform: scaleX(1);
}

/* ---------- hairline frame + crop ticks ---------------------------------- */
.hero-frame {
  position: absolute;
  inset: 18px;
  z-index: 5;
  border: 1px solid var(--line);
  pointer-events: none;
}

.hero-tick {
  position: absolute;
  width: 14px;
  height: 14px;
}

.hero-tick::before,
.hero-tick::after {
  content: "";
  position: absolute;
  background: var(--line-strong);
}

.hero-tick::before { width: 14px; height: 1px; }
.hero-tick::after  { width: 1px; height: 14px; }

.hero-tick--tl { top: -1px; left: -1px; }
.hero-tick--tr { top: -1px; right: -1px; }
.hero-tick--bl { bottom: -1px; left: -1px; }
.hero-tick--br { bottom: -1px; right: -1px; }

.hero-tick--tl::before,
.hero-tick--bl::before { left: 0; }
.hero-tick--tr::before,
.hero-tick--br::before { right: 0; }
.hero-tick--tl::after,
.hero-tick--tr::after { top: 0; }
.hero-tick--bl::after,
.hero-tick--br::after { bottom: 0; }
.hero-tick--tl::after,
.hero-tick--bl::after { left: 0; }
.hero-tick--tr::after,
.hero-tick--br::after { right: 0; }

/* ---------- motion -------------------------------------------------------
   Only three things move: the two name lines wipe in, the name drifts at 0.06,
   the two vertical rules drift at 0.12 in opposite directions. -------------- */
@keyframes hero-mask {
  from { clip-path: inset(100% 0 -0.1em 0); }
  to   { clip-path: inset(-0.1em 0 -0.1em 0); }
}

@keyframes hero-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes hero-rule {
  0%   { transform: scaleX(0.16); opacity: 0.5; }
  55%  { transform: scaleX(1);    opacity: 1; }
  100% { transform: scaleX(0.16); opacity: 0.5; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-name-line {
    animation: none;
    clip-path: none;
  }

  .hero-line,
  .hero-foot {
    animation: none;
  }

  .hero-scroll-rule {
    animation: none;
    transform: none;
  }
}

/* ---------- narrow ------------------------------------------------------- */
@media (max-width: 780px) {
  #hero {
    --hero-bleed: 0.18em;
    min-height: 620px;
  }

  .hero-frame {
    inset: 12px;
  }

  .hero-words {
    top: clamp(168px, 24svh, 236px);
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }

  .hero-name {
    font-size: clamp(3.8rem, 22vw, 8rem);
    letter-spacing: 0.13em;
    line-height: 0.98;
  }

  /* the sheet's horizontal line drops below the statement so it never
     crosses the text on a narrow column */
  .hero-rule--h {
    top: 62%;
  }

  .hero-line {
    max-width: 36ch;
    margin-top: 18px;
  }

  .hero-kicker {
    top: 68px;
  }

  .hero-rule--w .hero-coord,
  .hero-rule--e .hero-coord {
    top: 92px;
  }

  .hero-foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    bottom: 22px;
  }

  .hero-meta {
    font-size: 0.62rem;
    letter-spacing: 0.2em;
  }

  .hero-scroll-rule {
    width: 44px;
  }
}