/* Anchor login/auth ambient background.
   Pure CSS replacement for particles.js — a few GPU-composited
   transform/opacity animations instead of per-frame canvas physics. */

.auth-bg-fx {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: radial-gradient(ellipse at 20% 20%, #333d4a 0%, #2b333e 45%, #1c232b 100%);
}

.auth-bg-fx::before,
.auth-bg-fx::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.28;
    will-change: transform;
}

.auth-bg-fx::before {
    width: 55vmax;
    height: 55vmax;
    left: -15vmax;
    top: -15vmax;
    background: radial-gradient(circle, #d9ac3f 0%, transparent 70%);
    animation: auth-drift-a 26s ease-in-out infinite alternate;
}

.auth-bg-fx::after {
    width: 50vmax;
    height: 50vmax;
    right: -15vmax;
    bottom: -15vmax;
    background: radial-gradient(circle, #13a8a9 0%, transparent 70%);
    animation: auth-drift-b 32s ease-in-out infinite alternate;
}

@keyframes auth-drift-a {
    0%   { transform: translate(0, 0) scale(1); }
    100% { transform: translate(8vmax, 6vmax) scale(1.12); }
}

@keyframes auth-drift-b {
    0%   { transform: translate(0, 0) scale(1); }
    100% { transform: translate(-6vmax, -8vmax) scale(1.08); }
}

.auth-bg-sparkle {
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-image:
        radial-gradient(1.5px 1.5px at 10% 20%, rgba(255,255,255,.5), transparent),
        radial-gradient(1.5px 1.5px at 80% 15%, rgba(255,255,255,.4), transparent),
        radial-gradient(2px 2px at 25% 70%, rgba(217,172,63,.5), transparent),
        radial-gradient(1.5px 1.5px at 60% 80%, rgba(255,255,255,.35), transparent),
        radial-gradient(2px 2px at 90% 60%, rgba(19,232,233,.4), transparent),
        radial-gradient(1.5px 1.5px at 45% 35%, rgba(255,255,255,.4), transparent),
        radial-gradient(1.5px 1.5px at 70% 45%, rgba(255,255,255,.3), transparent),
        radial-gradient(2px 2px at 15% 55%, rgba(255,255,255,.3), transparent);
    animation: auth-twinkle 5s ease-in-out infinite alternate;
}

@keyframes auth-twinkle {
    0%   { opacity: .35; }
    100% { opacity: .9; }
}

@media (prefers-reduced-motion: reduce) {
    .auth-bg-fx::before,
    .auth-bg-fx::after,
    .auth-bg-sparkle {
        animation: none;
    }
}