/* ---------------------------------------------------------------------------
 * intro.css — homepage intro sequence (Sprint 7). Loaded by index.html only,
 * after components.css. Every value resolves through --sc-* tokens; the intro's
 * own motion tokens live in tokens-local.css (--sc-motion-intro-*).
 * ------------------------------------------------------------------------- */

/* homepage intro ───────────────────────────────────────────── */

/* Sprint 7 — "SC Intro III". The overlay is in the HTML so there is no flash
   of page before it; whether it shows at all is decided before first paint by
   the inline bootstrap in index.html, which sets html[data-intro] only when
   motion is allowed, the session has not seen it, and the page is not a static
   capture. No attribute → display:none → no-JS and reduced-motion visitors
   never see it and are never trapped behind it. */
.intro {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 90; /* above the page, below the grain (100) and the Shokunin overlay (200) */
  background: var(--sc-color-brand-accent);
  place-items: center;
}
html[data-intro] .intro { display: grid; }
html[data-intro] .intro[hidden] { display: none; }

.intro__stage {
  width: var(--sc-size-intro-stage);
  height: auto;
  overflow: visible;
}
.intro__plus path { fill: var(--sc-color-text-on-accent); }

/* Skip is the only control on the teal ground. text.onAccent (white) is 3.9:1
   on brand.accent — fine for the mark, under AA for 11px text — so the label
   uses the ink primitive (5.0:1 on teal-500). TOKEN GAP: text on brand.accent
   as a ground has no semantic token upstream (text.onAccent is documented
   against brand.accentFill). */
.intro__skip {
  position: absolute;
  right: clamp(1rem, 4vw, 2.5rem);
  bottom: var(--sc-p-space-24);
  min-height: var(--sc-size-touch-target);
  padding: var(--sc-p-space-8) var(--sc-p-space-4);
  font: var(--sc-font-text-mono-chrome);
  letter-spacing: var(--sc-p-font-tracking-widest);
  text-transform: uppercase;
  color: var(--sc-p-color-warm-gray-900);
  background: none;
  border: 0;
  border-bottom: var(--sc-border-width-default) solid transparent;
  cursor: pointer;
  transition:
    border-color var(--sc-motion-hover-duration) var(--sc-motion-hover-easing),
    transform var(--sc-motion-press-duration) var(--sc-motion-press-easing);
}
.intro__skip:hover,
.intro__skip:focus-visible { border-bottom-color: currentColor; }
.intro__skip:active { transform: scale(var(--sc-motion-press-scale)); }
.intro__skip:focus-visible {
  outline: var(--sc-border-width-focus) solid var(--sc-color-border-focus);
  outline-offset: var(--sc-border-focus-offset);
}
.intro__skip:disabled { opacity: 0.4; cursor: default; }

/* The iris is a plus-shaped hole clipped into this overlay by intro.js (see
   irisHole there). The page is never clipped or re-stacked; it simply shows
   through. Nothing to declare here beyond the overlay itself. */

/* Replay lives in the footer; hidden until intro.js mounts, and never offered
   under reduced motion (there is nothing to replay). */
.footer__replay {
  font: inherit;
  letter-spacing: inherit;
  color: var(--sc-color-text-secondary);
  background: none;
  border: 0;
  padding: var(--sc-p-space-4) 0;
  min-height: var(--sc-size-touch-target);
  cursor: pointer;
  border-bottom: var(--sc-border-width-default) solid transparent;
  transition:
    color var(--sc-motion-press-duration) var(--sc-p-motion-easing-out),
    border-color var(--sc-motion-hover-duration) var(--sc-motion-hover-easing);
}
.footer__replay:hover,
.footer__replay:focus-visible {
  color: var(--sc-color-text-primary);
  border-bottom-color: currentColor;
}
.footer__replay:active { transform: scale(var(--sc-motion-press-scale)); }
.footer__replay:focus-visible {
  outline: var(--sc-border-width-focus) solid var(--sc-color-border-focus);
  outline-offset: var(--sc-border-focus-offset);
}
.footer__replay:disabled { opacity: 0.4; cursor: default; }
.footer__replay[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .intro { display: none !important; }
  .footer__replay { display: none; }
  .intro__skip, .footer__replay { transition: none; }
}