.loginTransition {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 32px 20px;
  color: #f4fbfb;
  background: radial-gradient(ellipse at 50% 42%, rgba(20, 174, 184, .14), transparent 38%), linear-gradient(145deg, #101c27, #172a36 52%, #10232d);
  animation: ziiiTransitionAppear .22s ease-out both;
  font-family: 'DM Sans', 'Segoe UI', sans-serif;
}
.loginTransition::before,
.loginTransition::after { position: absolute; width: min(76vw, 680px); aspect-ratio: 1; border: 1px solid rgba(101, 215, 207, .08); border-radius: 50%; content: ''; pointer-events: none; }
.loginTransition::before { transform: scale(1.28); }
.loginTransition::after { transform: scale(1.72); border-color: rgba(101, 215, 207, .045); }
.loginTransitionGlow { position: absolute; width: 300px; height: 300px; border-radius: 50%; background: rgba(20, 174, 184, .12); filter: blur(90px); pointer-events: none; }
.loginTransitionGlowOne { top: -190px; left: -100px; }
.loginTransitionGlowTwo { right: -150px; bottom: -210px; background: rgba(77, 199, 179, .1); }
.loginTransitionContent { position: relative; z-index: 1; display: flex; width: min(100%, 420px); flex-direction: column; align-items: center; text-align: center; animation: ziiiTransitionLift .46s cubic-bezier(.2,.75,.25,1) both; }
.loginTransitionBrand { display: flex; align-items: center; gap: 3px; height: 45px; margin-bottom: 35px; }
.loginTransitionBrand img { display: block; width: 39px; height: 39px; object-fit: contain; filter: brightness(0) invert(1); }
.loginTransitionBrand span { color: #65d7cf; font-size: 22px; font-weight: 700; letter-spacing: -1.3px; }
.loginTransitionVisual { position: relative; display: grid; width: 132px; height: 132px; place-items: center; margin-bottom: 28px; }
.loginTransitionHome { position: relative; z-index: 1; display: grid; width: 66px; height: 66px; place-items: center; border: 1px solid rgba(111, 220, 210, .5); border-radius: 22px; background: linear-gradient(145deg, rgba(48, 157, 160, .34), rgba(24, 66, 77, .5)); box-shadow: 0 0 40px rgba(33, 195, 185, .17), inset 0 1px rgba(255,255,255,.12); animation: ziiiTransitionPulse 2.3s ease-in-out infinite; }
.loginTransitionHome svg { width: 35px; stroke: #8ce5d9; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.loginTransitionOrbit { position: absolute; inset: 7px; border: 1px solid rgba(116, 215, 206, .18); border-radius: 50%; }
.loginTransitionOrbitOuter { animation: ziiiTransitionOrbit 9s linear infinite; }
.loginTransitionOrbitOuter::before,
.loginTransitionOrbitInner::before { position: absolute; top: 13%; left: 13%; width: 7px; height: 7px; border-radius: 50%; background: #54d2c2; box-shadow: 0 0 12px rgba(84,210,194,.9); content: ''; }
.loginTransitionOrbitInner { inset: 23px; border-style: dashed; border-color: rgba(116, 215, 206, .2); animation: ziiiTransitionOrbit 13s linear reverse infinite; }
.loginTransitionOrbitInner::before { top: auto; right: 10%; bottom: 13%; left: auto; width: 5px; height: 5px; background: #b0ece3; }
.loginTransitionSignal { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #a4e8df; opacity: 0; animation: ziiiTransitionSignal 1.8s ease-out infinite; }
.loginTransitionSignalOne { top: 12px; left: 37px; }
.loginTransitionSignalTwo { top: 43px; right: 8px; animation-delay: .55s; }
.loginTransitionSignalThree { bottom: 11px; left: 53px; animation-delay: 1.1s; }
.loginTransitionEyebrow { margin: 0 0 9px; color: #70d8ce; font-size: 10px; font-weight: 800; letter-spacing: .17em; }
.loginTransitionContent h1 { margin: 0; color: #f6fbfb; font-size: clamp(25px, 5vw, 32px); font-weight: 700; letter-spacing: -.035em; }
.loginTransitionMessage { margin: 10px 0 22px; color: rgba(226, 241, 243, .72); font-size: 14px; line-height: 1.55; }
.loginTransitionProgress { width: 150px; height: 3px; overflow: hidden; border-radius: 10px; background: rgba(203, 236, 234, .13); }
.loginTransitionProgress span { display: block; width: 42%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #4ac9c0, #a7eddb); box-shadow: 0 0 12px rgba(74, 201, 192, .6); animation: ziiiTransitionProgress 1.3s ease-in-out infinite; }
.loginTransitionFooter { position: absolute; bottom: max(22px, env(safe-area-inset-bottom)); z-index: 1; margin: 0; color: rgba(215, 235, 237, .42); font-size: 10px; letter-spacing: .035em; }
.loginTransitionFooter span { padding: 0 5px; color: #58cfc5; }
@keyframes ziiiTransitionAppear { from { opacity: 0; } to { opacity: 1; } }
@keyframes ziiiTransitionLift { from { opacity: 0; transform: translateY(10px) scale(.99); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes ziiiTransitionOrbit { to { transform: rotate(360deg); } }
@keyframes ziiiTransitionPulse { 50% { transform: scale(1.04); box-shadow: 0 0 52px rgba(33, 195, 185, .25), inset 0 1px rgba(255,255,255,.12); } }
@keyframes ziiiTransitionSignal { 0% { opacity: 0; transform: scale(.5); } 25% { opacity: .85; } 100% { opacity: 0; transform: scale(2.2); } }
@keyframes ziiiTransitionProgress { 0% { transform: translateX(-120%); } 100% { transform: translateX(260%); } }
@media (max-width: 520px) {
  .loginTransition { padding: 24px 22px; }
  .loginTransitionBrand { margin-bottom: 26px; }
  .loginTransitionVisual { width: 116px; height: 116px; margin-bottom: 24px; }
  .loginTransitionHome { width: 60px; height: 60px; border-radius: 19px; }
  .loginTransitionMessage { max-width: 290px; font-size: 13px; }
  .loginTransitionFooter { bottom: max(18px, env(safe-area-inset-bottom)); font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .loginTransition, .loginTransitionContent, .loginTransitionOrbit, .loginTransitionHome, .loginTransitionSignal, .loginTransitionProgress span { animation: none !important; }
  .loginTransitionSignal { display: none; }
}