.traffic-radar {
  left: 50%;
  top: 50%;
  width: min(680px, 94vw);
  transform: translate(-50%, -50%);
  animation: centered-radar-in .9s ease both;
  transition: opacity .75s ease, filter .75s ease, transform .75s ease;
}

.traffic-plane span { font-size: 28px; }
.traffic-plane small { font-size: 11px; }
.radar-center-pulse { width: 14px; height: 14px; margin: -7px; }

.splash-brand-stage {
  position: relative;
  z-index: 2;
  width: 540px;
  height: 510px;
  display: grid;
  place-items: center;
}

.splash-brand-stage .brand {
  position: relative;
  z-index: 2;
}

.splash-logo-circle {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  width: 500px;
  height: 500px;
  border: 1px solid rgba(253, 170, 0, .18);
  border-top-color: rgba(253, 170, 0, .78);
  border-left-color: rgba(253, 170, 0, .38);
  border-radius: 50%;
  background: transparent;
  box-shadow: 0 0 26px rgba(253, 170, 0, .035);
  transform: translate(-50%, -50%);
  animation: splash-ring-clockwise 18s linear infinite;
}

.splash-logo-circle::before,
.splash-logo-circle::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(253, 170, 0, .16);
  border-right-color: rgba(253, 170, 0, .7);
  border-bottom-color: rgba(253, 170, 0, .34);
  border-radius: 50%;
  inset: 40px;
  transform-origin: center;
  animation: splash-ring-counterclockwise 14s linear infinite;
}

.splash-logo-circle::after {
  inset: 80px;
  opacity: .82;
  border-right-color: rgba(253, 170, 0, .16);
  border-bottom-color: rgba(253, 170, 0, .25);
  border-top-color: rgba(253, 170, 0, .72);
  animation: splash-ring-inner-clockwise 11s linear infinite;
}

.splash-logo-circle span {
  position: absolute;
  z-index: 2;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #FDAA00;
  box-shadow: 0 0 7px rgba(253, 170, 0, .9), 0 0 18px rgba(253, 170, 0, .45);
  animation: splash-dot-pulse 3.6s ease-in-out infinite;
}

.splash-logo-circle span:nth-child(1) { top: 57px; right: 70px; }
.splash-logo-circle span:nth-child(2) { bottom: 42px; left: 121px; animation-delay: 1.2s; }
.splash-logo-circle span:nth-child(3) { top: calc(50% - 3px); left: -4px; animation-delay: 2.4s; }

@keyframes splash-ring-clockwise {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes splash-ring-counterclockwise {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}

@keyframes splash-ring-inner-clockwise {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes splash-dot-pulse {
  0%, 65%, 100% { opacity: .38; transform: scale(.78); }
  76% { opacity: 1; transform: scale(1.35); }
  88% { opacity: .75; transform: scale(1); }
}

.auth-visual .login-radar {
  z-index: 1;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  top: 50%;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.auth-visual .login-radar > img { object-fit: cover; object-position: center; }

.auth-visual .auth-badge { z-index: 3; }

.traffic-plane.p1 { animation-duration: 15s; }
.traffic-plane.p2 { animation-duration: 17s; animation-delay: -6s; }
.traffic-plane.p3 { animation-duration: 14s; animation-delay: -3s; }
.traffic-plane.p4 { animation-duration: 18s; animation-delay: -10s; }
.traffic-plane.p5 { animation-duration: 16s; animation-delay: -8s; }

.splash-screen .traffic-radar + .splash-brand-stage .brand {
  opacity: 0;
  transform: scale(.82);
  animation: none;
  transition: opacity .8s ease, transform .8s ease;
}

.traffic-radar ~ p,
.traffic-radar ~ .splash-loader {
  opacity: 0;
  transition: opacity .8s ease;
}

.splash-screen.brand-phase .traffic-radar {
  opacity: 0;
  filter: blur(6px);
  transform: translate(-50%, -50%) scale(.94);
  pointer-events: none;
}

.splash-screen.brand-phase .traffic-radar + .splash-brand-stage .brand {
  opacity: 1;
  transform: scale(1.08);
}

.splash-screen.brand-phase .traffic-radar ~ p,
.splash-screen.brand-phase .traffic-radar ~ .splash-loader {
  opacity: 1;
}

@keyframes centered-radar-in {
  from { opacity: 0; transform: translate(-50%, -50%) scale(.93); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@media (max-width: 620px) {
  .traffic-radar { width: 96vw; }
  .traffic-plane span { font-size: 22px; }
  .traffic-plane small { font-size: 8px; }
  .splash-screen.brand-phase .traffic-radar + .splash-brand-stage .brand { transform: scale(.84); }
  .splash-brand-stage { width: 94vw; height: 370px; }
  .splash-logo-circle { width: 350px; height: 350px; }
  .splash-logo-circle::before { inset: 29px; }
  .splash-logo-circle::after { inset: 58px; }
  .splash-logo-circle span:nth-child(1) { top: 39px; right: 49px; }
  .splash-logo-circle span:nth-child(2) { bottom: 29px; left: 84px; }
}

@media (prefers-reduced-motion: reduce) {
  .traffic-plane { animation-play-state: paused; }
  .splash-logo-circle,.splash-logo-circle::before,.splash-logo-circle::after,.splash-logo-circle span { animation: none; }
}