/* One logo, one soft highlight and a short hand-off. */
html body.login-screen #splash.login-logo-transition { background:radial-gradient(ellipse at 50% 43%,#194b42 0%,#103a34 42%,#092923 100%); padding:32px 24px; overflow:hidden; }
html body.login-screen #splash.login-logo-transition::before { display:none; }
.login-logo-transition .login-transition-card { --login-flow-duration:2.8s; width:min(100%,400px); }
.login-logo-stage { position:relative; display:grid; place-items:center; height:190px; margin-bottom:30px; }
.login-logo-halo { position:absolute; width:340px; max-width:100%; height:260px; border-radius:50%; background:radial-gradient(ellipse,#75dfc025,transparent 68%); filter:blur(15px); animation:login-logo-light 2s ease-out both; }
.login-logo-mark { position:relative; overflow:hidden; padding:23px 28px; border:1px solid #ffffffcc; border-radius:20px; background:#fff; box-shadow:0 20px 60px #031e1833; animation:login-logo-reveal .85s cubic-bezier(.16,1,.3,1) both,login-logo-glow 1.6s .3s ease-out both; }
html body.login-screen .login-logo-transition .system-brand-logo { width:225px; height:auto; margin:0; padding:0; background:none; border-radius:0; animation:login-logo-unveil .7s .16s cubic-bezier(.2,.7,.2,1) both; }
.login-logo-mark::after { content:''; pointer-events:none; position:absolute; inset:-40%; width:35%; background:linear-gradient(90deg,transparent,#b7ffe844,transparent); transform:translateX(-160%) skewX(-20deg); animation:login-logo-sheen 1.15s .45s ease-in-out both; }
.login-logo-transition .login-transition-card h2 { font-size:28px; font-weight:500; line-height:1.2; letter-spacing:-.035em; margin:0 0 12px; color:#f0faf5; animation:login-arrive .55s .25s both; }
.login-logo-transition .login-transition-card p { font-size:12px; line-height:1.6; color:#b3cfc2; animation:login-arrive .55s .35s both; }
.login-logo-transition .brand-loading-dots { margin:24px auto 0; }
.login-logo-transition .brand-loading-dots span { background:#75dfc0; }
@keyframes login-logo-reveal { from{opacity:0;transform:translateY(18px) perspective(600px) rotateX(7deg) scale(.94);filter:blur(3px)} to{opacity:1;transform:translateY(0) perspective(600px) rotateX(0) scale(1);filter:blur(0)} }
@keyframes login-logo-unveil { from{opacity:0;clip-path:inset(0 100% 0 0)} to{opacity:1;clip-path:inset(0 0 0 0)} }
@keyframes login-logo-glow { 0%,100%{box-shadow:0 20px 60px #031e1833} 55%{box-shadow:0 20px 60px #031e1833,0 0 0 1px #75dfc080,0 0 45px #75dfc028} }
@keyframes login-logo-light { from{opacity:0;transform:scale(.8)} to{opacity:1;transform:scale(1)} }
@keyframes login-logo-sheen { from{left:-40%} to{left:180%} }
@media(max-width:480px) {
    .login-logo-stage { height:165px; margin-bottom:25px; }
    .login-logo-mark { padding:21px 25px; border-radius:17px; }
    html body.login-screen .login-logo-transition .system-brand-logo { width:195px; }
    .login-logo-transition .login-transition-card h2 { font-size:26px; }
}
@media(prefers-reduced-motion:reduce) {
    html body.login-screen .login-logo-transition *, html body.login-screen .login-logo-transition *::after { animation:none !important; transition:none !important; }
    .login-logo-mark::after { display:none; }
}