/**
 * Low Performance Mode Styles - SoulsGuides
 * 
 * Estilos simplificados que se activan cuando se detecta un dispositivo
 * de bajo rendimiento o la aceleración de hardware está desactivada.
 * 
 * FILOSOFÍA: Mantener la estética visual pero eliminar efectos costosos.
 * El sitio debe verse "profesional y funcional", no "roto".
 */

/* =====================================================
   RESET DE PROPIEDADES COSTOSAS (GPU-INTENSIVE)
   ===================================================== */

/* Desactivar will-change global - evita reservar memoria GPU innecesaria */
.low-perf *,
.low-perf *::before,
.low-perf *::after {
    will-change: auto !important;
}

/* =====================================================
   BACKDROP-FILTER → FONDOS SÓLIDOS
   Reemplazamos blur glassmórfico con fondos opacos
   ===================================================== */

/* Header principal */
.low-perf .site-header {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(10, 10, 16, 0.98) !important;
}

/* Dropdowns y menús */
.low-perf .dropdown {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(18, 18, 26, 0.99) !important;
}

/* Modales */
.low-perf .modal-content,
.low-perf [class*="modal"] {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Sidebar de navegación móvil */
.low-perf .nav-links {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(14, 14, 22, 0.99) !important;
}

/* Cards con efecto glass */
.low-perf .card::before {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* =====================================================
   FILTER: BLUR → OCULTAR O SIMPLIFICAR
   Los blur decorativos se eliminan completamente
   ===================================================== */

/* Fondo animado del body */
.low-perf body::before {
    filter: none !important;
    animation: none !important;
    opacity: 0.6 !important;
    /* Mantener algo de decoración */
}

/* Hero parallax blur */
.low-perf .hero::before {
    filter: none !important;
    transform: scale(1.02) !important;
    /* Pequeño zoom sin animación */
}

/* Efectos de blur en hover de cards */
.low-perf .card::after,
.low-perf .game::before {
    filter: none !important;
    opacity: 0 !important;
}

/* Pseudo-elementos con blur decorativo */
.low-perf .section+.section::after,
.low-perf .hero+.section::after {
    filter: none !important;
}

/* Imágenes con filtros */
.low-perf .game img,
.low-perf .latest-cover img {
    filter: none !important;
}

/* =====================================================
   ANIMACIONES → DESACTIVAR O SIMPLIFICAR
   Las animaciones costosas se convierten en estáticas
   ===================================================== */

/* Animación de respiración de card.love */
.low-perf .card.love {
    animation: none !important;
}

/* Animaciones de shimmer/loading */
.low-perf [class*="shimmer"],
.low-perf [class*="loading"] {
    animation: none !important;
}

/* Spinner de carga - mantener pero simplificar */
.low-perf .spinner {
    animation-duration: 1.5s !important;
    /* Más lento = menos CPU */
}

/* =====================================================
   TRANSICIONES → SIMPLIFICAR A OPACITY ÚNICAMENTE
   Transform es costoso, opacity es barato
   ===================================================== */

/* Cards y elementos hover */
.low-perf .card,
.low-perf .game,
.low-perf .latest-cover,
.low-perf .btn,
.low-perf a {
    transition: opacity 0.15s ease,
        color 0.15s ease,
        background-color 0.15s ease,
        border-color 0.15s ease !important;
}

/* Desactivar transform en hover */
.low-perf .card:hover,
.low-perf .game:hover,
.low-perf .latest-cover:hover img {
    transform: none !important;
}

/* Imágenes dentro de cards */
.low-perf .game:hover img,
.low-perf .latest-cover:hover img {
    transform: none !important;
}

/* =====================================================
   BOX-SHADOW → SIMPLIFICAR
   Shadows animados son costosos, usar estáticos simples
   ===================================================== */

/* Cards en hover - shadow estático simple */
.low-perf .game:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}

.low-perf .card:hover {
    box-shadow: none !important;
}

/* =====================================================
   FIXES ESPECÍFICOS POR COMPONENTE
   ===================================================== */

/* Guide components con backdrop-filter */
.low-perf .guide-header,
.low-perf .guide-nav,
.low-perf .items-header,
.low-perf .filter-bar {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(14, 14, 22, 0.98) !important;
}

/* Tooltips */
.low-perf .tooltip,
.low-perf [role="tooltip"] {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(20, 20, 30, 0.98) !important;
}

/* FAQ sections */
.low-perf .faq-item,
.low-perf .faq-answer {
    transition: none !important;
}

/* Hub cards */
.low-perf .hub-card,
.low-perf .guide-card {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.low-perf .hub-card:hover,
.low-perf .guide-card:hover {
    transform: none !important;
}

/* =====================================================
   SCROLL PERFORMANCE
   Evitar repaints durante scroll
   ===================================================== */

.low-perf .site-header {
    /* Forzar optimización para header sticky sin usar will-change */
    /* NOTA: NO usar 'paint' aquí - recorta dropdowns que sobresalen del header */
    contain: layout style !important;
}

/* =====================================================
   INDICADOR VISUAL (OPCIONAL - DEBUG)
   Muestra un pequeño indicador de modo bajo rendimiento
   Descomentar para debug
   ===================================================== */
/*
.low-perf::after {
  content: "⚡ Low Perf";
  position: fixed;
  bottom: 8px;
  right: 8px;
  padding: 4px 8px;
  background: rgba(255, 100, 100, 0.9);
  color: white;
  font-size: 10px;
  font-weight: bold;
  border-radius: 4px;
  z-index: 99999;
  pointer-events: none;
}
*/

/* =====================================================
   MEDIA QUERY: RESPETAR REDUCED-MOTION DEL SISTEMA
   ===================================================== */

@media (prefers-reduced-motion: reduce) {

    /* Forzar animaciones mínimas si el usuario tiene esta preferencia del sistema */
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}



/* =====================================================
   UTILIDAD: OVERRIDE MANUAL
   Clases para forzar comportamiento desde JS
   ===================================================== */

/* Usuario fuerza modo alto rendimiento */
.force-high-perf .site-header {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.force-high-perf body::before {
    filter: blur(40px) saturate(120%);
    animation: swirl 35s ease-in-out infinite;
}