/* ============================================
   🎬 SPLASH SCREEN CINEMATOGRÁFICO 
   ============================================ */

/* Contenedor principal del splash */
.tv-splash {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: radial-gradient(ellipse at center,
        rgba(20, 30, 70, 1) 0%,
        rgba(10, 15, 40, 1) 40%,
        rgba(5, 10, 25, 1) 70%,
        rgba(0, 0, 0, 1) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 1;
    transition: opacity 0.8s ease-out;
    overflow: hidden;
}

.tv-splash[data-hidden="true"] {
    opacity: 0;
    pointer-events: none;
}

/* Efecto de líneas de TV (scanlines) */
.tv-scanlines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(255, 255, 255, 0.03) 2px,
        rgba(255, 255, 255, 0.03) 4px
    );
    pointer-events: none;
    opacity: 0.6;
}

/* Ruido de TV sutil */
.tv-noise {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.05'/%3E%3C/svg%3E");
    pointer-events: none;
}

/* Centro del splash */
.splash-center {
    position: relative;
    text-align: center;
    z-index: 2;
}

/* Container del logo con efectos */
.logo-container {
    position: relative;
    display: inline-block;
    margin-bottom: 2rem;
    animation: logoEntrance 2.5s ease-out forwards;
}

/* Logo principal */
.splash-logo {
    width: clamp(200px, 25vw, 400px);
    height: auto;
    filter: drop-shadow(0 0 20px rgba(123, 104, 238, 0.6));
    animation: logoGlow 3s ease-in-out infinite, logoShockwave 3s ease-out 1s;
}

/* Resplandor del logo - HALO EXPANSIVO SIN BORDES */
.logo-glow {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 400vmax;
    height: 400vmax;
    background: radial-gradient(circle, 
        rgba(123, 104, 238, 0.8) 0%, 
        rgba(123, 104, 238, 0.6) 5%, 
        rgba(255, 255, 255, 0.4) 10%, 
        rgba(123, 104, 238, 0.3) 20%, 
        rgba(255, 255, 255, 0.2) 30%,
        rgba(123, 104, 238, 0.1) 40%, 
        transparent 50%);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    animation: pulseGlow 2s ease-in-out infinite, haloExplosion 3s ease-out 1.5s;
    z-index: 1;
}

/* 🌟 SECUENCIA DE SUPERNOVA CINEMATOGRÁFICA 🌟 */
.cinematic-explosion {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    z-index: 0;
    pointer-events: none;
}

/* Fondo de nebulosa profunda */
.nebula-background {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150vmax;
    height: 150vmax;
    background: radial-gradient(ellipse at center,
        rgba(70, 130, 180, 0.3) 0%,
        rgba(100, 149, 237, 0.2) 20%,
        rgba(138, 43, 226, 0.15) 40%,
        rgba(75, 0, 130, 0.1) 60%,
        transparent 80%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: nebulaEvolution 8s ease-out 0.5s forwards;
    opacity: 0;
}

/* Núcleo de supernova - Evolución completa */
.explosion-core {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    background: radial-gradient(circle,
        rgba(255, 255, 255, 1) 0%,
        rgba(135, 206, 250, 0.9) 15%,
        rgba(255, 215, 0, 0.8) 30%,
        rgba(255, 140, 0, 0.7) 50%,
        rgba(220, 20, 60, 0.5) 70%,
        rgba(138, 43, 226, 0.3) 85%,
        transparent 100%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: supernovaCore 6s ease-out 0.8s forwards;
    box-shadow: 
        0 0 50px rgba(255, 255, 255, 0.8),
        0 0 100px rgba(135, 206, 250, 0.6),
        0 0 150px rgba(255, 215, 0, 0.4);
}

/* Filamentos de nebulosa - Estructura compleja */
.nebula-filaments {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 400px;
    transform: translate(-50%, -50%);
    animation: filamentsGrowth 5s ease-out 2s forwards;
    opacity: 0;
}

.filament {
    position: absolute;
    background: linear-gradient(45deg,
        rgba(135, 206, 250, 0.6) 0%,
        rgba(255, 215, 0, 0.5) 25%,
        rgba(255, 140, 0, 0.4) 50%,
        rgba(220, 20, 60, 0.3) 75%,
        transparent 100%);
    border-radius: 50px;
    filter: blur(2px);
}

/* Filamentos específicos en diferentes direcciones */
.filament:nth-child(1) { width: 200px; height: 4px; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(0deg); }
.filament:nth-child(2) { width: 180px; height: 3px; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(45deg); }
.filament:nth-child(3) { width: 160px; height: 4px; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(90deg); }
.filament:nth-child(4) { width: 190px; height: 3px; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(135deg); }
.filament:nth-child(5) { width: 170px; height: 4px; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(22.5deg); }
.filament:nth-child(6) { width: 150px; height: 3px; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(67.5deg); }
.filament:nth-child(7) { width: 185px; height: 4px; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(112.5deg); }
.filament:nth-child(8) { width: 165px; height: 3px; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(157.5deg); }

/* Anillos de expansión múltiples */
.explosion-ring-1 {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 50px;
    border: 3px solid rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: explosionRing 2s ease-out 1s forwards;
}

.explosion-ring-2 {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 30px;
    border: 2px solid rgba(255, 193, 7, 0.6);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: explosionRing 2.2s ease-out 1.2s forwards;
}

.explosion-ring-3 {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    border: 2px solid rgba(255, 87, 34, 0.5);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: explosionRing 2.4s ease-out 1.4s forwards;
}

/* Onda de choque masiva */
.explosion-shockwave {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    background: radial-gradient(circle,
        transparent 0%,
        transparent 40%,
        rgba(255, 255, 255, 0.4) 45%,
        rgba(255, 255, 255, 0.6) 50%,
        rgba(255, 255, 255, 0.4) 55%,
        transparent 60%,
        transparent 100%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: explosionShockwave 3s ease-out 1s forwards;
}

/* Flash cegador inicial */
.explosion-flash {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vmax;
    height: 100vmax;
    background: radial-gradient(circle,
        rgba(255, 255, 255, 0.8) 0%,
        rgba(255, 255, 255, 0.4) 10%,
        rgba(255, 255, 255, 0.2) 20%,
        transparent 30%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: explosionFlash 1.5s ease-out 0.9s forwards;
    opacity: 0;
}

/* Contenedor de partículas de debris */
.explosion-debris {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
}

/* Partículas de debris individual */
.debris-particle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 4px;
    background: radial-gradient(circle,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 193, 7, 0.8) 50%,
        rgba(255, 87, 34, 0.6) 100%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

/* Direcciones específicas para cada partícula de debris */
.debris-particle:nth-child(1) { animation: debrisExplosion 2.5s ease-out 1.3s forwards; --debris-x: 200px; --debris-y: -150px; }
.debris-particle:nth-child(2) { animation: debrisExplosion 2.3s ease-out 1.4s forwards; --debris-x: -180px; --debris-y: -120px; }
.debris-particle:nth-child(3) { animation: debrisExplosion 2.7s ease-out 1.2s forwards; --debris-x: 150px; --debris-y: 180px; }
.debris-particle:nth-child(4) { animation: debrisExplosion 2.4s ease-out 1.5s forwards; --debris-x: -200px; --debris-y: 100px; }
.debris-particle:nth-child(5) { animation: debrisExplosion 2.6s ease-out 1.1s forwards; --debris-x: 250px; --debris-y: -50px; }
.debris-particle:nth-child(6) { animation: debrisExplosion 2.2s ease-out 1.6s forwards; --debris-x: -100px; --debris-y: -200px; }
.debris-particle:nth-child(7) { animation: debrisExplosion 2.8s ease-out 1.3s forwards; --debris-x: 50px; --debris-y: 220px; }
.debris-particle:nth-child(8) { animation: debrisExplosion 2.1s ease-out 1.7s forwards; --debris-x: -250px; --debris-y: -80px; }
.debris-particle:nth-child(9) { animation: debrisExplosion 2.5s ease-out 1.4s forwards; --debris-x: 180px; --debris-y: 120px; }
.debris-particle:nth-child(10) { animation: debrisExplosion 2.3s ease-out 1.2s forwards; --debris-x: -150px; --debris-y: 170px; }
.debris-particle:nth-child(11) { animation: debrisExplosion 2.7s ease-out 1.5s forwards; --debris-x: 120px; --debris-y: -180px; }
.debris-particle:nth-child(12) { animation: debrisExplosion 2.4s ease-out 1.1s forwards; --debris-x: -220px; --debris-y: 60px; }

/* Partículas flotantes */
.logo-particles {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200%;
    height: 200%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.particle {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
    transform: translate(-50%, -50%);
}

/* ✨ CAMPO ESTELAR FLUIDO CON CAPAS DE PROFUNDIDAD ✨ */

/* CAPA LEJANA - Estrellas grandes y lentas (Fondo del campo estelar) */
.particle:nth-child(1) { --dx: 0px; --dy: -120vh; --size: 8px; --speed: 8s; --glow: 20px; animation: particleFloat var(--speed) linear infinite; animation-delay: 0s; }
.particle:nth-child(2) { --dx: 80vw; --dy: -80vh; --size: 7px; --speed: 8.2s; --glow: 18px; animation: particleFloat var(--speed) linear infinite; animation-delay: 1s; }
.particle:nth-child(3) { --dx: 120vw; --dy: 0px; --size: 8px; --speed: 8.5s; --glow: 22px; animation: particleFloat var(--speed) linear infinite; animation-delay: 2s; }
.particle:nth-child(4) { --dx: 80vw; --dy: 80vh; --size: 7px; --speed: 8.1s; --glow: 19px; animation: particleFloat var(--speed) linear infinite; animation-delay: 3s; }
.particle:nth-child(5) { --dx: 0px; --dy: 120vh; --size: 8px; --speed: 8.3s; --glow: 21px; animation: particleFloat var(--speed) linear infinite; animation-delay: 4s; }
.particle:nth-child(6) { --dx: -80vw; --dy: 80vh; --size: 7px; --speed: 8.4s; --glow: 18px; animation: particleFloat var(--speed) linear infinite; animation-delay: 5s; }
.particle:nth-child(7) { --dx: -120vw; --dy: 0px; --size: 8px; --speed: 8.6s; --glow: 20px; animation: particleFloat var(--speed) linear infinite; animation-delay: 6s; }
.particle:nth-child(8) { --dx: -80vw; --dy: -80vh; --size: 7px; --speed: 8.2s; --glow: 19px; animation: particleFloat var(--speed) linear infinite; animation-delay: 7s; }

/* CAPA MEDIA - Estrellas medianas con velocidad media */
.particle:nth-child(9) { --dx: 40vw; --dy: -110vh; --size: 5px; --speed: 6s; --glow: 15px; animation: particleFloat var(--speed) linear infinite; animation-delay: 0.5s; }
.particle:nth-child(10) { --dx: 110vw; --dy: -40vh; --size: 6px; --speed: 6.2s; --glow: 16px; animation: particleFloat var(--speed) linear infinite; animation-delay: 1.5s; }
.particle:nth-child(11) { --dx: 110vw; --dy: 40vh; --size: 5px; --speed: 6.1s; --glow: 14px; animation: particleFloat var(--speed) linear infinite; animation-delay: 2.5s; }
.particle:nth-child(12) { --dx: 40vw; --dy: 110vh; --size: 6px; --speed: 6.3s; --glow: 17px; animation: particleFloat var(--speed) linear infinite; animation-delay: 3.5s; }
.particle:nth-child(13) { --dx: -40vw; --dy: 110vh; --size: 5px; --speed: 6.4s; --glow: 15px; animation: particleFloat var(--speed) linear infinite; animation-delay: 4.5s; }
.particle:nth-child(14) { --dx: -110vw; --dy: 40vh; --size: 6px; --speed: 6.2s; --glow: 16px; animation: particleFloat var(--speed) linear infinite; animation-delay: 5.5s; }
.particle:nth-child(15) { --dx: -110vw; --dy: -40vh; --size: 5px; --speed: 6.1s; --glow: 14px; animation: particleFloat var(--speed) linear infinite; animation-delay: 6.5s; }
.particle:nth-child(16) { --dx: -40vw; --dy: -110vh; --size: 6px; --speed: 6.3s; --glow: 17px; animation: particleFloat var(--speed) linear infinite; animation-delay: 7.5s; }

/* CAPA CERCANA - Estrellas pequeñas y rápidas (Primer plano) */
.particle:nth-child(17) { --dx: 20vw; --dy: -100vh; --size: 3px; --speed: 4s; --glow: 10px; animation: particleFloat var(--speed) linear infinite; animation-delay: 0.25s; }
.particle:nth-child(18) { --dx: 70vw; --dy: -70vh; --size: 4px; --speed: 4.2s; --glow: 12px; animation: particleFloat var(--speed) linear infinite; animation-delay: 1.25s; }
.particle:nth-child(19) { --dx: 100vw; --dy: -20vh; --size: 3px; --speed: 4.1s; --glow: 11px; animation: particleFloat var(--speed) linear infinite; animation-delay: 2.25s; }
.particle:nth-child(20) { --dx: 100vw; --dy: 20vh; --size: 4px; --speed: 4.3s; --glow: 13px; animation: particleFloat var(--speed) linear infinite; animation-delay: 3.25s; }
.particle:nth-child(21) { --dx: 70vw; --dy: 70vh; --size: 3px; --speed: 4.4s; --glow: 10px; animation: particleFloat var(--speed) linear infinite; animation-delay: 4.25s; }
.particle:nth-child(22) { --dx: 20vw; --dy: 100vh; --size: 4px; --speed: 4.2s; --glow: 12px; animation: particleFloat var(--speed) linear infinite; animation-delay: 5.25s; }
.particle:nth-child(23) { --dx: -20vw; --dy: 100vh; --size: 3px; --speed: 4.1s; --glow: 11px; animation: particleFloat var(--speed) linear infinite; animation-delay: 6.25s; }
.particle:nth-child(24) { --dx: -70vw; --dy: 70vh; --size: 4px; --speed: 4.3s; --glow: 13px; animation: particleFloat var(--speed) linear infinite; animation-delay: 7.25s; }
.particle:nth-child(25) { --dx: -100vw; --dy: 20vh; --size: 3px; --speed: 4.4s; --glow: 10px; animation: particleFloat var(--speed) linear infinite; animation-delay: 0.75s; }
.particle:nth-child(26) { --dx: -100vw; --dy: -20vh; --size: 4px; --speed: 4.2s; --glow: 12px; animation: particleFloat var(--speed) linear infinite; animation-delay: 1.75s; }
.particle:nth-child(27) { --dx: -70vw; --dy: -70vh; --size: 3px; --speed: 4.1s; --glow: 11px; animation: particleFloat var(--speed) linear infinite; animation-delay: 2.75s; }
.particle:nth-child(28) { --dx: -20vw; --dy: -100vh; --size: 4px; --speed: 4.3s; --glow: 13px; animation: particleFloat var(--speed) linear infinite; animation-delay: 3.75s; }

/* ESTRELLAS FUGACES - Muy rápidas y brillantes */
.particle:nth-child(29) { --dx: 150vw; --dy: -50vh; --size: 2px; --speed: 2.5s; --glow: 8px; animation: particleFloat var(--speed) linear infinite; animation-delay: 0.8s; }
.particle:nth-child(30) { --dx: -150vw; --dy: 50vh; --size: 2px; --speed: 2.5s; --glow: 8px; animation: particleFloat var(--speed) linear infinite; animation-delay: 3.3s; }

/* CAPA LEJANA ADICIONAL - Más estrellas de fondo */
.particle:nth-child(31) { --dx: 60vw; --dy: -120vh; --size: 7px; --speed: 8.7s; --glow: 19px; animation: particleFloat var(--speed) linear infinite; animation-delay: 0.5s; }
.particle:nth-child(32) { --dx: 120vw; --dy: -60vh; --size: 8px; --speed: 8.8s; --glow: 21px; animation: particleFloat var(--speed) linear infinite; animation-delay: 1.5s; }
.particle:nth-child(33) { --dx: 120vw; --dy: 60vh; --size: 7px; --speed: 8.9s; --glow: 20px; animation: particleFloat var(--speed) linear infinite; animation-delay: 2.5s; }
.particle:nth-child(34) { --dx: 60vw; --dy: 120vh; --size: 8px; --speed: 8.6s; --glow: 22px; animation: particleFloat var(--speed) linear infinite; animation-delay: 3.5s; }
.particle:nth-child(35) { --dx: -60vw; --dy: 120vh; --size: 7px; --speed: 8.7s; --glow: 18px; animation: particleFloat var(--speed) linear infinite; animation-delay: 4.5s; }
.particle:nth-child(36) { --dx: -120vw; --dy: 60vh; --size: 8px; --speed: 8.8s; --glow: 20px; animation: particleFloat var(--speed) linear infinite; animation-delay: 5.5s; }
.particle:nth-child(37) { --dx: -120vw; --dy: -60vh; --size: 7px; --speed: 8.9s; --glow: 19px; animation: particleFloat var(--speed) linear infinite; animation-delay: 6.5s; }
.particle:nth-child(38) { --dx: -60vw; --dy: -120vh; --size: 8px; --speed: 8.6s; --glow: 21px; animation: particleFloat var(--speed) linear infinite; animation-delay: 7.5s; }

/* CAPA MEDIA ADICIONAL - Estrellas de velocidad intermedia */
.particle:nth-child(39) { --dx: 30vw; --dy: -115vh; --size: 5px; --speed: 6.5s; --glow: 14px; animation: particleFloat var(--speed) linear infinite; animation-delay: 0.8s; }
.particle:nth-child(40) { --dx: 85vw; --dy: -85vh; --size: 6px; --speed: 6.6s; --glow: 16px; animation: particleFloat var(--speed) linear infinite; animation-delay: 1.8s; }
.particle:nth-child(41) { --dx: 115vw; --dy: -30vh; --size: 5px; --speed: 6.7s; --glow: 15px; animation: particleFloat var(--speed) linear infinite; animation-delay: 2.8s; }
.particle:nth-child(42) { --dx: 115vw; --dy: 30vh; --size: 6px; --speed: 6.8s; --glow: 17px; animation: particleFloat var(--speed) linear infinite; animation-delay: 3.8s; }
.particle:nth-child(43) { --dx: 85vw; --dy: 85vh; --size: 5px; --speed: 6.5s; --glow: 14px; animation: particleFloat var(--speed) linear infinite; animation-delay: 4.8s; }
.particle:nth-child(44) { --dx: 30vw; --dy: 115vh; --size: 6px; --speed: 6.6s; --glow: 16px; animation: particleFloat var(--speed) linear infinite; animation-delay: 5.8s; }
.particle:nth-child(45) { --dx: -30vw; --dy: 115vh; --size: 5px; --speed: 6.7s; --glow: 15px; animation: particleFloat var(--speed) linear infinite; animation-delay: 6.8s; }
.particle:nth-child(46) { --dx: -85vw; --dy: 85vh; --size: 6px; --speed: 6.8s; --glow: 17px; animation: particleFloat var(--speed) linear infinite; animation-delay: 7.8s; }
.particle:nth-child(47) { --dx: -115vw; --dy: 30vh; --size: 5px; --speed: 6.5s; --glow: 14px; animation: particleFloat var(--speed) linear infinite; animation-delay: 0.3s; }
.particle:nth-child(48) { --dx: -115vw; --dy: -30vh; --size: 6px; --speed: 6.6s; --glow: 16px; animation: particleFloat var(--speed) linear infinite; animation-delay: 1.3s; }
.particle:nth-child(49) { --dx: -85vw; --dy: -85vh; --size: 5px; --speed: 6.7s; --glow: 15px; animation: particleFloat var(--speed) linear infinite; animation-delay: 2.3s; }
.particle:nth-child(50) { --dx: -30vw; --dy: -115vh; --size: 6px; --speed: 6.8s; --glow: 17px; animation: particleFloat var(--speed) linear infinite; animation-delay: 3.3s; }

/* CAMPO ESTELAR ESPECTACULAR - MOVIMIENTOS EN TODAS DIRECCIONES */

/* CAPA ULTRA LEJANA - Estrellas masivas con movimientos lentos y majestuosos */
.particle:nth-child(51) { --dx: 45vw; --dy: -130vh; --size: 9px; --speed: 10s; --glow: 24px; animation: particleFloat var(--speed) linear infinite; animation-delay: 0.2s; }
.particle:nth-child(52) { --dx: 130vw; --dy: -45vh; --size: 8px; --speed: 10.5s; --glow: 23px; animation: particleFloat var(--speed) linear infinite; animation-delay: 1.2s; }
.particle:nth-child(53) { --dx: 130vw; --dy: 45vh; --size: 9px; --speed: 10.2s; --glow: 25px; animation: particleFloat var(--speed) linear infinite; animation-delay: 2.2s; }
.particle:nth-child(54) { --dx: 45vw; --dy: 130vh; --size: 8px; --speed: 10.8s; --glow: 22px; animation: particleFloat var(--speed) linear infinite; animation-delay: 3.2s; }
.particle:nth-child(55) { --dx: -45vw; --dy: 130vh; --size: 9px; --speed: 10.3s; --glow: 24px; animation: particleFloat var(--speed) linear infinite; animation-delay: 4.2s; }
.particle:nth-child(56) { --dx: -130vw; --dy: 45vh; --size: 8px; --speed: 10.6s; --glow: 23px; animation: particleFloat var(--speed) linear infinite; animation-delay: 5.2s; }
.particle:nth-child(57) { --dx: -130vw; --dy: -45vh; --size: 9px; --speed: 10.4s; --glow: 25px; animation: particleFloat var(--speed) linear infinite; animation-delay: 6.2s; }
.particle:nth-child(58) { --dx: -45vw; --dy: -130vh; --size: 8px; --speed: 10.7s; --glow: 22px; animation: particleFloat var(--speed) linear infinite; animation-delay: 7.2s; }

/* ESTRELLAS DIAGONALES RÁPIDAS - Movimientos dinámicos en ángulos únicos */
.particle:nth-child(59) { --dx: 95vw; --dy: -95vh; --size: 4px; --speed: 3.8s; --glow: 13px; animation: particleFloat var(--speed) linear infinite; animation-delay: 0.4s; }
.particle:nth-child(60) { --dx: 125vw; --dy: -25vh; --size: 3px; --speed: 3.5s; --glow: 11px; animation: particleFloat var(--speed) linear infinite; animation-delay: 1.4s; }
.particle:nth-child(61) { --dx: 125vw; --dy: 25vh; --size: 4px; --speed: 3.9s; --glow: 14px; animation: particleFloat var(--speed) linear infinite; animation-delay: 2.4s; }
.particle:nth-child(62) { --dx: 95vw; --dy: 95vh; --size: 3px; --speed: 3.6s; --glow: 12px; animation: particleFloat var(--speed) linear infinite; animation-delay: 3.4s; }
.particle:nth-child(63) { --dx: -95vw; --dy: 95vh; --size: 4px; --speed: 3.7s; --glow: 13px; animation: particleFloat var(--speed) linear infinite; animation-delay: 4.4s; }
.particle:nth-child(64) { --dx: -125vw; --dy: 25vh; --size: 3px; --speed: 3.8s; --glow: 11px; animation: particleFloat var(--speed) linear infinite; animation-delay: 5.4s; }
.particle:nth-child(65) { --dx: -125vw; --dy: -25vh; --size: 4px; --speed: 3.5s; --glow: 14px; animation: particleFloat var(--speed) linear infinite; animation-delay: 6.4s; }
.particle:nth-child(66) { --dx: -95vw; --dy: -95vh; --size: 3px; --speed: 3.9s; --glow: 12px; animation: particleFloat var(--speed) linear infinite; animation-delay: 7.4s; }

/* MICRO ESTRELLAS ULTRA RÁPIDAS - Como polvo cósmico */
.particle:nth-child(67) { --dx: 75vw; --dy: -105vh; --size: 2px; --speed: 2.2s; --glow: 7px; animation: particleFloat var(--speed) linear infinite; animation-delay: 0.1s; }
.particle:nth-child(68) { --dx: 105vw; --dy: -75vh; --size: 1.5px; --speed: 2s; --glow: 6px; animation: particleFloat var(--speed) linear infinite; animation-delay: 0.6s; }
.particle:nth-child(69) { --dx: 135vw; --dy: 0vh; --size: 2px; --speed: 2.3s; --glow: 8px; animation: particleFloat var(--speed) linear infinite; animation-delay: 1.1s; }
.particle:nth-child(70) { --dx: 105vw; --dy: 75vh; --size: 1.5px; --speed: 2.1s; --glow: 6px; animation: particleFloat var(--speed) linear infinite; animation-delay: 1.6s; }
.particle:nth-child(71) { --dx: 75vw; --dy: 105vh; --size: 2px; --speed: 2.4s; --glow: 7px; animation: particleFloat var(--speed) linear infinite; animation-delay: 2.1s; }
.particle:nth-child(72) { --dx: -75vw; --dy: 105vh; --size: 1.5px; --speed: 2.2s; --glow: 6px; animation: particleFloat var(--speed) linear infinite; animation-delay: 2.6s; }
.particle:nth-child(73) { --dx: -105vw; --dy: 75vh; --size: 2px; --speed: 2s; --glow: 8px; animation: particleFloat var(--speed) linear infinite; animation-delay: 3.1s; }
.particle:nth-child(74) { --dx: -135vw; --dy: 0vh; --size: 1.5px; --speed: 2.3s; --glow: 6px; animation: particleFloat var(--speed) linear infinite; animation-delay: 3.6s; }
.particle:nth-child(75) { --dx: -105vw; --dy: -75vh; --size: 2px; --speed: 2.1s; --glow: 7px; animation: particleFloat var(--speed) linear infinite; animation-delay: 4.1s; }
.particle:nth-child(76) { --dx: -75vw; --dy: -105vh; --size: 1.5px; --speed: 2.4s; --glow: 6px; animation: particleFloat var(--speed) linear infinite; animation-delay: 4.6s; }

/* ESTRELLAS FUGACES MÚLTIPLES - Efectos espectaculares */
.particle:nth-child(77) { --dx: 160vw; --dy: -80vh; --size: 2px; --speed: 1.8s; --glow: 9px; animation: particleFloat var(--speed) linear infinite; animation-delay: 0.9s; }
.particle:nth-child(78) { --dx: 80vw; --dy: -160vh; --size: 2px; --speed: 1.9s; --glow: 10px; animation: particleFloat var(--speed) linear infinite; animation-delay: 2.4s; }
.particle:nth-child(79) { --dx: -160vw; --dy: 80vh; --size: 2px; --speed: 1.7s; --glow: 9px; animation: particleFloat var(--speed) linear infinite; animation-delay: 4.9s; }
.particle:nth-child(80) { --dx: -80vw; --dy: 160vh; --size: 2px; --speed: 1.8s; --glow: 10px; animation: particleFloat var(--speed) linear infinite; animation-delay: 6.4s; }

/* Efecto de encendido de TV */
.tv-powerup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 10001;
    animation: tvPowerUp 1.5s ease-out forwards;
}

.tv-line {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 2px;
    background: radial-gradient(ellipse, 
        rgba(255, 255, 255, 0.9) 0%,
        rgba(255, 255, 255, 0.7) 15%,
        rgba(255, 255, 255, 0.5) 30%,
        rgba(255, 255, 255, 0.3) 45%,
        rgba(255, 255, 255, 0.15) 60%,
        rgba(255, 255, 255, 0.05) 80%,
        transparent 100%
    );
    transform: translate(-50%, -50%);
    animation: tvLineExpand 1.5s ease-out forwards;
    border-radius: 50%;
    filter: blur(8px);
}

/* Texto elegante */
.splash-text {
    opacity: 0;
    animation: textFadeIn 1s ease-out 1.8s forwards;
}

.streaming-text {
    color: rgba(255, 255, 255, 0.8);
    font-size: clamp(0.9rem, 2vw, 1.2rem);
    font-weight: 300;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Luces ambientales */
.ambient-lights {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.light {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.3;
    animation: ambientFloat 6s ease-in-out infinite;
}

.light-1 {
    top: 20%;
    left: 10%;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(123, 104, 238, 0.4), transparent);
    animation-delay: 0s;
}

.light-2 {
    bottom: 30%;
    right: 15%;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(102, 126, 234, 0.3), transparent);
    animation-delay: 2s;
}

.light-3 {
    top: 60%;
    left: 70%;
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, rgba(118, 75, 162, 0.4), transparent);
    animation-delay: 4s;
}

/* ============================================
   🎭 ANIMACIONES CINEMATOGRÁFICAS 
   ============================================ */

@keyframes logoEntrance {
    0% {
        opacity: 0;
        transform: scale(0.5) translateY(50px);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.1) translateY(0);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes logoGlow {
    0%, 100% {
        filter: drop-shadow(0 0 20px rgba(123, 104, 238, 0.6));
    }
    50% {
        filter: drop-shadow(0 0 40px rgba(123, 104, 238, 1)) drop-shadow(0 0 60px rgba(123, 104, 238, 0.4));
    }
}

@keyframes logoShockwave {
    0% {
        transform: scale(1);
        filter: drop-shadow(0 0 20px rgba(123, 104, 238, 0.6)) brightness(1);
    }
    15% {
        transform: scale(1.05);
        filter: drop-shadow(0 0 80px rgba(255, 255, 255, 1)) drop-shadow(0 0 120px rgba(123, 104, 238, 0.8)) brightness(1.5);
    }
    30% {
        transform: scale(1.02);
        filter: drop-shadow(0 0 60px rgba(255, 255, 255, 0.8)) drop-shadow(0 0 100px rgba(123, 104, 238, 0.6)) brightness(1.3);
    }
    100% {
        transform: scale(1);
        filter: drop-shadow(0 0 20px rgba(123, 104, 238, 0.6)) brightness(1);
    }
}

@keyframes pulseGlow {
    0%, 100% {
        opacity: 0.3;
        transform: translate(-50%, -50%) scale(0.5);
    }
    50% {
        opacity: 0.6;
        transform: translate(-50%, -50%) scale(0.6);
    }
}

@keyframes haloExplosion {
    0% {
        opacity: 0.3;
        transform: translate(-50%, -50%) scale(0.3);
    }
    15% {
        opacity: 0.9;
        transform: translate(-50%, -50%) scale(0.8);
    }
    40% {
        opacity: 0.7;
        transform: translate(-50%, -50%) scale(1.5);
    }
    70% {
        opacity: 0.4;
        transform: translate(-50%, -50%) scale(3);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(6);
    }
}

/* ✨ ESTRELLAS CON HALOS DE COLORES VARIADOS ✨ */

/* ESTRELLAS BLANCAS - Brillantes y puras (divisibles por 3) */
.particle:nth-child(3n)::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--size);
    height: var(--size);
    background: radial-gradient(circle, 
        rgba(255, 255, 255, 1) 0%, 
        rgba(240, 248, 255, 0.9) 40%, 
        rgba(224, 255, 255, 0.7) 70%, 
        transparent 100%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 
        0 0 var(--glow) rgba(255, 255, 255, 1), 
        0 0 calc(var(--glow) * 2) rgba(240, 248, 255, 0.8),
        0 0 calc(var(--glow) * 3) rgba(224, 255, 255, 0.6);
}

/* ESTRELLAS MORADAS - Místicas y profundas (divisibles por 3 + 1) */
.particle:nth-child(3n+1)::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--size);
    height: var(--size);
    background: radial-gradient(circle, 
        rgba(255, 255, 255, 1) 0%, 
        rgba(138, 43, 226, 0.9) 40%, 
        rgba(75, 0, 130, 0.7) 70%, 
        transparent 100%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 
        0 0 var(--glow) rgba(255, 255, 255, 1), 
        0 0 calc(var(--glow) * 2) rgba(138, 43, 226, 0.8),
        0 0 calc(var(--glow) * 3) rgba(75, 0, 130, 0.6);
}

/* ESTRELLAS ROSADAS - Cálidas y suaves (divisibles por 3 + 2) */
.particle:nth-child(3n+2)::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--size);
    height: var(--size);
    background: radial-gradient(circle, 
        rgba(255, 255, 255, 1) 0%, 
        rgba(255, 105, 180, 0.9) 40%, 
        rgba(255, 20, 147, 0.7) 70%, 
        transparent 100%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 
        0 0 var(--glow) rgba(255, 255, 255, 1), 
        0 0 calc(var(--glow) * 2) rgba(255, 105, 180, 0.8),
        0 0 calc(var(--glow) * 3) rgba(255, 20, 147, 0.6);
}

/* ESTRELLAS CON RAYOS CRUZADOS - Colores alternados */
/* Rayos blancos */
.particle:nth-child(6n+1)::after,
.particle:nth-child(6n+2)::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(var(--size) * 4);
    height: 1px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.1) 10%,
        rgba(255, 255, 255, 0.4) 30%, 
        rgba(255, 255, 255, 0.9) 50%, 
        rgba(255, 255, 255, 0.4) 70%,
        rgba(255, 255, 255, 0.1) 90%,
        transparent 100%);
    transform: translate(-50%, -50%);
    box-shadow: 
        0 0 calc(var(--glow) * 0.3) rgba(255, 255, 255, 0.9),
        0 0 calc(var(--glow) * 0.8) rgba(224, 255, 255, 0.7),
        /* Rayo vertical simulado */
        0 calc(var(--size) * -2) 0 -0.5px rgba(255, 255, 255, 0.4),
        0 calc(var(--size) * -1.5) 0 -0.5px rgba(255, 255, 255, 0.6),
        0 calc(var(--size) * -1) 0 -0.5px rgba(255, 255, 255, 0.8),
        0 calc(var(--size) * -0.5) 0 -0.5px rgba(255, 255, 255, 0.9),
        0 calc(var(--size) * 0.5) 0 -0.5px rgba(255, 255, 255, 0.9),
        0 calc(var(--size) * 1) 0 -0.5px rgba(255, 255, 255, 0.8),
        0 calc(var(--size) * 1.5) 0 -0.5px rgba(255, 255, 255, 0.6),
        0 calc(var(--size) * 2) 0 -0.5px rgba(255, 255, 255, 0.4);
    z-index: 1;
}

/* Rayos morados */
.particle:nth-child(6n+3)::after,
.particle:nth-child(6n+4)::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(var(--size) * 4);
    height: 1px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(138, 43, 226, 0.1) 10%,
        rgba(138, 43, 226, 0.4) 30%, 
        rgba(255, 255, 255, 0.9) 50%, 
        rgba(138, 43, 226, 0.4) 70%,
        rgba(138, 43, 226, 0.1) 90%,
        transparent 100%);
    transform: translate(-50%, -50%);
    box-shadow: 
        0 0 calc(var(--glow) * 0.3) rgba(255, 255, 255, 0.9),
        0 0 calc(var(--glow) * 0.8) rgba(138, 43, 226, 0.7),
        /* Rayo vertical simulado */
        0 calc(var(--size) * -2) 0 -0.5px rgba(138, 43, 226, 0.4),
        0 calc(var(--size) * -1.5) 0 -0.5px rgba(138, 43, 226, 0.6),
        0 calc(var(--size) * -1) 0 -0.5px rgba(138, 43, 226, 0.8),
        0 calc(var(--size) * -0.5) 0 -0.5px rgba(255, 255, 255, 0.9),
        0 calc(var(--size) * 0.5) 0 -0.5px rgba(255, 255, 255, 0.9),
        0 calc(var(--size) * 1) 0 -0.5px rgba(138, 43, 226, 0.8),
        0 calc(var(--size) * 1.5) 0 -0.5px rgba(138, 43, 226, 0.6),
        0 calc(var(--size) * 2) 0 -0.5px rgba(138, 43, 226, 0.4);
    z-index: 1;
}

/* Rayos rosados */
.particle:nth-child(6n+5)::after,
.particle:nth-child(6n)::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(var(--size) * 4);
    height: 1px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 105, 180, 0.1) 10%,
        rgba(255, 105, 180, 0.4) 30%, 
        rgba(255, 255, 255, 0.9) 50%, 
        rgba(255, 105, 180, 0.4) 70%,
        rgba(255, 105, 180, 0.1) 90%,
        transparent 100%);
    transform: translate(-50%, -50%);
    box-shadow: 
        0 0 calc(var(--glow) * 0.3) rgba(255, 255, 255, 0.9),
        0 0 calc(var(--glow) * 0.8) rgba(255, 105, 180, 0.7),
        /* Rayo vertical simulado */
        0 calc(var(--size) * -2) 0 -0.5px rgba(255, 105, 180, 0.4),
        0 calc(var(--size) * -1.5) 0 -0.5px rgba(255, 105, 180, 0.6),
        0 calc(var(--size) * -1) 0 -0.5px rgba(255, 105, 180, 0.8),
        0 calc(var(--size) * -0.5) 0 -0.5px rgba(255, 255, 255, 0.9),
        0 calc(var(--size) * 0.5) 0 -0.5px rgba(255, 255, 255, 0.9),
        0 calc(var(--size) * 1) 0 -0.5px rgba(255, 105, 180, 0.8),
        0 calc(var(--size) * 1.5) 0 -0.5px rgba(255, 105, 180, 0.6),
        0 calc(var(--size) * 2) 0 -0.5px rgba(255, 105, 180, 0.4);
    z-index: 1;
}



@keyframes particleFloat {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) translate(0, 0) scale(0.3);
        filter: brightness(0.5);
    }
    3% {
        opacity: 0.6;
        transform: translate(-50%, -50%) translate(calc(var(--dx) * 0.05), calc(var(--dy) * 0.05)) scale(0.8);
        filter: brightness(1.2);
    }
    8% {
        opacity: 1;
        transform: translate(-50%, -50%) translate(calc(var(--dx) * 0.12), calc(var(--dy) * 0.12)) scale(1);
        filter: brightness(1.8);
    }
    15% {
        opacity: 1;
        transform: translate(-50%, -50%) translate(calc(var(--dx) * 0.25), calc(var(--dy) * 0.25)) scale(1.1);
        filter: brightness(1.6);
    }
    30% {
        opacity: 1;
        transform: translate(-50%, -50%) translate(calc(var(--dx) * 0.45), calc(var(--dy) * 0.45)) scale(1);
        filter: brightness(1.4);
    }
    50% {
        opacity: 0.9;
        transform: translate(-50%, -50%) translate(calc(var(--dx) * 0.65), calc(var(--dy) * 0.65)) scale(0.9);
        filter: brightness(1.2);
    }
    70% {
        opacity: 0.7;
        transform: translate(-50%, -50%) translate(calc(var(--dx) * 0.82), calc(var(--dy) * 0.82)) scale(0.8);
        filter: brightness(1);
    }
    85% {
        opacity: 0.4;
        transform: translate(-50%, -50%) translate(calc(var(--dx) * 0.93), calc(var(--dy) * 0.93)) scale(0.6);
        filter: brightness(0.8);
    }
    95% {
        opacity: 0.1;
        transform: translate(-50%, -50%) translate(calc(var(--dx) * 0.98), calc(var(--dy) * 0.98)) scale(0.4);
        filter: brightness(0.6);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) translate(var(--dx), var(--dy)) scale(0.3);
        filter: brightness(0.5);
    }
}

@keyframes tvPowerUp {
    0% {
        opacity: 1;
    }
    70% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes tvLineExpand {
    0% {
        width: 2px;
        height: 2px;
        opacity: 1;
        background: radial-gradient(circle, 
            rgba(255, 255, 255, 0.9) 0%, 
            rgba(255, 255, 255, 0.6) 30%, 
            rgba(255, 255, 255, 0.2) 70%, 
            transparent 100%);
        transform: translate(-50%, -50%) scale(1);
        filter: blur(2px);
    }
    15% {
        width: 8px;
        height: 120vh;
        opacity: 0.9;
        background: radial-gradient(ellipse, 
            rgba(255, 255, 255, 0.8) 0%,
            rgba(255, 255, 255, 0.5) 20%,
            rgba(255, 255, 255, 0.3) 40%,
            rgba(255, 255, 255, 0.1) 70%,
            transparent 100%);
        transform: translate(-50%, -50%) scale(1);
        filter: blur(12px);
    }
    45% {
        width: 120vw;
        height: 130vh;
        opacity: 0.7;
        background: radial-gradient(ellipse, 
            rgba(255, 255, 255, 0.6) 0%,
            rgba(255, 255, 255, 0.35) 15%,
            rgba(255, 255, 255, 0.2) 30%,
            rgba(255, 255, 255, 0.1) 50%,
            rgba(255, 255, 255, 0.03) 75%,
            transparent 100%);
        transform: translate(-50%, -50%) scale(1);
        filter: blur(25px);
    }
    75% {
        width: 180vw;
        height: 160vh;
        opacity: 0.3;
        background: radial-gradient(ellipse, 
            rgba(255, 255, 255, 0.4) 0%,
            rgba(255, 255, 255, 0.2) 10%,
            rgba(255, 255, 255, 0.1) 25%,
            rgba(255, 255, 255, 0.05) 45%,
            rgba(255, 255, 255, 0.01) 70%,
            transparent 100%);
        transform: translate(-50%, -50%) scale(1);
        filter: blur(40px);
    }
    100% {
        width: 250vw;
        height: 200vh;
        opacity: 0;
        background: transparent;
        transform: translate(-50%, -50%) scale(1);
        filter: blur(60px);
    }
}

@keyframes textFadeIn {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes ambientFloat {
    0%, 100% {
        transform: translateY(0) scale(1);
        opacity: 0.3;
    }
    50% {
        transform: translateY(-30px) scale(1.1);
        opacity: 0.5;
    }
}

/* 🌟 ANIMACIONES DE SECUENCIA DE SUPERNOVA 🌟 */

@keyframes nebulaEvolution {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0);
        filter: blur(20px) hue-rotate(0deg);
    }
    20% {
        opacity: 0.3;
        transform: translate(-50%, -50%) scale(0.5);
        filter: blur(15px) hue-rotate(30deg);
    }
    50% {
        opacity: 0.6;
        transform: translate(-50%, -50%) scale(1.2);
        filter: blur(10px) hue-rotate(60deg);
    }
    80% {
        opacity: 0.8;
        transform: translate(-50%, -50%) scale(1.8);
        filter: blur(8px) hue-rotate(90deg);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(2.5);
        filter: blur(5px) hue-rotate(120deg);
    }
}

@keyframes supernovaCore {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0);
        filter: brightness(1) blur(0px) hue-rotate(0deg);
        box-shadow: 0 0 0 rgba(255, 255, 255, 0);
    }
    5% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(0.3);
        filter: brightness(10) blur(3px) hue-rotate(0deg);
        box-shadow: 0 0 100px rgba(255, 255, 255, 1);
    }
    15% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(2);
        filter: brightness(8) blur(5px) hue-rotate(30deg);
        box-shadow: 0 0 150px rgba(135, 206, 250, 0.8);
    }
    30% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(6);
        filter: brightness(6) blur(8px) hue-rotate(60deg);
        box-shadow: 0 0 200px rgba(255, 215, 0, 0.6);
    }
    50% {
        opacity: 0.9;
        transform: translate(-50%, -50%) scale(12);
        filter: brightness(4) blur(12px) hue-rotate(90deg);
        box-shadow: 0 0 250px rgba(255, 140, 0, 0.5);
    }
    70% {
        opacity: 0.7;
        transform: translate(-50%, -50%) scale(18);
        filter: brightness(3) blur(18px) hue-rotate(120deg);
        box-shadow: 0 0 300px rgba(220, 20, 60, 0.4);
    }
    100% {
        opacity: 0.5;
        transform: translate(-50%, -50%) scale(25);
        filter: brightness(2) blur(25px) hue-rotate(180deg);
        box-shadow: 0 0 400px rgba(138, 43, 226, 0.3);
    }
}

@keyframes filamentsGrowth {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0);
        filter: blur(10px) brightness(1);
    }
    20% {
        opacity: 0.4;
        transform: translate(-50%, -50%) scale(0.3);
        filter: blur(8px) brightness(2);
    }
    40% {
        opacity: 0.7;
        transform: translate(-50%, -50%) scale(0.8);
        filter: blur(6px) brightness(1.8);
    }
    60% {
        opacity: 0.9;
        transform: translate(-50%, -50%) scale(1.3);
        filter: blur(4px) brightness(1.5);
    }
    80% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.8);
        filter: blur(3px) brightness(1.3);
    }
    100% {
        opacity: 0.8;
        transform: translate(-50%, -50%) scale(2.2);
        filter: blur(2px) brightness(1.1);
    }
}

@keyframes explosionRing {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0);
        filter: blur(0px);
    }
    10% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(0.5);
        filter: blur(1px);
    }
    30% {
        opacity: 0.8;
        transform: translate(-50%, -50%) scale(3);
        filter: blur(2px);
    }
    70% {
        opacity: 0.4;
        transform: translate(-50%, -50%) scale(8);
        filter: blur(5px);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(12);
        filter: blur(10px);
    }
}

@keyframes explosionShockwave {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0);
        filter: blur(0px);
    }
    5% {
        opacity: 0.8;
        transform: translate(-50%, -50%) scale(0.2);
        filter: blur(2px);
    }
    20% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(2);
        filter: blur(4px);
    }
    40% {
        opacity: 0.7;
        transform: translate(-50%, -50%) scale(6);
        filter: blur(8px);
    }
    70% {
        opacity: 0.3;
        transform: translate(-50%, -50%) scale(12);
        filter: blur(15px);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(20);
        filter: blur(25px);
    }
}

@keyframes explosionFlash {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0);
    }
    5% {
        opacity: 0.9;
        transform: translate(-50%, -50%) scale(0.1);
    }
    15% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(0.8);
    }
    30% {
        opacity: 0.7;
        transform: translate(-50%, -50%) scale(1.5);
    }
    60% {
        opacity: 0.3;
        transform: translate(-50%, -50%) scale(2.5);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(4);
    }
}

@keyframes debrisExplosion {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) translate(0, 0) scale(0) rotate(0deg);
        filter: brightness(1);
    }
    5% {
        opacity: 1;
        transform: translate(-50%, -50%) translate(0, 0) scale(2) rotate(0deg);
        filter: brightness(5);
    }
    20% {
        opacity: 1;
        transform: translate(-50%, -50%) translate(calc(var(--debris-x) * 0.3), calc(var(--debris-y) * 0.3)) scale(1.5) rotate(180deg);
        filter: brightness(3);
    }
    50% {
        opacity: 0.8;
        transform: translate(-50%, -50%) translate(calc(var(--debris-x) * 0.7), calc(var(--debris-y) * 0.7)) scale(1) rotate(360deg);
        filter: brightness(2);
    }
    80% {
        opacity: 0.4;
        transform: translate(-50%, -50%) translate(calc(var(--debris-x) * 0.9), calc(var(--debris-y) * 0.9)) scale(0.6) rotate(540deg);
        filter: brightness(1.5);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) translate(var(--debris-x), var(--debris-y)) scale(0.2) rotate(720deg);
        filter: brightness(0.5);
    }
}

/* ============================================
   📱 RESPONSIVE SPLASH 
   ============================================ */

@media (max-width: 768px) {
    .splash-logo {
        width: clamp(150px, 35vw, 250px);
    }
    
    .streaming-text {
        font-size: clamp(0.8rem, 3vw, 1rem);
        letter-spacing: 2px;
    }
    
    .particle {
        width: 3px;
        height: 3px;
    }
    
    .light {
        filter: blur(40px);
    }
    
    .light-1 { width: 120px; height: 120px; }
    .light-2 { width: 100px; height: 100px; }
    .light-3 { width: 80px; height: 80px; }
}

/* Reducir movimiento para usuarios sensibles */
@media (prefers-reduced-motion: reduce) {
    .tv-splash,
    .splash-logo,
    .logo-glow,
    .particle,
    .light,
    .streaming-text {
        animation: none !important;
    }
    
    .logo-container {
        animation: logoEntranceReduced 1s ease-out forwards;
    }
    
    .splash-text {
        opacity: 1;
        animation: none;
    }
}

@keyframes logoEntranceReduced {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}