/* ============================================
   🚀 PREPARING LAG FIX - v1.0
   ============================================
   
   PROBLEMAS IDENTIFICADOS:
   1. Estilos duplicados y conflictivos para body.preparing
   2. Animaciones pesadas acumuladas (4+ animaciones simultáneas)
   3. CSS para elementos que no existen en HTML
   4. will-change excesivo
   
   SOLUCIÓN: Este archivo debe cargarse DESPUÉS de boxing-timer.css
   para sobreescribir los estilos problemáticos
   ============================================ */

/* ============================================
   1️⃣ ANULAR ANIMACIONES DUPLICADAS DEL PREPARING
   ============================================ */

/* ── PREPARANDO text — heartbeat (scale + opacity only, 60fps safe) ── */
body.preparing:not(.ali-theme) .fs-status {
    font-size: 10vw !important;
    font-weight: 900 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    text-align: center !important;
    color: #FFFFFF !important;
    /* text-shadow is STATIC — never animated */
    text-shadow:
        0 0 15px rgba(0, 255, 0, 0.9),
        0 0 40px rgba(0, 255, 0, 0.5) !important;
    /* heartbeat: only transform + opacity touch the compositor */
    animation: preparingHeartbeat 2.5s ease-in-out infinite !important;
    will-change: transform !important;
    transform: translateZ(0) !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
    position: relative !important; /* anchor for ::before glow layer */
}

/* Pulsing glow aura behind the text — opacity-only animation */
body.preparing:not(.ali-theme) .fs-status::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 140%; height: 260%;
    background: radial-gradient(ellipse at center,
        rgba(0, 255, 0, 0.22) 0%,
        rgba(0, 200, 0, 0.08) 45%,
        transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
    will-change: opacity !important;
    animation: preparingAura 2.5s ease-in-out infinite !important;
}

/* ── Ali theme — same timing, gold colors ── */
body.preparing.ali-theme .fs-status {
    font-size: 10vw !important;
    font-weight: 900 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    text-align: center !important;
    text-shadow:
        0 0 15px rgba(255, 215, 0, 0.9),
        0 0 40px rgba(255, 215, 0, 0.5) !important;
    animation: preparingHeartbeat 2.5s ease-in-out infinite !important;
    will-change: transform !important;
    transform: translateZ(0) !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
    position: relative !important;
}

body.preparing.ali-theme .fs-status::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 140%; height: 260%;
    background: radial-gradient(ellipse at center,
        rgba(255, 215, 0, 0.22) 0%,
        rgba(220, 170, 0, 0.08) 45%,
        transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
    will-change: opacity !important;
    animation: preparingAura 2.5s ease-in-out infinite !important;
}

/* ── Shared heartbeat keyframes — stops idénticos para sincronía perfecta ── */
/* Patrón: reposo → expansión máxima (20%) → recogida → pausa larga */
@keyframes preparingHeartbeat {
    0%    { transform: translateZ(0) scale(1);    }
    20%   { transform: translateZ(0) scale(1.06); }
    50%   { transform: translateZ(0) scale(1.01); }
    70%   { transform: translateZ(0) scale(1);    }
    100%  { transform: translateZ(0) scale(1);    }
}

/* Aura — MISMOS stops que preparingHeartbeat (0/20/50/70/100) */
@keyframes preparingAura {
    0%    { opacity: 0.25; }
    20%   { opacity: 1.00; }
    50%   { opacity: 0.30; }
    70%   { opacity: 0.25; }
    100%  { opacity: 0.25; }
}

/* ── Countdown timer — subtle lub-dub in sync ── */
body.preparing .fs-time {
    font-size: clamp(80px, 15vh, 120px) !important;
    font-weight: 900 !important;
    color: #FFFFFF !important;
    font-family: 'Courier New', monospace !important;
    line-height: 1 !important;
    /* text-shadow STATIC — no animation */
    text-shadow:
        0 0 20px rgba(0, 255, 0, 0.8),
        0 0 50px rgba(0, 255, 0, 0.4) !important;
    /* scale is smaller — the number is huge, subtle is enough */
    animation: preparingTimerBeat 2.5s ease-in-out infinite !important;
    will-change: transform !important;
    transform: translateZ(0) !important;
    position: relative !important;
}

/* Glow aura for the timer number */
body.preparing .fs-time::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 90%; height: 120%;
    background: radial-gradient(ellipse at center,
        rgba(0, 255, 0, 0.15) 0%,
        rgba(0, 200, 0, 0.05) 50%,
        transparent 72%);
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
    will-change: opacity !important;
    animation: preparingAura 2.5s ease-in-out infinite !important;
}

/* preparingTimerBeat — MISMOS stops (0/20/50/70/100) */
@keyframes preparingTimerBeat {
    0%    { transform: translateZ(0) scale(1);     }
    20%   { transform: translateZ(0) scale(1.03);  }
    50%   { transform: translateZ(0) scale(1.005); }
    70%   { transform: translateZ(0) scale(1);     }
    100%  { transform: translateZ(0) scale(1);     }
}

/* ============================================
   2️⃣ DESHABILITAR CSS PARA ELEMENTOS INEXISTENTES
   ============================================ */

/* Estos elementos NO existen en index.html pero el CSS los anima */
.preparing-container,
.preparing-container::before,
.energy-particles,
.particle,
.particle.p1, .particle.p2, .particle.p3, .particle.p4, .particle.p5,
.particle.p6, .particle.p7, .particle.p8, .particle.p9, .particle.p10,
.preparing-waves,
.breath-circle,
.breath-ring,
.breath-core,
.energy-lines,
.energy-bar-container,
.energy-bar-bg,
.energy-bar-fill,
.energy-bar-glow {
    display: none !important;
    animation: none !important;
    will-change: auto !important;
}

/* ============================================
   3️⃣ ELIMINAR will-change EXCESIVO
   ============================================ */

/* Remover will-change de elementos que no lo necesitan */
.wave,
.breath-ring,
.breath-core,
.energy-bar-fill {
    will-change: auto !important;
}

/* Solo mantener will-change en el background transition */
body::before {
    will-change: auto !important; /* El background transition es más rápido sin will-change */
    transition: background 0.4s ease !important; /* Más rápido */
}

/* ============================================
   4️⃣ OPTIMIZAR HOURGLASS (SI SE USA)
   ============================================ */

/* Remover animaciones pesadas del hourglass */
.prep-number {
    animation: none !important; /* numberPulse causa lag */
    transform: none !important;
    filter: none !important;
}

/* Sand stream sin animación */
.sand-stream {
    animation: none !important;
}

/* ============================================
   5️⃣ FONDO DEL PREPARING - SIMPLIFICADO
   ============================================ */

body.preparing::before {
    /* Fondo estático Anti-Lag — Verde Neón táctico */
    background: linear-gradient(135deg, #003300 0%, #001a00 100%) !important;
    transition: background 0.3s ease !important;
}

/* ============================================
   6️⃣ FULLSCREEN TIMER - OPTIMIZADO
   ============================================ */

.fullscreen-timer {
    /* Forzar GPU compositing */
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
    
    /* Pero no usar will-change (causa más trabajo del compositor) */
    will-change: auto !important;
}

/* Blinking optimizado - solo opacity */
.fullscreen-timer.blinking {
    animation: blinkOptimized 0.5s ease-in-out infinite !important;
}

@keyframes blinkOptimized {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.75; }
}

/* ============================================
   7️⃣ RESPONSIVE - SIMPLIFICADO
   ============================================ */

@media (max-width: 768px) {
    body.preparing:not(.ali-theme) .fs-status,
    body.preparing.ali-theme .fs-status {
        font-size: 9vw !important;
    }
    
    body.preparing .fs-time {
        font-size: clamp(80px, 15vh, 120px) !important;
    }
}

@media (max-width: 480px) {
    body.preparing:not(.ali-theme) .fs-status {
        font-size: 8vw !important;
        /* Menos text-shadow en móviles pequeños */
        text-shadow: 0 0 10px rgba(0, 255, 0, 0.8) !important;
    }
    
    body.preparing.ali-theme .fs-status {
        font-size: 8vw !important;
        text-shadow: 0 0 10px rgba(255, 215, 0, 0.8) !important;
    }
    
    body.preparing .fs-time {
        font-size: clamp(80px, 15vh, 120px) !important;
        text-shadow: 0 0 15px rgba(0, 255, 0, 0.7) !important;
    }
}

/* ============================================
   8️⃣ PREFERENCIA DE MOVIMIENTO REDUCIDO
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    body.preparing .fs-status,
    body.preparing .fs-time,
    .fullscreen-timer.blinking {
        animation: none !important;
    }
}

/* ============================================
   🔥 FIGHT Y RESTING - TAMBIÉN OPTIMIZADOS
   ============================================ */

/* Fight status - texto sin animación pesada */
body.fighting .fs-status {
    animation: none !important;
    text-shadow: 
        0 0 20px #ff4500,
        0 0 40px #ff6600 !important;
}

/* Fight time - sin fightGlow */
body.fighting .fs-time {
    animation: none !important;
}

/* Resting - sin animación de breathe */
body.resting .fs-time {
    animation: none !important;
}

/* ============================================
   9️⃣ POINTER-EVENTS FIX - BOTONES CLICKEABLES
   ============================================ */

/* Asegurar que los efectos visuales no bloqueen los botones */
.breathe-effects,
.sparkles-container,
.clouds-container,
.birds-container,
.wind-leaves,
.energy-particles,
.energy-lines,
.preparing-container,
.vignette-overlay {
    pointer-events: none !important;
    z-index: 5 !important;
}

/* Botones en su posición normal pero clickeables sobre los efectos */
.btn-group,
.timer-controls {
    position: relative !important;
    z-index: 9999 !important;
    pointer-events: auto !important;
    margin-top: 20px !important;
    bottom: auto !important;
    top: auto !important;
}

/* Floating controls - mantener en su posición fija inferior */
.floating-controls {
    z-index: 9999 !important;
    pointer-events: auto !important;
}

/* Asegurar que los botones individuales sean clickeables */
.float-btn,
.btn,
.btn-start,
.btn-settings,
#resetBtn,
#pauseBtn {
    pointer-events: auto !important;
}