/* ---- 天 transition (no inline styles, no inline scripts: CSP safe) ---- */
:root{--tx-ink:#05070d;--tx-glow:rgba(59,130,255,.38);--tx-accent:#5ad7ff;--tx-line:#3b82ff}
html[data-dir="blue-team"]{--tx-accent:#5ad7ff;--tx-line:#3b82ff}
html[data-dir="lab"]{--tx-accent:#9a8cff;--tx-line:#7a6bff}
html[data-dir="network"]{--tx-accent:#6aa8ff;--tx-line:#2563eb}
html[data-dir="dojo"]{--tx-accent:#e8edff;--tx-line:#5ad7ff}
.tx{position:fixed;inset:0;z-index:99999;pointer-events:none;visibility:hidden;contain:strict}
.tx-veil{position:absolute;inset:0;opacity:0;background:radial-gradient(60% 60% at 50% 50%,var(--tx-glow),transparent 70%),var(--tx-ink)}
.tx-glyph{position:absolute;left:50%;top:50%;width:min(46vmin,420px);height:auto;color:var(--tx-accent);opacity:0;transform:translate(-50%,-50%);will-change:transform,opacity}
.tx-slash{position:absolute;top:50%;left:-30%;width:160%;height:3px;opacity:0;background:linear-gradient(90deg,transparent,var(--tx-accent),var(--tx-line),transparent);box-shadow:0 0 18px var(--tx-line);transform:translateY(-50%) rotate(-12deg) translateX(-100%)}
html.tx-leave .tx,html.tx-reveal .tx{visibility:visible}
html.tx-leave .tx-veil{animation:txVeilIn 200ms ease-out forwards}
html.tx-leave .tx-glyph{animation:txGlyphIn 340ms cubic-bezier(.2,.8,.2,1) forwards}
html.tx-leave .tx-slash{animation:txSlash 340ms ease-in forwards}
html.tx-reveal .tx-veil{opacity:1;animation:txVeilOut 420ms 140ms ease-in forwards}
html.tx-reveal .tx-glyph{opacity:1;transform:translate(-50%,-50%) scale(1);animation:txGlyphOut 520ms cubic-bezier(.6,0,.9,.35) forwards}
html.tx-reveal .tx-slash{animation:txSlash 260ms ease-out forwards}
@keyframes txVeilIn{to{opacity:1}}
@keyframes txVeilOut{to{opacity:0}}
@keyframes txGlyphIn{from{opacity:0;transform:translate(-50%,-50%) scale(.55)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes txGlyphOut{from{opacity:1;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-50%) scale(16)}}
@keyframes txSlash{0%{opacity:1;transform:translateY(-50%) rotate(-12deg) translateX(-100%)}100%{opacity:1;transform:translateY(-50%) rotate(-12deg) translateX(100%)}}
@media (prefers-reduced-motion:reduce){.tx{display:none!important}}