/* ============================================================
   FX3D PERF CSS — v2: reglas de ahorro durante el scroll
   Quirúrgica: congela solo animaciones DECORATIVAS infinitas.
   NUNCA toca animaciones de entrada/reveal (duración finita)
   para no dejar elementos a medio aparecer.
   ============================================================ */

/* 1. Congelar solo animaciones infinitas (decorativas):
      spotlight fijo a pantalla completa, glows, pulses, twinkles,
      shapes, breathes, marquees, bob, spin de decoración. */
.fx-scrolling *,
.fx-scrolling *::before,
.fx-scrolling *::after {
  animation-play-state: paused !important;
}
/* Excepciones: animaciones de entrada/reveal siguen hasta terminar
   (duración finita <2s) para no romper el render de secciones. */
.fx-scrolling .fx3d-enter,
.fx-scrolling .fx3d-pre,
.fx-scrolling .reveal-on-scroll,
.fx-scrolling [class*="fx3d-word"],
.fx-scrolling .lusive-in,
.fx-scrolling [data-premium-counter] {
  animation-play-state: running !important;
}

/* 2. Spotlight animado fijo a pantalla completa: el más caro de todos.
      Durante el scroll se apaga del todo (queda el fondo base). */
.fx-scrolling .theme-background-effects {
  animation: none !important;
}

/* 3. backdrop-filter durante el scroll = re-blur de todo el contenido
      que pasa debajo. Fuera mientras scrolleas. */
.fx-scrolling header.component,
.fx-scrolling header.premium-nav,
.fx-scrolling .lusive-btn,
.fx-scrolling .catalog-mega,
.fx-scrolling .review-filters,
.fx-scrolling .mobile-purchase-bar {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.fx-scrolling header.component,
.fx-scrolling header.premium-nav {
  background: rgba(5, 8, 12, .96) !important;
}

/* 4. Canvas de estrellas: oculto mientras se scrollea (el JS además
      cancela su rAF). Reaparece al parar con transición suave. */
#fx3d-stars {
  transition: opacity .25s ease;
}
.fx-scrolling #fx3d-stars {
  opacity: 0;
}

/* 5. Contención: aislar repaints del scroll */
.fx-scrolling body {
  will-change: scroll-position;
}

/* 6. Reduced motion: sin transición del propio gobernador */
@media (prefers-reduced-motion: reduce) {
  #fx3d-stars { transition: none; }
}