/* Loader pantalla completa */
.loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000; /* Fondo negro absoluto */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    z-index: 9999;
    transition: opacity 0.6s ease;
    perspective: 1000px; /* Para dar sensación 3D en animaciones */
}

/* Capa principal con luces difusas */
.loader::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 250%;
    height: 250%;
    background: radial-gradient(circle at 30% 30%, rgba(255, 0, 0, 0.08), transparent 70%),
                radial-gradient(circle at 70% 70%, rgba(0, 80, 255, 0.08), transparent 70%),
                radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.02), transparent 80%);
    animation: subtleMove 14s ease-in-out infinite alternate;
    filter: blur(120px);
}

/* Segunda capa: efecto cinematic extra (ondas suaves) */
.loader::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 200%;
    background: repeating-radial-gradient(circle, rgba(255,255,255,0.03) 0%, transparent 5%);
    opacity: 0.05;
    animation: waveMove 18s linear infinite;
    filter: blur(150px);
}

/* Animación fondo principal */
@keyframes subtleMove {
    0% {
        transform: translate(-8%, -8%) scale(1);
        opacity: 0.9;
    }
    50% {
        transform: translate(8%, 8%) scale(1.1);
        opacity: 1;
    }
    100% {
        transform: translate(-8%, -8%) scale(1);
        opacity: 0.9;
    }
}

/* Animación de ondas cinematográficas */
@keyframes waveMove {
    0% {
        transform: rotate(0deg) scale(1);
    }
    100% {
        transform: rotate(360deg) scale(1.2);
    }
}

/* Logo con animación de tinte y sombras dinámicas */
.logo {
    position: relative;
    width: 240px;
    height: auto;
    opacity: 0;
    transform: scale(0.85) translateZ(0);
    animation: logoIntro 2s ease forwards, logoColorShift 4s ease-in-out infinite alternate;
    z-index: 2;
}

/* Brillo highlight que pasa */
.logo::after {
    content: "";
    position: absolute;
    top: 0;
    left: -150%;
    width: 150%;
    height: 100%;
    background: linear-gradient(75deg, transparent 20%, rgba(255,255,255,0.15) 50%, transparent 80%);
    transform: skewX(-20deg);
    animation: shineEffect 4s ease-in-out infinite;
    pointer-events: none;
}

/* Entrada épica */
@keyframes logoIntro {
    0% {
        opacity: 0;
        transform: scale(0.85) rotateY(15deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotateY(0deg);
    }
}

/* Cambio dinámico de color y glow sincronizados */
@keyframes logoColorShift {
    0% {
        filter: brightness(1.2) saturate(1.4) hue-rotate(0deg)
                drop-shadow(0 0 10px #ff0033)
                drop-shadow(0 0 20px #ff0033);
    }
    25% {
        filter: brightness(1.4) saturate(1.5) hue-rotate(40deg)
                drop-shadow(0 0 10px #ff6600)
                drop-shadow(0 0 20px #ff6600);
    }
    50% {
        filter: brightness(1.3) saturate(1.5) hue-rotate(180deg)
                drop-shadow(0 0 10px #00aaff)
                drop-shadow(0 0 20px #00aaff);
    }
    75% {
        filter: brightness(1.4) saturate(1.6) hue-rotate(280deg)
                drop-shadow(0 0 10px #cc00ff)
                drop-shadow(0 0 20px #cc00ff);
    }
    100% {
        filter: brightness(1.2) saturate(1.4) hue-rotate(360deg)
                drop-shadow(0 0 10px #ff0033)
                drop-shadow(0 0 20px #ff0033);
    }
}

/* Highlight que pasa */
@keyframes shineEffect {
    0% { left: -150%; }
    50% { left: 150%; }
    100% { left: 150%; }
}


/* Pulso neón GTA vibes */
@keyframes logoPulse {
    0% {
        filter: drop-shadow(0 0 8px #ff0033) drop-shadow(0 0 16px #ff0033);
    }
    100% {
        filter: drop-shadow(0 0 12px #00aaff) drop-shadow(0 0 24px #00aaff);
    }
}

/* Ocultar loader */
.loader.hidden {
    opacity: 0;
    pointer-events: none;
}