/* "Loading your algorithms" after a desktop login and a page opening from Home (login_loading.js, al-load-). The
   ring echoes the portal's blue glow; the title uses the welcome title's font (Oxanium, loaded by welcome_hero.css). */
.al-load { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
           gap: 14px; pointer-events: none; color: #e8e8e8; text-align: center; padding: 0 16px;
           background: radial-gradient(circle at 50% 46%, rgba(20, 40, 60, 0.95) 0%, rgb(0, 0, 0) 62%);
           opacity: 1; transition: opacity 380ms ease; }
.al-load.out { opacity: 0; }
.al-load-ring { position: relative; width: 92px; height: 92px; margin-bottom: 8px; }
.al-load-ring i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid transparent; }
.al-load-ring i:first-child { border-top-color: #4be9fa; border-right-color: rgba(75, 233, 250, 0.35);
                              box-shadow: 0 0 22px rgba(75, 233, 250, 0.25); animation: al-load-spin 1.1s linear infinite; }
.al-load-ring i:last-child { inset: 14px; border-bottom-color: #6f7cff; border-left-color: rgba(111, 124, 255, 0.35);
                             animation: al-load-spin 1.7s linear infinite reverse; }
.al-load-t { font-family: 'Oxanium', 'Segoe UI', sans-serif; font-size: 1.35rem; letter-spacing: .6px; color: #cfefff;
             text-shadow: 0 0 18px rgba(75, 233, 250, 0.35); }
.al-load-s { font-size: .86rem; color: #9fb3c8; animation: al-load-breathe 2.4s ease-in-out infinite; }
/* a page opening (2026-10-29): the same ring in the body area (top set inline under the header) on the app's own
   background; the old page fades out, so it reads as the blank new page loading */
.al-load.al-page { background: radial-gradient(circle at 50% 42%, rgba(0, 0, 0, 0.38) 0%, rgba(0, 0, 0, 0) 38%); }
#body.al-busy > * { opacity: 0 !important; pointer-events: none !important; transition: opacity 200ms ease; }
@keyframes al-load-spin { to { transform: rotate(360deg); } }
@keyframes al-load-breathe { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .al-load-ring i, .al-load-s { animation: none; }
}