/* 开场序列 */
.intro-playing { overflow: hidden; }

.intro {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 18%, rgba(207, 74, 43, 0.08), transparent 60%),
    var(--bg-deep);
  transition: opacity 0.6s var(--ease-out);
}
.intro.intro-out { opacity: 0; pointer-events: none; }

/* 下沉词场 */
.intro-field { position: absolute; inset: 0; pointer-events: none; }
.intro-field span {
  position: absolute;
  transform: translateY(-14px);
  color: var(--faint);
  font-family: var(--font-body);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.7s var(--ease-out), transform 1.1s var(--ease-out);
  transition-delay: var(--d);
}
.intro.stage-field .intro-field span { opacity: 0.5; transform: none; }
.intro.stage-sink .intro-field span {
  opacity: 0;
  transform: translateY(160px);
  color: var(--cinnabar-deep);
}

/* 中央文案 */
.intro-center { position: relative; z-index: 1; padding: 0 24px; text-align: center; max-width: 720px; }
.intro-kicker {
  margin: 0 0 26px;
  font: 11px var(--font-mono); letter-spacing: 0.34em; color: var(--muted);
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.7s, transform 0.7s var(--ease-out);
}
.intro-line {
  margin: 0;
  font: 600 clamp(26px, 4.4vw, 46px)/1.7 var(--font-kai);
  color: var(--paper);
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.9s, transform 0.9s var(--ease-out);
}
.intro.stage-line .intro-kicker,
.intro.stage-line .intro-line { opacity: 1; transform: none; }

.intro-stat {
  margin-top: clamp(30px, 6vh, 60px);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.8s, transform 0.8s var(--ease-out);
}
.intro.stage-field .intro-stat { opacity: 1; transform: none; }
.intro-stat b {
  font: 600 clamp(64px, 12vw, 132px)/0.9 var(--font-display);
  color: var(--cinnabar);
  text-shadow: 0 0 60px rgba(207, 74, 43, 0.35);
  font-variant-numeric: tabular-nums;
}
.intro-stat span { font: 12px var(--font-mono); letter-spacing: 0.16em; color: var(--muted); }

.intro-enter {
  margin: clamp(26px, 5vh, 48px) 0 0;
  font: 14px var(--font-kai); letter-spacing: 0.3em; color: var(--bronze);
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.8s, transform 0.8s var(--ease-out);
}
.intro.stage-enter .intro-enter { opacity: 1; transform: none; }

.intro-skip {
  position: absolute; top: 22px; right: 24px; z-index: 2;
  padding: 8px 16px;
  border: 1px solid var(--hairline-strong); border-radius: 3px;
  background: transparent; color: var(--muted);
  font: 11px var(--font-mono); letter-spacing: 0.14em; cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.intro-skip:hover { color: var(--paper); border-color: var(--paper); }

/* 收尾扫描擦除 */
.intro-wipe {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(105deg,
    transparent 0 42%,
    rgba(207, 74, 43, 0.85) 47%,
    var(--paper) 50%,
    rgba(207, 74, 43, 0.85) 53%,
    transparent 58%);
  transform: translateX(-110%); opacity: 0;
}
.intro.stage-enter .intro-wipe { animation: introWipe 0.7s 0.5s var(--ease-out) forwards; }
@keyframes introWipe {
  0% { opacity: 0; transform: translateX(-110%); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translateX(110%); }
}

/* 重播入口 */
.intro-replay {
  position: fixed; left: 16px; bottom: 14px; z-index: 60;
  padding: 6px 12px;
  border: 1px solid var(--hairline); border-radius: 3px;
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  color: var(--faint); font: 10px var(--font-mono); letter-spacing: 0.1em;
  cursor: pointer; opacity: 0.55;
  transition: opacity 0.2s, color 0.2s, border-color 0.2s;
}
.intro-replay:hover { opacity: 1; color: var(--cinnabar); border-color: var(--cinnabar); }
.intro-playing .intro-replay { display: none; }

@media (prefers-reduced-motion: reduce) {
  .intro { transition: none; }
  .intro-field span, .intro-kicker, .intro-line, .intro-stat, .intro-enter { transition: none; }
}
