/* ========================================================================= anim.css — estados INICIALES de las animaciones de reveal. Van "escondidos" solo si el JS está activo (la clase .js-anim la añade un script en ). Así, si el JavaScript fallara, todo se ve con normalidad. El JS (anim.js) los anima hacia su estado visible. ========================================================================= */ /* Anti-desbordamiento horizontal. Los estados iniciales desplazados en X (anim-fade-left arranca 40px a la DERECHA) sobresalen del borde: un transform no cambia el layout, pero SÍ cuenta como desbordamiento desplazable, así que el documento se ensancha, sale scroll horizontal y la página se descentra hasta que la animación lo devuelve a su sitio. Se usa `clip` y NO `hidden`: `hidden` en body forzaría overflow-y:auto y convertiría el body en contenedor de scroll, rompiendo position:sticky (el reveal del footer) y el scroll suave. `clip` recorta sin ese efecto. */ html.js-anim, html.js-anim body { overflow-x: clip; } /* Recorrido de 32px: la suavidad la da la curva (expo.out), no la distancia. */ .js-anim .anim-fade { opacity: 0; } .js-anim .anim-fade-up { opacity: 0; transform: translateY(32px); } .js-anim .anim-fade-down { opacity: 0; transform: translateY(-32px); } .js-anim .anim-fade-left { opacity: 0; transform: translateX(32px); } .js-anim .anim-fade-right { opacity: 0; transform: translateX(-32px); } .js-anim .anim-scale { opacity: 0; transform: scale(.92); } /* Modificador anim-blur: la entrada además "enfoca" (blur 10px -> 0) */ .js-anim .anim-blur { filter: blur(10px); } /* Cascada: se ocultan los hijos directos del contenedor */ .js-anim .anim-stagger > * { opacity: 0; transform: translateY(32px); } /* Títulos con máscara (líneas / palabras / letras): ocultos hasta que SplitText prepara el reveal */ .js-anim .anim-split, .js-anim .anim-split-words, .js-anim .anim-split-chars, .js-anim .anim-reveal-scroll, .js-anim .anim-reveal-scroll-chars { opacity: 0; } /* Rendimiento: avisar al navegador de qué propiedades van a cambiar */ .js-anim [class*="anim-"] { will-change: opacity, transform; } .js-anim .anim-blur { will-change: opacity, transform, filter; }