/* ============================================================================
   intro.css — the one-time origin-myth cinematic (#awIntroOverlay, js/intro.js).
   Full-viewport, pure CSS/SVG — no image assets — deliberately built from the
   same tokens as the rest of the app (--noise-grain, --gold-*, --spirit) so
   it reads as this game's own opening page, not a bolted-on separate style.
   Depends on tokens.css only; loaded after decor.css, before print.css.
   ============================================================================ */

.aw-intro {
  position: fixed;
  inset: 0;
  z-index: var(--z-intro);
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    var(--noise-grain),
    radial-gradient(ellipse at 50% 30%, color-mix(in oklab, var(--spirit) 18%, var(--ink)) 0%, var(--ink) 70%);
  background-blend-mode: overlay, normal;
  overflow: hidden;
  padding: var(--space-6) var(--space-4);
}
.aw-intro[hidden] { display: none; }

.aw-intro-stage {
  position: relative;
  width: min(640px, 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.aw-intro-scene {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  text-align: center;
  animation: aw-intro-fade-in 900ms var(--ease-standard);
}
@keyframes aw-intro-fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.aw-intro-visual {
  width: min(52vw, 220px);
  height: min(52vw, 220px);
  border-radius: 50%;
  position: relative;
}

/* Scene 1 — origin: a slow double halo, like a constellation being traced */
.aw-intro-scene[data-visual="stars"] .aw-intro-visual {
  background: radial-gradient(circle at 50% 50%, var(--spirit-glow) 0%, transparent 65%);
}
.aw-intro-scene[data-visual="stars"] .aw-intro-visual::before,
.aw-intro-scene[data-visual="stars"] .aw-intro-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid color-mix(in oklab, var(--gold-leaf) 45%, transparent);
  animation: aw-intro-spin 14s linear infinite;
}
.aw-intro-scene[data-visual="stars"] .aw-intro-visual::after {
  inset: 18%;
  animation-duration: 20s;
  animation-direction: reverse;
  border-color: color-mix(in oklab, var(--gold-hi) 55%, transparent);
}
@keyframes aw-intro-spin { to { transform: rotate(360deg); } }

/* Scene 2 — the Bond: two points of light joined by a pulsing thread.
   Dots listed BEFORE the line in this background-image stack so they paint
   on top of it (earlier layers sit above later ones), reading as •——————•
   rather than the line swallowing them. */
.aw-intro-scene[data-visual="thread"] .aw-intro-visual {
  background:
    radial-gradient(circle 12px at 22% 50%, var(--gold-hi) 0%, var(--gold-hi) 45%, transparent 75%),
    radial-gradient(circle 12px at 78% 50%, var(--spirit) 0%, var(--spirit) 45%, transparent 75%),
    linear-gradient(0deg,
      transparent calc(50% - 1.5px), var(--gold-leaf) calc(50% - 1.5px),
      var(--gold-leaf) calc(50% + 1.5px), transparent calc(50% + 1.5px));
  background-repeat: no-repeat;
  animation: aw-intro-pulse 2.4s ease-in-out infinite;
}
@keyframes aw-intro-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.35); }
}

/* Scene 3 — the stakes: a kintsugi-style cracked gold seam over parchment */
.aw-intro-scene[data-visual="kintsugi"] .aw-intro-visual {
  background: var(--noise-grain-coarse), linear-gradient(155deg, var(--parchment) 0%, var(--parchment-shade) 100%);
  background-blend-mode: overlay, normal;
  border-radius: var(--radius-lg);
}
.aw-intro-scene[data-visual="kintsugi"] .aw-intro-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(115deg, transparent 46%, var(--gold-leaf) 49%, var(--gold-hi) 50%, var(--gold-leaf) 51%, transparent 54%),
    linear-gradient(35deg, transparent 62%, var(--gold-dim) 64%, var(--gold-leaf) 65%, transparent 68%);
}

/* Scene 4 — the handoff: light gathering into a single point (an egg, dawn) */
.aw-intro-scene[data-visual="dawn"] .aw-intro-visual {
  background: radial-gradient(circle at 50% 50%, var(--gold-hi) 0%, var(--spirit) 35%, transparent 70%);
  animation: aw-intro-gather 2.5s var(--ease-out-back) infinite;
}
@keyframes aw-intro-gather {
  0%, 100% { transform: scale(0.92); }
  50% { transform: scale(1.05); }
}

.aw-intro-copy { max-width: 52ch; }
.aw-intro-heading {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  color: var(--text-heading);
  letter-spacing: var(--ls-wide);
  margin: 0 0 var(--space-4);
}
.aw-intro-text {
  font-family: var(--font-scroll);
  font-size: var(--fs-lg);
  line-height: var(--lh-loose);
  color: var(--text-body);
  margin: 0;
}

.aw-intro-progress {
  position: absolute;
  bottom: var(--space-6);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: var(--space-2);
}
.aw-intro-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: color-mix(in oklab, var(--gold-leaf) 35%, transparent);
  transition: background var(--dur-base) var(--ease-standard);
}
.aw-intro-dot.is-active { background: var(--gold-hi); }

.aw-intro-controls {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  display: flex;
  gap: var(--space-3);
}
.aw-intro-skip, .aw-intro-next {
  font-family: var(--font-cinzel);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--text-muted);
  background: transparent;
  border: var(--border-gold-dim);
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
}
.aw-intro-skip:hover, .aw-intro-next:hover { color: var(--text-heading); border-color: var(--gold-hi); }
.aw-intro-next {
  color: var(--text-on-gold);
  background: var(--gold-leaf);
  border-color: var(--gold-leaf);
}

@media (max-width: 768px) {
  .aw-intro-heading { font-size: var(--fs-xl); }
  .aw-intro-text { font-size: var(--fs-base); }
  .aw-intro-controls { top: var(--space-4); right: var(--space-4); }
  .aw-intro-visual { width: min(48vw, 180px); height: min(48vw, 180px); }
}

@media (prefers-reduced-motion: reduce) {
  .aw-intro-scene,
  .aw-intro-visual,
  .aw-intro-visual::before,
  .aw-intro-visual::after {
    animation: none !important;
  }
}