.login-transition{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;overflow:hidden;pointer-events:none;visibility:hidden;opacity:0;background:radial-gradient(circle at 50% 50%,#fff 0%,#dcfaff 22%,#bfe5f1 53%,#f7d1d7 100%);transition:opacity .22s ease,visibility .22s}
.login-transition.active{visibility:visible;opacity:1;pointer-events:auto}
.login-transition::before,.login-transition::after{content:"";position:absolute;inset:-45%;border-radius:50%;border:1px solid rgba(255,255,255,.85);box-shadow:0 0 45px rgba(255,255,255,.8);transform:scale(.12);opacity:0}
.login-transition.active::before{animation:login-portal 1s cubic-bezier(.1,.65,.2,1) both}
.login-transition.active::after{animation:login-portal 1s .16s cubic-bezier(.1,.65,.2,1) both}
.login-transition-core{position:relative;z-index:2;display:grid;justify-items:center;gap:8px;color:#174451;text-shadow:0 2px 18px #fff;transform:scale(.6);opacity:0}
.login-transition.active .login-transition-core{animation:login-core .9s cubic-bezier(.15,.7,.2,1) both}
.login-transition-core .transition-mark{position:static;display:block;width:86px;height:86px;object-fit:cover;border-radius:24px;background:#fff;box-shadow:0 14px 36px rgba(36,77,137,.24),0 0 32px rgba(255,255,255,.9);animation:none}
.login-transition-core strong{font-size:clamp(32px,6vw,70px);letter-spacing:.14em;font-weight:800}
.login-transition-core small{font-size:14px;letter-spacing:.4em}
.login-transition-particles{position:absolute;inset:0;display:grid;place-items:center}
.login-transition-particles i{position:absolute;width:var(--size);height:var(--size);border-radius:50%;background:#fff;box-shadow:0 0 10px 3px #e34fba,0 0 22px 7px #8ce8f4;opacity:0}
.login-transition.active .login-transition-particles i{animation:login-spark .95s var(--delay) ease-out both}
@keyframes login-portal{10%{opacity:.9}100%{transform:scale(1.45);opacity:0}}
@keyframes login-core{0%{opacity:0;transform:scale(.55) rotate(-8deg)}35%{opacity:1;transform:scale(1.07)}100%{opacity:1;transform:scale(1)}}
@keyframes login-spark{0%{opacity:0;transform:translate(0,0) scale(.3)}20%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1.4)}}
@media(prefers-reduced-motion:reduce){.login-transition,.login-transition *{animation:none!important;transition:none!important}}