/* ═════════ INTRO ═════════ */
.intro { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; overflow: hidden;
  background: var(--lock-bg); color: var(--ink); opacity: 1; transition: opacity .7s var(--ease-io); }
.intro::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 40% at 50% 50%, color-mix(in srgb, var(--blue) 22%, transparent), transparent 70%); opacity: 0; animation: bloom 2s var(--ease-out) forwards .1s; }
[data-theme='light'] .intro::before { display: none; }
@keyframes bloom { to { opacity: 1; } }

.intro__stack { position: relative; width: min(1100px, calc(100% - 40px)); text-align: center; display: grid; gap: clamp(22px, 4.5vh, 44px); }
.intro__l1 { font: 800 clamp(34px, 7.4vw, 116px)/1.04 var(--font-display); letter-spacing: -.045em; text-wrap: balance; }
.intro__l1 .w { display: inline-block; overflow: hidden; vertical-align: top; padding: .06em .04em .14em; margin: -.06em -.04em -.14em; }
.intro__l1 .wi { display: inline-block; transform: translateY(112%) rotate(3deg); filter: blur(10px); opacity: 0;
  transition: transform 1.1s var(--ease-out), filter 1.1s var(--ease-out), opacity .6s; }
.intro__l1 .is-in .wi, .intro__l1.is-in .wi { transform: none; filter: none; opacity: 1; }
.intro__l1 .hit { position: relative; z-index: 0; }
.intro__l1 .hit::before { content: ''; position: absolute; z-index: -1; inset: 10% 0 8%; background: var(--hit); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .8s var(--ease-io) .5s; }
.intro__l1.is-in .hit::before { transform: scaleX(1); }
.intro__l1.is-in .hit .wi { color: var(--on-hit); transition: color .3s .8s; }

.intro__horizon { position: relative; height: 2px; justify-self: center; width: 100%; }
.intro__beam { position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--blue-hot) 18%, #fff 50%, var(--blue-hot) 82%, transparent);
  transform: scaleX(1); opacity: 0; box-shadow: var(--glow); animation: beam .9s var(--ease-out) forwards .05s; }
[data-theme='light'] .intro__beam { background: var(--ink); height: 3px; top: -.5px; }
@keyframes beam { to { opacity: 1; } }
.intro__ring { position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border: 2px solid var(--blue-hot); border-radius: 50%;
  background: var(--bg); transform: scale(0); animation: ring-in .6s var(--ease-out) forwards .5s, ring-pulse 2.4s ease-in-out infinite 1.3s; }
[data-theme='light'] .intro__ring { border-color: var(--ink); }
.intro__ring::after { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: var(--blue); }
@keyframes ring-in { to { transform: scale(1); } }
@keyframes ring-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--blue) 60%, transparent); } 50% { box-shadow: 0 0 0 14px transparent; } }

.intro__l2 { font: 500 clamp(14px, 2.1vw, 26px)/1.4 var(--font-mono); letter-spacing: .04em; min-height: 1.4em; color: var(--ink-2); }
.intro__l2 .c { display: inline-block; transition: filter .5s, opacity .5s, color .4s; }
.intro__l2 .c.is-noise { color: var(--blue-hot); opacity: .55; filter: blur(1.6px); }
[data-theme='light'] .intro__l2 .c.is-noise { color: var(--blue); }
.intro__l2 .noise-word { position: relative; }
.intro__l2 .noise-word.is-struck { color: var(--ink-3); }
.intro__l2 .noise-word::after { content: ''; position: absolute; left: -2%; right: -2%; top: 54%; height: 3px; background: var(--hit); transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s var(--ease-io); }
.intro__l2 .noise-word.is-struck::after { transform: scaleX(1); }

.intro__skip { position: absolute; right: clamp(16px, 3vw, 36px); bottom: clamp(16px, 3vw, 32px); color: var(--ink-3); padding: 10px; opacity: 0; animation: bloom 1s 1.4s forwards; }
.intro__skip:hover { color: var(--ink); }

/* exit */
.intro.is-exit .intro__l1, .intro.is-exit .intro__l2 { opacity: 0; filter: blur(12px); transform: scale(1.04); transition: opacity .55s, filter .55s, transform .8s var(--ease-io); }
.intro.is-exit .intro__beam { transform: scaleX(0); transition: transform .5s var(--ease-io); animation: none; }
.intro.is-exit .intro__ring { animation: none; transform: scale(1); }
.intro.is-gone { opacity: 0; pointer-events: none; }

@media (prefers-reduced-motion: reduce) { .intro, .intro *, .intro::before { animation-duration: .01s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01s !important; transition-delay: 0s !important; } }
.intro__l2 .c { white-space: pre; }