/* Estilos de `revelar.js`. Van aparte para que cada demo los enlace sin tocar
   su propio sistema: aquí no hay ni un color ni una tipografía, solo el
   movimiento.

   Los valores salen del componente ScrollReveal de React Bits: opacidad de
   partida 0,1, desenfoque de 4 px y una rotación de 3 grados en el contenedor.
   La rotación es lo que hace que no parezca un fundido más: el bloque entra
   enderezándose. */
/* ⚠️ SIN ROTACIÓN. La primera versión entraba con `rotate(2.2deg)` copiado del
   componente de React Bits, y Natxo lo cortó el 21/09/2026: «las tipografías
   así caídas no me gustan, no quedan limpias». Tenía razón, y la skill
   `ui-ux-pro-max` dice lo mismo por otro camino: «mantén el desplazamiento
   pequeño (8-16 px) para que se lea como un FUNDIDO, no como un deslizamiento».
   Un titular que entra torcido llama la atención sobre el efecto, no sobre lo
   que dice. */
[data-palabras]{ transform: none }

[data-palabras] .pal{
  display: inline-block;
  opacity: .08;
  filter: blur(5px);
  /* 6 px, no `.18em`: en un titular de 80 px, `.18em` son 14 px y eso ya es un
     salto. El desplazamiento tiene que ser el mismo para todos los tamaños. */
  transform: translateY(6px);
  transition: opacity .62s ease, filter .62s ease,
              transform .62s cubic-bezier(.16,1,.3,1);
  will-change: opacity, filter, transform;
}
[data-palabras].revelado .pal{
  opacity: 1; filter: blur(0); transform: none;
}

/* ⚠️ Al terminar se quita `will-change`: dejarlo puesto mantiene cada palabra
   en su propia capa de composición, y en una página con doscientas palabras
   marcadas eso se nota en un móvil. */
[data-palabras].revelado{ will-change: auto }
[data-palabras].revelado .pal{ will-change: auto }

@media (prefers-reduced-motion: reduce){
  [data-palabras], [data-palabras] .pal{
    transform: none !important; opacity: 1 !important;
    filter: none !important; transition: none !important;
  }
}