/* Shared "simple loader" — the exact loader experience used at `/`
   (views/home-redirect.ejs), reused as-is (same markup/timing/animation) on
   /v2/login and /v2/register. Not redesigned — copied verbatim from the
   source of truth and only adapted to fade-reveal the page underneath
   instead of navigating to a different URL. */

#app-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: #000;
  transition: opacity .45s ease, visibility .45s ease;
}

.loader-wrap {
  position: relative;
  width: 140px;
  height: 140px;
  display: grid;
  place-items: center;
}

.loader-logo {
  width: 86px;
  height: 86px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 35% 35%, rgba(59,130,246,.28), transparent 65%),
    radial-gradient(circle at 70% 70%, rgba(139,92,246,.22), transparent 70%),
    rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 0 18px rgba(59,130,246,.25);
  animation: logoPulse 1.6s ease-in-out infinite;
}

.loader-logo img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  border-radius: 14px;
  filter: drop-shadow(0 0 6px rgba(59,130,246,.35));
}

.loader-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(59,130,246,.18) inset;
  background:
    radial-gradient(closest-side, rgba(139,92,246,.12), transparent 60%),
    conic-gradient(from 0deg, rgba(59,130,246,0), rgba(59,130,246,.45), rgba(139,92,246,0));
  mask: radial-gradient(closest-side, transparent 58%, #000 60%);
  animation: ringSpin 2.8s linear infinite;
}

@keyframes logoPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 18px rgba(59,130,246,.25), 0 0 36px rgba(139,92,246,.15);
  }
  50% {
    transform: scale(1.04);
    box-shadow: 0 0 26px rgba(59,130,246,.55), 0 0 52px rgba(139,92,246,.35);
  }
}

@keyframes ringSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .loader-ring,
  .loader-logo {
    animation: none !important;
  }
}