/* The homepage's hero: its copy, the pinned stage and the callouts. The
   fonts, tokens, nav, pills, RER display lines and error surfaces both
   pages share are in src/base.css. */

/* Hero */

.hero {
  position: relative;
  height: 100svh;
  min-height: 680px;
  overflow: hidden;
}

/* The stage is the hero's backdrop and stays pinned through the story that
   follows it (src/story.css): a sticky sibling after the hero, pulled up
   under it by its own height, so it is exactly where the hero's stage was. */
.stage { position: sticky; top: 0; height: max(100svh, 680px); margin-top: calc(-1 * max(100svh, 680px)); }
.stage-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* The floor dissolves into the black of the sections below (the story
   clears the fade, --stage-fade, where the board fills the frame). */
.stage-canvas { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--stage-fade, 72px)), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - var(--stage-fade, 72px)), transparent); }

.copy {
  position: absolute;
  z-index: 2;
  left: var(--gutter);
  top: calc(50% + 26px);
  transform: translateY(-50%);
  width: min(50vw, 820px);
}

.headline { margin: 0; font-size: var(--headline-cap); line-height: 0; color: var(--paper); }

.subhead {
  margin: clamp(24px, 2.4vw, 40px) 0 0;
  max-width: 23.6em;
  font-size: clamp(17px, 1.7vw, 27px);
  font-weight: 300;
  line-height: 1.33;
  letter-spacing: 0.002em;
  color: var(--text);
  text-wrap: balance;
}
.subhead-turn { margin-top: 0.3em; font-weight: 500; color: var(--paper); }

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(12px, 1.24vw, 19px);
  margin-top: clamp(28px, 2.9vw, 44px);
}

/* The copy rises in on first paint, line by line; it never waits for the
   stage. Transform and opacity only, so nothing shifts the layout. */
@media (prefers-reduced-motion: no-preference) {
  .copy > * { animation: copy-rise 600ms cubic-bezier(0.22, 0.7, 0.2, 1) backwards; }
  .copy > :nth-child(2) { animation-delay: 50ms; }
  .copy > :nth-child(3) { animation-delay: 100ms; }
  .copy > :nth-child(4) { animation-delay: 150ms; }
}
@keyframes copy-rise { from { opacity: 0; transform: translateY(12px); } }

/* Callouts */

.callout-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 1;
}
.callout-lines path { fill: none; stroke: var(--hairline); stroke-width: 1; vector-effect: non-scaling-stroke; }
.callout-lines circle { fill: rgba(0, 0, 0, 0.28); stroke: var(--ring); stroke-width: 1.2; }

/* Clipped to the stage: a label laid out for a wider stage (a phone turned
   back from landscape, before the stage lays it out again) never widens the
   page. */
.callout-labels { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; z-index: 1; overflow: hidden; }
.callout-labels li {
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--mono);
  font-size: clamp(11px, 0.88vw, 14px);
  font-weight: 400;
  line-height: 1.34;
  letter-spacing: 0.01em;
  color: var(--text-soft);
  white-space: pre;
  will-change: transform;
}

/* Narrow: copy above the scene */

@media (max-width: 900px) {
  .hero { height: auto; min-height: 0; overflow: visible; display: flex; flex-direction: column; }
  .copy { position: relative; left: auto; top: auto; transform: none; width: auto; padding: clamp(40px, 9vw, 72px) var(--gutter) 0; }
  /* Stacked: the stage follows the copy, then pins with its faded top
     edge (12% of it) above the viewport, leaving the story's copy the rest. */
  .stage { top: round(clamp(440px, 120vw, 720px) * -0.12, 1px); margin-top: 0; height: clamp(440px, 120vw, 720px); }
  .stage-canvas { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 84%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 84%, transparent); }
  .subhead { font-size: clamp(17px, 2.9vw, 24px); }
}

@media (max-width: 420px) {
  .actions .pill { --rer-h: 44px; padding: 0 16px; font-size: 14px; }
  .actions { gap: 10px; }
}