/* auth-stage.css — backdrop of the PUBLIC auth stage, shared by the boot splash
   (/ → www_admin/index.php) and the login method picker (/auth/login).
   Aurora blobs + holographic perspective grid floor + rising particles, in the
   luxe-indigo login language. Promoted 2026-09-06 out of login.php's inline
   <style> when the splash became its second consumer (UI_GUIDELINES §10).

   Markup contract (the page keeps its own body background and lifts its
   content above z-index 0):
     <div class="bg-stage" aria-hidden="true">
       <div class="bg-blob b1"></div><div class="bg-blob b2"></div><div class="bg-blob b3"></div>
       <div class="bg-grid"></div>
       <div class="bg-particles">
         <span style="left:6%; animation-duration:15s; animation-delay:-2s;"></span> …
       </div>
     </div> */
.bg-stage { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }

/* drifting aurora blobs */
.bg-blob { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.42; will-change: transform; }
.bg-blob.b1 { width: 540px; height: 540px; top: -180px; left: -130px;
    background: radial-gradient(circle, rgba(99,102,241,0.55), transparent 72%); animation: blobDrift 34s ease-in-out infinite; }
.bg-blob.b2 { width: 600px; height: 600px; bottom: -220px; right: -150px;
    background: radial-gradient(circle, rgba(124,58,237,0.45), transparent 72%); animation: blobDrift 42s ease-in-out infinite reverse; }
.bg-blob.b3 { width: 420px; height: 420px; top: 44%; left: 52%;
    background: radial-gradient(circle, rgba(34,211,238,0.30), transparent 72%); animation: blobDrift 38s ease-in-out infinite; }
@keyframes blobDrift {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(18px, -16px) scale(1.05); }
}

/* holographic perspective grid floor */
.bg-grid {
    position: absolute; left: -25%; right: -25%; bottom: -12%; height: 62%;
    background-image:
        linear-gradient(rgba(99,102,241,0.14) 1px, transparent 1px),
        linear-gradient(90deg, rgba(99,102,241,0.14) 1px, transparent 1px);
    background-size: 46px 46px;
    transform: perspective(620px) rotateX(64deg);
    transform-origin: bottom center;
    mask-image: linear-gradient(to top, #000 0%, transparent 78%);
    -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 78%);
    animation: gridPan 16s linear infinite;
}
@keyframes gridPan { from { background-position: 0 0, 0 0; } to { background-position: 0 46px, 46px 0; } }

/* rising particles */
.bg-particles { position: absolute; inset: 0; }
.bg-particles span {
    position: absolute; bottom: -18px; width: 5px; height: 5px; border-radius: 50%;
    background: #6366f1; box-shadow: 0 0 10px rgba(99,102,241,0.8);
    opacity: 0; animation: floatUp linear infinite;
}
@keyframes floatUp {
    0% { transform: translateY(0) scale(0.5); opacity: 0; }
    12% { opacity: 0.65; }
    88% { opacity: 0.45; }
    100% { transform: translateY(-108vh) scale(1); transform: translateY(-108dvh) scale(1); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .bg-blob, .bg-grid, .bg-particles span { animation: none !important; }
    .bg-particles { display: none; }
}