/* ============================================================
   Auth pages — Aurora Borealis + Particle Constellation
   ============================================================ */

/* ---------- Base ---------- */
.auth-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background: #020617;
}

#auth-particles {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* ---------- Aurora beams ----------
   mix-blend-mode: screen makes colors blend like real light —
   overlapping beams produce beautiful secondary hues. */
.auth-aurora {
    position: absolute;
    border-radius: 50%;
    mix-blend-mode: screen;
    filter: blur(120px);
    will-change: transform, opacity;
    pointer-events: none;
}

/* Violet — top-left anchor */
.aurora-1 {
    width: 900px;
    height: 420px;
    top: -210px;
    left: 3%;
    background: rgba(109, 40, 217, 0.55);
    animation: aurora1 14s ease-in-out infinite alternate;
}

/* Electric blue — top-right */
.aurora-2 {
    width: 780px;
    height: 380px;
    top: -160px;
    right: -2%;
    background: rgba(29, 78, 216, 0.5);
    animation: aurora2 19s ease-in-out infinite alternate;
}

/* Teal — center-top */
.aurora-3 {
    width: 640px;
    height: 310px;
    top: -90px;
    left: 36%;
    background: rgba(8, 145, 178, 0.42);
    animation: aurora3 24s ease-in-out infinite alternate;
}

/* Pink — mid accent */
.aurora-4 {
    width: 520px;
    height: 260px;
    top: -130px;
    left: 22%;
    background: rgba(190, 24, 93, 0.3);
    animation: aurora4 17s ease-in-out infinite alternate;
}

@keyframes aurora1 {
    0%   { transform: translateX(0)     scaleX(1)    scaleY(1);   opacity: 0.7;  }
    40%  { transform: translateX(90px)  scaleX(1.12) scaleY(0.88); opacity: 0.95; }
    100% { transform: translateX(-70px) scaleX(0.94) scaleY(1.12); opacity: 0.78; }
}

@keyframes aurora2 {
    0%   { transform: translateX(0)      scaleX(1);    opacity: 0.62; }
    50%  { transform: translateX(-110px) scaleX(1.18); opacity: 0.85; }
    100% { transform: translateX(60px)   scaleX(0.88); opacity: 0.68; }
}

@keyframes aurora3 {
    0%   { transform: translate(0,    0)   scale(1);    opacity: 0.52; }
    50%  { transform: translate(-90px, 35px) scale(1.22); opacity: 0.72; }
    100% { transform: translate(70px, -25px) scale(0.84); opacity: 0.58; }
}

@keyframes aurora4 {
    0%   { transform: translateX(0)     scaleX(1);    opacity: 0.38; }
    50%  { transform: translateX(130px) scaleX(0.78); opacity: 0.55; }
    100% { transform: translateX(-50px) scaleX(1.25); opacity: 0.42; }
}

/* ---------- Content layer ---------- */
.auth-content {
    position: relative;
    z-index: 1;
}

/* ---------- Card glow ---------- */
.auth-card-glow {
    box-shadow:
        0 0 0 1px rgba(139, 92, 246, 0.3),
        0 0 35px rgba(139, 92, 246, 0.18),
        0 0 90px rgba(59, 130, 246, 0.12),
        0 32px 72px rgba(0, 0, 0, 0.65);
}