/* ================================================================
   Auth Background Effects (prototype on login page)
   Adds animated gradient glows + floating particles behind the card.
   Reduced intensity vs landing page: 4 particles, slower animations.
   ================================================================ */

/* Override the static grid background with a richer gradient */
.auth-page.auth-page-enhanced {
    background:
        radial-gradient(ellipse at top, rgba(102, 126, 234, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at bottom right, rgba(167, 139, 250, 0.10) 0%, transparent 50%),
        var(--auth-bg, #0a0f1a);
    overflow: hidden;
}

/* Glow blobs */
.auth-bg-glow {
    position: fixed;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.35;
    pointer-events: none;
    z-index: 0;
}

.auth-bg-glow-1 {
    top: -150px;
    left: -100px;
    width: 500px;
    height: 500px;
    background: rgba(102, 126, 234, 0.5);
    animation: auth-float 24s ease-in-out infinite;
}

.auth-bg-glow-2 {
    bottom: -200px;
    right: -150px;
    width: 600px;
    height: 600px;
    background: rgba(167, 139, 250, 0.4);
    animation: auth-float 30s ease-in-out infinite reverse;
}

@keyframes auth-float {
    0%, 100% { transform: translate(0, 0); }
    50%      { transform: translate(50px, 30px); }
}

/* Floating particles (4 total — half the landing page count) */
.auth-particles {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.auth-particles span {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(167, 139, 250, 0.55);
    border-radius: 50%;
    box-shadow: 0 0 12px rgba(167, 139, 250, 0.7);
    animation: auth-rise 22s linear infinite;
}

.auth-particles span:nth-child(1) { left: 15%; animation-delay: 0s;  animation-duration: 24s; }
.auth-particles span:nth-child(2) { left: 40%; animation-delay: 6s;  animation-duration: 20s;
    background: rgba(96, 165, 250, 0.55); box-shadow: 0 0 12px rgba(96, 165, 250, 0.7); }
.auth-particles span:nth-child(3) { left: 65%; animation-delay: 3s;  animation-duration: 26s;
    background: rgba(34, 211, 238, 0.55); box-shadow: 0 0 12px rgba(34, 211, 238, 0.7); }
.auth-particles span:nth-child(4) { left: 85%; animation-delay: 10s; animation-duration: 22s; }

@keyframes auth-rise {
    0%   { transform: translateY(100vh) scale(0.5); opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { transform: translateY(-10vh) scale(1.2); opacity: 0; }
}

/* Ensure the auth card stays above the background effects */
.auth-page.auth-page-enhanced .auth-card {
    position: relative;
    z-index: 10;
}

/* Mobile: tone down the glows so they don't dominate */
@media (max-width: 640px) {
    .auth-bg-glow {
        filter: blur(80px);
        opacity: 0.25;
    }
    .auth-bg-glow-1 { width: 300px; height: 300px; }
    .auth-bg-glow-2 { width: 400px; height: 400px; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .auth-bg-glow,
    .auth-particles span {
        animation: none !important;
    }
    .auth-particles span { opacity: 0.5; }
}