/* ========================================================================== PRIME CHAMPIONS · INTERRUPTOR GLOBAL DE ANIMACIONES -------------------------------------------------------------------------- Lo enciende `html[data-animaciones="off"]`, que pone js/animaciones.js (y un script inline en el de index.html, para que no haya un fogonazo de animación antes de que cargue el bundle). POR QUÉ NO SE USA `animation: none` El proyecto tiene selectores que arrancan en `opacity: 0` y sólo se vuelven visibles porque su animación termina con `forwards`: .accesoLetra (css/prime-acceso.css:188-190), .accesoEntra (569-571), .totwFicha (css/prime-modos.css:317-318) y .rejillaModo > * (626-627). Con `animation: none` esos elementos se quedarían INVISIBLES para siempre: apagar las animaciones dejaría media interfaz en blanco. Por eso se acelera la duración a 1ms en vez de anular: la animación corre, termina al instante y deja el estado final correcto. Es también la razón por la que los bloques de `prefers-reduced-motion` que ya existen necesitan rescates a mano (css/prime-acceso.css:597-602, css/prime-modos.css:656-661); acá no hacen falta. POR QUÉ NO SE TOCA `transform` js/option-wheel.js:167 posiciona cada opción de la ruleta con un `transform` inline, y js/impostor.js:837 hace lo mismo con las sillas de la mesa. Un `transform: none !important` global no apaga una animación: DESARMA el layout y apila los elementos uno encima de otro. Es exactamente lo que le pasa hoy a `.sin-animaciones-ranking *` (css/style.css:6538-6551), que fue pensada para el ranking pero se aplica al documento entero porque la clase va en . ========================================================================== */ html[data-animaciones="off"], html[data-animaciones="off"] *, html[data-animaciones="off"] *::before, html[data-animaciones="off"] *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0ms !important; } html[data-animaciones="off"] { scroll-behavior: auto !important; } /* Los adornos puramente decorativos que laten detrás de los estilos comprados sí se retiran del todo: no aportan información y son la fuente principal de movimiento constante en el ranking y el perfil. */ html[data-animaciones="off"] [class*="estilo-"]::before, html[data-animaciones="off"] [class*="estilo-"]::after { display: none !important; } /* Lienzos de partículas: el JS ya no los dibuja (js/animaciones.js), pero si alguno quedara montado por una carrera de tiempos, que no se vea. */ html[data-animaciones="off"] #canvasCelebracion, html[data-animaciones="off"] .goalParticles, html[data-animaciones="off"] .pc-clickspark { display: none !important; }