/* Variables para facilitar la personalización del tema */
:root {
    --spinner-bg: rgba(15, 23, 42, 0.6); /* Un tono oscuro azulado muy elegante */
    --spinner-blur: 8px; /* Un desenfoque un poco más pronunciado */
    --spinner-glow: rgba(255, 255, 255, 0.4); /* Color del brillo del logo */
}

.spinner-container {
    display: flex; /* Inicia oculto, JS lo cambia a 'flex' */
    position: fixed;
    inset: 0;
    z-index: 9999;
    
    background: var(--spinner-bg);
    backdrop-filter: blur(var(--spinner-blur));
    -webkit-backdrop-filter: blur(var(--spinner-blur)); /* Soporte crucial para Safari/iOS */
    
    /* Centrado y preparado para añadir texto abajo si lo deseas */
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 1.5rem; 
    
    cursor: wait;
    
    /* Animación para que aparezca suavemente al cambiar a 'flex' */
    animation: fadeInContainer 0.3s ease-out forwards;
}

.spinner-logo {
    width: 140px; /* Un tamaño ligeramente más refinado */
    height: auto;
    z-index: 2;
    
    /* Animación más orgánica usando cubic-bezier */
    animation: pulseGlow 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    
    /* Optimización de rendimiento para animaciones fluidas a 60fps */
    will-change: transform, filter;
}

/* --- ANIMACIONES --- */

/* 1. Entrada suave del contenedor (evita que aparezca de un parpadeo) */
@keyframes fadeInContainer {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* 2. Pulso orgánico con efecto de brillo (Glow) */
@keyframes pulseGlow {
    0% {
        transform: scale(0.95);
        filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.1));
    }
    50% {
        transform: scale(1.05);
        filter: drop-shadow(0 0 25px var(--spinner-glow));
    }
    100% {
        transform: scale(0.95);
        filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.1));
    }
}

/* (Opcional) Si decides usar un icono de carga circular en lugar de un logo */
@keyframes spinLogo {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}