/* ==========================================================
   Fondo animado del login (estilo minimalista tipo Microsoft)
   Solo decora el fondo: no modifica la tarjeta ni el formulario.
   ========================================================== */

body.login-bg {
    background-color: #f1f3f8;
    background-image: none;
}

/* El contenido queda por encima de la escena */
body.login-bg > .container {
    position: relative;
    z-index: 1;
}

.login-scene {
    --accent: var(--login-accent, #0ea5b7);
    --accent-soft: color-mix(in srgb, var(--accent) 22%, transparent);
    --accent-faint: color-mix(in srgb, var(--accent) 10%, transparent);

    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background:
        radial-gradient(1100px 760px at 88% 8%, rgba(255, 233, 226, 0.85), transparent 62%),
        radial-gradient(1000px 720px at 6% 96%, rgba(222, 230, 255, 0.9), transparent 60%),
        radial-gradient(800px 600px at 50% 50%, rgba(255, 255, 255, 0.7), transparent 70%),
        linear-gradient(135deg, #eef1f8 0%, #f6f5fb 48%, #fbf6f4 100%);
}

/* ---------- Manchas de color difuminadas ---------- */
.scene-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.9;
    will-change: transform;
}

.scene-glow--a {
    width: 46vmax;
    height: 46vmax;
    top: -14vmax;
    left: -10vmax;
    background: var(--accent-faint);
    animation: glow-drift-a 38s ease-in-out infinite alternate;
}

.scene-glow--b {
    width: 40vmax;
    height: 40vmax;
    bottom: -16vmax;
    right: -8vmax;
    background: rgba(255, 214, 196, 0.45);
    animation: glow-drift-b 44s ease-in-out infinite alternate;
}

.scene-glow--c {
    width: 30vmax;
    height: 30vmax;
    top: 30%;
    right: 18%;
    background: rgba(206, 216, 255, 0.4);
    animation: glow-drift-a 52s ease-in-out infinite alternate-reverse;
}

/* ---------- Bandas curvas translúcidas ---------- */
.scene-ribbon {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.75);
    background: linear-gradient(160deg,
            rgba(255, 255, 255, 0.55) 0%,
            rgba(255, 255, 255, 0.18) 45%,
            rgba(255, 255, 255, 0) 75%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 30px 80px rgba(120, 130, 170, 0.08);
    will-change: transform;
}

.scene-ribbon--1 {
    width: 120vmax;
    height: 60vmax;
    top: -30vmax;
    left: -35vmax;
    transform: rotate(28deg);
    animation: ribbon-float-1 46s ease-in-out infinite alternate;
}

.scene-ribbon--2 {
    width: 110vmax;
    height: 52vmax;
    bottom: -32vmax;
    right: -40vmax;
    transform: rotate(-22deg);
    animation: ribbon-float-2 54s ease-in-out infinite alternate;
}

.scene-ribbon--3 {
    width: 70vmax;
    height: 70vmax;
    bottom: -48vmax;
    left: -18vmax;
    border-color: rgba(255, 255, 255, 0.6);
    background: linear-gradient(20deg,
            var(--accent-faint) 0%,
            rgba(255, 255, 255, 0.25) 40%,
            rgba(255, 255, 255, 0) 70%);
    animation: ribbon-float-3 60s ease-in-out infinite alternate;
}

/* Línea curva fina (como los arcos del fondo de Microsoft) */
.scene-arc {
    position: absolute;
    width: 90vmax;
    height: 90vmax;
    top: -38vmax;
    right: -30vmax;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.8);
    border-left-color: transparent;
    border-bottom-color: transparent;
    transform: rotate(-10deg);
    animation: arc-sway 40s ease-in-out infinite alternate;
}

/* ---------- Rayas de luz que cruzan de vez en cuando ---------- */
.scene-streaks {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200vmax;
    height: 200vmax;
    transform: translate(-50%, -50%) rotate(-17deg);
}

.scene-streak {
    position: absolute;
    left: 0;
    width: 34vmax;
    height: 1.5px;
    border-radius: 2px;
    opacity: 0;
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.95) 55%,
            var(--accent-soft) 85%,
            rgba(255, 255, 255, 0) 100%);
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.8);
    animation: streak-pass 15s cubic-bezier(.45, .05, .25, 1) infinite;
}

.scene-streak:nth-child(1) { top: 38%; animation-delay: 1.5s; }
.scene-streak:nth-child(2) { top: 46%; animation-delay: 6.5s; animation-duration: 18s; }
.scene-streak:nth-child(3) { top: 55%; animation-delay: 11s; }
.scene-streak:nth-child(4) { top: 61%; animation-delay: 3.5s; animation-duration: 21s; width: 22vmax; }

/* ---------- Destellos diminutos ---------- */
.scene-spark {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 8px 2px rgba(255, 255, 255, 0.9);
    opacity: 0;
    animation: spark-twinkle 7s ease-in-out infinite;
}

.scene-spark:nth-child(1) { top: 14%; left: 72%; animation-delay: 0s; }
.scene-spark:nth-child(2) { top: 26%; left: 90%; animation-delay: 2.4s; }
.scene-spark:nth-child(3) { top: 70%; left: 12%; animation-delay: 4.1s; }
.scene-spark:nth-child(4) { top: 82%; left: 64%; animation-delay: 1.2s; }
.scene-spark:nth-child(5) { top: 40%; left: 6%;  animation-delay: 5.6s; }

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

@keyframes glow-drift-b {
    0%   { transform: translate(0, 0) scale(1); }
    100% { transform: translate(-7vmax, -5vmax) scale(1.08); }
}

@keyframes ribbon-float-1 {
    0%   { transform: rotate(28deg) translate(0, 0); }
    100% { transform: rotate(33deg) translate(3vmax, 2vmax); }
}

@keyframes ribbon-float-2 {
    0%   { transform: rotate(-22deg) translate(0, 0); }
    100% { transform: rotate(-27deg) translate(-3vmax, -1.5vmax); }
}

@keyframes ribbon-float-3 {
    0%   { transform: rotate(0deg) translate(0, 0); }
    100% { transform: rotate(8deg) translate(2vmax, -2vmax); }
}

@keyframes arc-sway {
    0%   { transform: rotate(-10deg); }
    100% { transform: rotate(-2deg); }
}

@keyframes streak-pass {
    0%   { transform: translateX(-34vmax); opacity: 0; }
    3%   { opacity: 1; }
    16%  { opacity: 0.9; }
    20%  { transform: translateX(200vmax); opacity: 0; }
    100% { transform: translateX(200vmax); opacity: 0; }
}

@keyframes spark-twinkle {
    0%, 100% { opacity: 0; transform: scale(0.6); }
    45%      { opacity: 0.9; transform: scale(1); }
    60%      { opacity: 0; transform: scale(0.6); }
}

/* Pantallas pequeñas: menos carga visual */
@media (max-width: 575.98px) {
    .scene-glow { filter: blur(60px); }
    .scene-streak:nth-child(4),
    .scene-spark:nth-child(n+4) { display: none; }
}

/* Accesibilidad: sin movimiento si el usuario lo prefiere */
@media (prefers-reduced-motion: reduce) {
    .login-scene *,
    .login-scene *::before,
    .login-scene *::after {
        animation: none !important;
    }
    .scene-streak,
    .scene-spark { display: none; }
}