/* ── The opening ──────────────────────────────────────────────
   Scrolling is standing back. The page opens too close to read and
   resolves as the reader pulls away — the argument performed before it
   is stated. Three beats inside one sticky stage:

     1  "You're too close to see your brand."  resolves, then recedes
     2  "I'm not."   reached by pulling back out through the counter
                     of the 'o', then it recedes in turn
     3  the hero     assembles around the reader, the wordmark last

   All of it is driven from scripts/intro.js against the scroll position
   of .intro-track. Transform and filter are deliberately kept on
   separate elements: a blur on a scaled element re-rasters at the
   magnified size on every frame, which costs whole frames. */

.intro-track {
  position: relative;
  z-index: 2;
  /* 700vh of camera move, plus a final viewport the next section
     rises through while the stage is still pinned. */
  height: 800vh;
}

.intro-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  /* clip, not hidden — the stage is the sticky element itself, and the
     beats arrive far larger than the frame before they settle */
  overflow: clip;
}

.intro-layer {
  position: absolute;
  inset: 0;
}

/* The opening sentence sits nearest the lens, so it stays in front and
   recedes into the scene rather than being covered by it. */
.intro-layer--said {
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.intro-layer--answer {
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 var(--pad-h);
  pointer-events: none;
}

.intro-layer--hero {
  z-index: 1;
  opacity: 0;
  will-change: transform, opacity;
}

/* ── Beat one ─────────────────────────────────────────────── */
.intro-said {
  font-family: var(--font-display);
  font-size: clamp(44px, 9vw, 132px);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--color-white);
  text-align: left;
  /* the reader starts inside the word; script takes it from here */
  transform: scale(16);
  will-change: transform, opacity;
}

.intro-said-ink { display: block; }
.intro-said-ink > span { display: block; }

/* Optical alignment — see the bearing table in .claude/rules/taste.md */
.intro-said-1 { margin-left: -0.036em; }
.intro-said-2 { margin-left: -0.010em; }
.intro-said-3 { margin-left: -0.036em; }

.intro-hint {
  position: absolute;
  bottom: 6vh;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--color-white);
  will-change: opacity;
}

.intro-hint::after {
  content: "↓";
  animation: intro-hint-bob 1.8s var(--ease-out) infinite;
}

@keyframes intro-hint-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(7px); }
}

/* ── Beat two ─────────────────────────────────────────────── */
.intro-answer {
  font-family: var(--font-display);
  font-size: clamp(80px, min(19vw, 30vh), 300px);
  font-weight: 800;
  line-height: 0.88;
  letter-spacing: -0.03em;
  color: var(--color-orange);
  margin-left: -0.035em; /* opens on I */
  will-change: transform, opacity;
}

.intro-answer-ink { display: block; }

/* ── Reduced motion ───────────────────────────────────────────
   No camera move: the three beats simply stack, already stood back. */
@media (prefers-reduced-motion: reduce) {
  .intro-track { height: auto; }

  .intro-stage {
    position: static;
    height: auto;
    overflow: visible;
  }

  .intro-layer {
    position: static;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  .intro-layer--said { padding: 30vh var(--pad-h); }
  .intro-layer--answer { padding: 0 var(--pad-h) 30vh; }
  .intro-layer--hero .hero { position: relative; inset: auto; height: 100vh; }

  .intro-said,
  .intro-said-ink,
  .intro-answer,
  .intro-answer-ink {
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
  }

  .intro-hint { display: none; }
}