/* ===== AEOS App Loader — EXACT copy used by Home/Register ===== */

#app-loader{
  position:fixed; inset:0; z-index:9999;
  background: radial-gradient(900px 600px at 70% -10%, rgba(59,130,246,.16), transparent 60%),
              linear-gradient(160deg, #071021 0%, #0b1530 40%, var(--slate-900, #0f172a) 100%);
  display:grid; place-items:center;
  transition: opacity .45s ease, visibility .45s ease;
}

#app-loader.hide{
  opacity:0; visibility:hidden;
}

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

/* logo + glow pulse (1.6s) */
.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));
}

/* orbiting ring */
.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;
}

/* animations */
@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); }
}

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