/* aurora.css - Efecto Aurora Boreal 3D Animada */
.aurora-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    background: #000005; /* Fondo noche muy oscura */
    overflow: hidden;
    perspective: 1000px; /* Para dar profundidad 3D */
}

/* La aurora será compuesta por formas abstractas superpuestas */
.aurora-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px); /* Desenfoque extremo para parecer luz */
    opacity: 0.7;
    animation: aurora-move 12s infinite alternate ease-in-out, aurora-colors 12s infinite linear;
    mix-blend-mode: screen; /* Mezcla de luz aditiva */
}

/* Blob 1: Forma grande principal */
.aurora-blob-1 {
    width: 120vw;
    height: 120vh;
    top: -10vh;
    left: -10vw;
    animation-delay: 0s, 0s;
}

/* Blob 2: Contraste secundario */
.aurora-blob-2 {
    width: 80vw;
    height: 80vh;
    bottom: -20vh;
    right: -10vw;
    animation-direction: alternate-reverse, normal;
    animation-duration: 15s, 12s;
    animation-delay: -2s, -4s;
}

/* Blob 3: Detalles en el centro */
.aurora-blob-3 {
    width: 60vw;
    height: 60vh;
    top: 20vh;
    left: 20vw;
    animation-duration: 10s, 12s;
    animation-delay: -5s, -8s;
}

/* Estrellas estáticas en el fondo para dar más inmersión */
.stars-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(1px 1px at 10% 20%, white, transparent),
        radial-gradient(1.5px 1.5px at 30% 40%, white, transparent),
        radial-gradient(1px 1px at 50% 60%, white, transparent),
        radial-gradient(2px 2px at 70% 80%, white, transparent),
        radial-gradient(1px 1px at 90% 10%, white, transparent),
        radial-gradient(1.5px 1.5px at 20% 80%, white, transparent),
        radial-gradient(1px 1px at 80% 30%, white, transparent);
    background-size: 200px 200px;
    opacity: 0.4;
    z-index: 0;
}

/* Animación de movimiento 3D */
@keyframes aurora-move {
    0% {
        transform: translate3d(-10%, -10%, -100px) rotate(0deg) scale(1);
    }
    50% {
        transform: translate3d(5%, 15%, 50px) rotate(180deg) scale(1.2);
    }
    100% {
        transform: translate3d(-5%, -5%, 200px) rotate(360deg) scale(0.9);
    }
}

/* Ciclo de colores: Azul (4s) -> Verde (4s) -> Blanco (4s) -> Total 12s */
@keyframes aurora-colors {
    0%, 100% {
        background-color: #00E5FF; /* Azul Eléctrico */
    }
    33% {
        background-color: #00FF87; /* Verde Aurora */
    }
    66% {
        background-color: #F8FAFC; /* Blanco Nieve Brillante */
    }
}

/* Transparencia adicional en las tarjetas de login para aprovechar la luz de la aurora */
.auth-card {
    background: rgba(15, 23, 42, 0.4) !important;
    backdrop-filter: blur(25px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(25px) saturate(150%) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255,255,255,0.2) !important;
}

/* Ocultar el background default del body en auth */
body.auth-page {
    background-image: none !important;
    background-color: transparent !important;
}