:root {
  --login-splash-min: 1400ms;
}

body.login-lite {
  background:
    linear-gradient(180deg, rgba(5, 11, 21, 0.78), rgba(5, 11, 21, 0.92)),
    radial-gradient(580px 520px at 14% -10%, rgba(126, 165, 255, 0.18), transparent 70%),
    radial-gradient(460px 460px at 88% 110%, rgba(99, 240, 193, 0.14), transparent 78%),
    url('/sounds/images/background.jpg') center/cover no-repeat fixed;
}

.login-lite__wrapper {
  position: relative;
  z-index: 2;
}

.login-lite__card {
  backdrop-filter: blur(14px);
}

.login-lite__badge {
  font-size: 19px;
  font-weight: 900;
  box-shadow: 0 18px 36px rgba(255, 176, 82, 0.42), inset 0 1px 0 rgba(255,255,255,.24);
}

.login-lite__display {
  min-height: 54px;
}

.login-lite__keypad button {
  -webkit-tap-highlight-color: transparent;
}

.splash {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    linear-gradient(180deg, rgba(2, 4, 10, 0.9), rgba(2, 4, 10, 0.98)),
    url('/sounds/images/background.jpg') center/cover no-repeat;
  z-index: 99999;
  overflow: hidden;
}

.splash::before {
  content: "";
  position: absolute;
  inset: -28%;
  background:
    radial-gradient(900px 700px at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.09), transparent 60%),
    conic-gradient(from 0deg, rgba(255,255,255,.1), transparent 50%, rgba(255,255,255,.08), transparent 85%, rgba(255,255,255,.1));
  filter: blur(44px);
  animation: login-aurora 7s linear infinite;
  opacity: .9;
}

.splash::after {
  content: "";
  position: absolute;
  inset: -40%;
  background: radial-gradient(700px 600px at calc(var(--mx, 50%)) calc(var(--my, 50%)), rgba(255,255,255,.07), transparent 65%);
  filter: blur(36px);
  animation: login-pulse 3.4s ease-in-out infinite;
  opacity: .54;
}

.loader {
  position: relative;
  width: min(52vw, 204px);
  height: min(52vw, 204px);
  display: grid;
  place-items: center;
}

.ring {
  width: 62%;
  height: 62%;
}

.ring__track {
  stroke: rgba(255,255,255,.14);
  stroke-width: 8;
  fill: none;
}

.ring__arc {
  stroke: #fff;
  stroke-width: 8;
  stroke-linecap: round;
  fill: none;
  stroke-dasharray: 226;
  stroke-dashoffset: 180;
  transform-origin: 50% 50%;
  animation: login-spin 1.05s ease-in-out infinite;
}

.orbit {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
}

.orbit::before,
.orbit::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  background: #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(0deg) translate(72px);
  animation: login-orbit 2.2s linear infinite;
  box-shadow: 0 0 10px rgba(255,255,255,.9);
}

.orbit::after {
  width: 5px;
  height: 5px;
  opacity: .78;
  transform: translate(-50%, -50%) rotate(180deg) translate(52px);
  animation-duration: 1.8s;
}

.loader__text {
  position: absolute;
  bottom: 24px;
  left: 0;
  right: 0;
  text-align: center;
  font: 900 12px/1.15 'Orbitron', 'Roboto Mono', monospace;
  letter-spacing: .24em;
  text-transform: uppercase;
  background: linear-gradient(90deg, #777, #fff, #777);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-size: 220% 100%;
  animation: login-shimmer 2.2s linear infinite;
}

.loader__meta {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 160px;
  text-align: center;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(225, 236, 255, .72);
}

.splash--leave {
  animation: login-splash-out .58s cubic-bezier(.2,.8,.2,1) both;
}

#appMain {
  opacity: 0;
  filter: blur(18px);
  transform: translateY(18px) scale(.98);
  transition: opacity .6s ease, filter .6s ease, transform .6s ease;
}

#appMain.main--reveal {
  opacity: 1;
  filter: none;
  transform: none;
}

@keyframes login-aurora { to { transform: rotate(360deg) scale(1.04); } }
@keyframes login-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.035); } }
@keyframes login-spin {
  0% { stroke-dashoffset: 200; transform: rotate(0deg); }
  50% { stroke-dashoffset: 110; }
  100% { stroke-dashoffset: 200; transform: rotate(360deg); }
}
@keyframes login-orbit { to { transform: translate(-50%, -50%) rotate(360deg) translate(72px); } }
@keyframes login-shimmer { to { background-position: 220% 0; } }
@keyframes login-splash-out { to { filter: blur(24px) saturate(.95); opacity: 0; transform: translateY(-14px) scale(.98); } }

@media (prefers-reduced-motion: reduce) {
  .splash::before,
  .splash::after,
  .ring__arc,
  .orbit::before,
  .orbit::after,
  .loader__text {
    animation: none;
  }

  .splash--leave,
  #appMain {
    transition: none;
    animation: none;
  }
}