/**
 * musai - Performance Optimization CSS
 * Complementa performance-optimization.js
 * Añadir después de style.css y index.css
 */

/* ============================================
   1. VARIABLE GLOBAL PARA PAUSAR ANIMACIONES
   ============================================ */

:root {
    --animation-play-state: running;
}

/* ============================================
   2. APLICAR ESTADO DE PAUSA A ANIMACIONES PESADAS
   ============================================ */

.bg-aurora,
.bg-aurora::before,
.orb,
.logo-pulse,
.logo-text,
.gradient-text,
.floating-element,
.hero-image-glow,
.btn-signup,
.btn-bg,
.tab-indicator,
.pricing-btn-primary,
.hero-badge svg,
.credits-display svg {
    animation-play-state: var(--animation-play-state);
}

/* ============================================
   3. OPTIMIZAR DURANTE SCROLL
   ============================================ */

html.is-scrolling .bg-aurora,
html.is-scrolling .bg-aurora::before,
html.is-scrolling .orb,
html.is-scrolling .floating-element,
html.is-scrolling .hero-image-glow,
html.is-scrolling .logo-pulse {
    animation-play-state: paused !important;
}

/* Reducir complejidad visual durante scroll */
html.is-scrolling .bg-aurora {
    opacity: 0.3;
}

html.is-scrolling .bg-orbs {
    opacity: 0.15;
}

/* ============================================
   4. MODO DE BAJO RENDIMIENTO
   ============================================ */

html.low-performance .bg-aurora,
html.low-performance .bg-aurora::before {
    animation: none !important;
    opacity: 0.4;
}

html.low-performance .orb {
    animation: none !important;
    opacity: 0.15;
}

html.low-performance .floating-element {
    animation: none !important;
}

html.low-performance .logo-pulse {
    animation: none !important;
    display: none;
}

html.low-performance .hero-image-glow {
    animation: none !important;
}

html.low-performance .gradient-text,
html.low-performance .logo-text {
    animation: none !important;
    background-size: 100% 100%;
}

html.low-performance .btn-signup,
html.low-performance .btn-bg,
html.low-performance .tab-indicator,
html.low-performance .pricing-btn-primary {
    animation: none !important;
    background-size: 100% 100%;
}

/* ============================================
   5. WILL-CHANGE OPTIMIZADO
   Solo aplicar cuando realmente se necesita
   ============================================ */

/* Elementos que realmente se benefician de will-change */
.orb,
.floating-element {
    will-change: transform;
}

/* Remover will-change cuando está pausado */
.animation-paused {
    will-change: auto !important;
}

/* ============================================
   6. REDUCIR COMPLEJIDAD DE BLUR EN ANIMACIONES
   ============================================ */

/* Blur más ligero para orbs */
html.low-performance .orb {
    filter: blur(60px); /* Reducido de 100px */
}

/* ============================================
   7. COMPOSITOR-ONLY PROPERTIES
   Asegurar que las animaciones usen solo transform/opacity
   ============================================ */

/* Ya están bien implementadas, pero reforzar */
@keyframes orbFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(25px, -25px) scale(1.03); }
    50% { transform: translate(-15px, 20px) scale(0.98); }
    75% { transform: translate(20px, 30px) scale(1.02); }
}

/* ============================================
   8. DESACTIVAR ANIMACIONES COMPLETAMENTE EN DESKTOP
   CUANDO NO SON ESENCIALES (opcional, más agresivo)
   ============================================ */

/* Clase que se puede añadir manualmente para testing */
html.disable-bg-animations .bg-aurora,
html.disable-bg-animations .bg-aurora::before,
html.disable-bg-animations .bg-orbs,
html.disable-bg-animations .orb,
html.disable-bg-animations .floating-element,
html.disable-bg-animations .hero-image-glow {
    animation: none !important;
}

/* ============================================
   9. SOUND WAVE - PAUSAR CUANDO NO SE USA
   ============================================ */

.status-section.hidden .sound-wave span {
    animation-play-state: paused !important;
}

/* ============================================
   10. REDUCIR FRECUENCIA DE ANIMACIONES LARGAS
   ============================================ */

/* Hacer las animaciones de fondo más lentas = menos trabajo para GPU */
@media (prefers-reduced-motion: no-preference) {
    .bg-aurora {
        animation-duration: 40s; /* Era 25s */
    }
    
    .bg-aurora::before {
        animation-duration: 50s; /* Era 30s */
    }
    
    .orb {
        animation-duration: 45s; /* Era 30s */
    }
}

/* ============================================
   11. CONTAIN PARA LIMITAR REPAINT/REFLOW
   ============================================ */

.bg-aurora,
.bg-orbs,
.bg-grid {
    contain: strict;
}

.floating-element {
    contain: layout style;
}

.hero-image-container {
    contain: layout;
}