/* Splash: the animated MCP logo, played once after a fresh log in (not on reload or unlock).
   Same artwork and timing as the training video intros. Charcoal in both themes, to match the brand card.
   Click or any key skips it. Nothing plays when the computer asks for reduced motion. */
.splash { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center;
  background: #212121; color: #fff; cursor: pointer; opacity: 1; transition: opacity .45s ease; }
.splash[hidden] { display: none; }
.splash::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 70% 60% at 50% 42%, rgba(255,255,255,.055), rgba(0,0,0,0) 70%); }
.splash.out { opacity: 0; }
.splin { position: relative; display: flex; flex-direction: column; align-items: center; padding: 0 16px; }
.spllogo { width: min(540px, 78vw); height: auto; overflow: visible; }
.spllogo .ink { fill: #fff; }
.splhi { margin-top: 44px; font: 600 clamp(22px, 3.2vw, 32px)/1.2 Figtree, Arial, sans-serif; letter-spacing: -.01em; text-align: center;
  color: #fff; opacity: 0; transform: translateY(14px); }
.splhi small { display: block; margin-top: 10px; font-size: 16px; font-weight: 400; color: #b9bec4; letter-spacing: 0; }

/* Before .play everything waits in its start position */
.spllogo .arcmask { stroke-dasharray: 1 1.02; stroke-dashoffset: 1; }
.spllogo .lt { opacity: 0; transform: translateY(260px); transform-box: fill-box; }
.spllogo .rule { transform-box: fill-box; transform-origin: 0 50%; transform: scaleX(0); }
.spllogo .gl { opacity: 0; }

.splash.play .arcmask { animation: spl-draw 1.15s cubic-bezier(.55,.05,.25,1) .15s forwards; }
.splash.play .lt { animation: spl-rise .75s cubic-bezier(.2,.75,.25,1) forwards; }
.splash.play .lt1 { animation-delay: .45s; } .splash.play .lt2 { animation-delay: .57s; } .splash.play .lt3 { animation-delay: .69s; }
.splash.play .rule { animation: spl-grow .7s cubic-bezier(.6,0,.2,1) 1.05s forwards; }
.splash.play .gl { animation: spl-fade .45s ease-out forwards; }
.splash.play .g0 { animation-delay: 1350ms; }
.splash.play .g1 { animation-delay: 1372ms; }
.splash.play .g2 { animation-delay: 1394ms; }
.splash.play .g3 { animation-delay: 1416ms; }
.splash.play .g4 { animation-delay: 1438ms; }
.splash.play .g5 { animation-delay: 1460ms; }
.splash.play .g6 { animation-delay: 1482ms; }
.splash.play .g7 { animation-delay: 1504ms; }
.splash.play .g8 { animation-delay: 1526ms; }
.splash.play .g9 { animation-delay: 1548ms; }
.splash.play .g10 { animation-delay: 1570ms; }
.splash.play .g11 { animation-delay: 1592ms; }
.splash.play .g12 { animation-delay: 1614ms; }
.splash.play .g13 { animation-delay: 1636ms; }
.splash.play .g14 { animation-delay: 1658ms; }
.splash.play .g15 { animation-delay: 1680ms; }
.splash.play .g16 { animation-delay: 1702ms; }
.splash.play .g17 { animation-delay: 1724ms; }
.splash.play .g18 { animation-delay: 1746ms; }
.splash.play .splhi { animation: spl-rise .7s cubic-bezier(.2,.75,.25,1) 1.8s forwards; }
@keyframes spl-draw { to { stroke-dashoffset: 0; } }
@keyframes spl-rise { to { opacity: 1; transform: none; } }
@keyframes spl-grow { to { transform: scaleX(1); } }
@keyframes spl-fade { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .splash { display: none !important; } }