/* ===== ML Intros: arcade page-transition intros (V3) ===== */
.mli{position:fixed;inset:0;z-index:99990;background:#07070a;overflow:hidden;transition:opacity .5s cubic-bezier(.22,.7,.24,1);cursor:crosshair}
.mli.out{opacity:0;pointer-events:none}
.mli canvas{position:absolute;inset:0;display:block}
.mli .scan{position:absolute;inset:0;pointer-events:none;opacity:.22;background:repeating-linear-gradient(0deg,rgba(0,0,0,.6) 0 2px,transparent 2px 4px);z-index:4}
.mli-hud{position:absolute;left:24px;top:22px;z-index:5;font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--green);text-shadow:0 0 12px rgba(0,195,107,.6);pointer-events:none}
.mli-title{position:absolute;left:0;right:0;bottom:8%;z-index:5;text-align:center;font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-dim);pointer-events:none}
.mli-skip{position:absolute;right:22px;top:18px;z-index:6;font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);background:rgba(7,7,10,.6);border:2px solid var(--line-2);border-radius:4px;padding:8px 12px;cursor:pointer}
.mli-skip:hover{color:var(--green);border-color:var(--green)}

/* ---- Kaiju city (CSS 3D) ---- */
.mli.kj{background:#06060a}
.kj-stage{position:absolute;inset:0;perspective:1100px;perspective-origin:50% 56%;overflow:hidden}
.kj-stage.shake{animation:kjshake .24s}
@keyframes kjshake{0%,100%{transform:translate(0,0) scale(1)}20%{transform:translate(-10px,6px) scale(1.012)}45%{transform:translate(9px,-7px) scale(1.01)}70%{transform:translate(-6px,8px) scale(1.006)}}
.kj-sky{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 92%,rgba(0,195,107,.10),transparent 55%),radial-gradient(ellipse at 20% 8%,rgba(154,69,255,.14),transparent 45%),linear-gradient(180deg,#05050a,#0a0a12 70%,#0d0d16)}
.kj-sky::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.18) 1px,transparent 1.5px);background-size:90px 70px;opacity:.5}
.kj-far{position:absolute;left:0;right:0;bottom:20%;height:34%;opacity:.6;background:repeating-linear-gradient(90deg,#0f0f17 0 60px,#12121b 60px 110px,#0d0d15 110px 150px,#131320 150px 220px,#0e0e16 220px 300px);-webkit-mask:linear-gradient(180deg,transparent 0,#000 35%);mask:linear-gradient(180deg,transparent 0,#000 35%)}
.kj-horizon{position:absolute;left:0;right:0;bottom:0;height:20%;border-top:2px solid rgba(0,195,107,.35);background-color:#0a0a11;background-image:repeating-linear-gradient(90deg,rgba(0,195,107,.08) 0 2px,transparent 2px 72px),linear-gradient(180deg,rgba(0,195,107,.12),#07070a 75%)}
.kj-scene{position:absolute;left:50%;bottom:20%;width:0;height:0;transform-style:preserve-3d;transform:rotateX(-7deg) rotateY(-28deg)}
.kj-bld{position:absolute;left:0;bottom:0;transform-style:preserve-3d}
.kj-ch{position:absolute;transform-style:preserve-3d;will-change:transform}
.kf{position:absolute;left:50%;top:50%;box-sizing:border-box;background:#14141c;border:1px solid rgba(255,255,255,.05);backface-visibility:hidden;overflow:hidden}
.kf.side{background:#0f0f16}
.kf.top{background:#1a1a24;border-color:rgba(255,255,255,.08)}
.kw{position:absolute;inset:0;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:5px;padding:7px 8px}
.kw b{display:block;background:#0b0b11;border-radius:1px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
.kw b.on{background:rgba(0,195,107,.55);box-shadow:0 0 8px rgba(0,195,107,.35)}
.kf.side .kw b.on{background:rgba(0,195,107,.32);box-shadow:none}
.kw b.fl{animation:kwfl 1.6s steps(2) infinite}
@keyframes kwfl{50%{opacity:.35}}
.kj-roof{position:absolute;width:12px;height:26px;background:#1d1d27;border:1px solid rgba(255,255,255,.08)}
.kj-mon{position:absolute;left:-380px;bottom:17.5%;width:320px;z-index:2;transition:left 1.25s cubic-bezier(.4,0,.2,1);animation:kjstomp .5s steps(2) infinite}
.kj-mon.in{left:calc(50% - 470px)}
.kj-mon.punch{animation:kjpunch .26s ease-out}
.kj-mon .pmon{color:var(--purple);filter:drop-shadow(0 0 26px rgba(154,69,255,.5))}
.kj-mon svg{width:100%;height:auto;display:block;shape-rendering:crispEdges}
.kj-shadow{position:absolute;left:8%;right:8%;bottom:-10px;height:22px;border-radius:50%;background:rgba(0,0,0,.6);filter:blur(6px)}
@keyframes kjstomp{0%{transform:translateY(0) rotate(-2deg)}100%{transform:translateY(-12px) rotate(2deg)}}
@keyframes kjpunch{0%{transform:translateX(0) rotate(0)}40%{transform:translateX(90px) rotate(-12deg)}100%{transform:translateX(0) rotate(0)}}
.kj-dust{position:absolute;inset:0;pointer-events:none;z-index:2}
.kj-dust i{position:absolute;bottom:19%;width:9px;height:9px;background:#3d3d4a;opacity:.9;animation:kjdust 1.1s ease-out forwards}
@keyframes kjdust{to{transform:translate(var(--dx),var(--dy)) scale(var(--s,2.4));opacity:0}}
.kj-flash{position:absolute;inset:0;pointer-events:none;z-index:3;opacity:0;transition:opacity .22s;background:radial-gradient(circle at 60% 55%,rgba(255,255,255,.55),rgba(154,69,255,.25) 40%,transparent 70%)}
.kj-flash.on{opacity:1;transition:none}
@media (prefers-reduced-motion:reduce){.kj-mon,.kj-stage.shake,.kw b.fl{animation:none!important}}

/* ---- level wipe (outro before navigating) ---- */
.mli-wipe{position:absolute;inset:0;z-index:7;pointer-events:none}
.mli-wipe .g1,.mli-wipe .g2{position:absolute;inset:0;display:grid;grid-template-columns:repeat(16,1fr);grid-template-rows:repeat(10,1fr)}
.mli-wipe i{display:block;background:var(--wc);transform:scale(0);transition:transform .26s cubic-bezier(.2,.8,.3,1)}
.mli-wipe .g2 i{background:#07070a}
.mli-wipe.on .g1 i{transform:scale(1.03)}
.mli-wipe.dark .g2 i{transform:scale(1.03)}
.mli-wipe .lbl{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);z-index:2;text-align:center;font-family:var(--mono);font-weight:600;font-size:.82rem;letter-spacing:.26em;text-transform:uppercase;color:#07070a;opacity:0;transition:opacity .25s .38s,color .2s}
.mli-wipe.on .lbl{opacity:1}
.mli-wipe.dark .lbl{color:var(--wc);transition-delay:.42s}