/* 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. */
[data-palabras]{
  transform: rotate(2.2deg) translateY(8px);
  transform-origin: 0% 100%;
  transition: transform .9s cubic-bezier(.16,1,.3,1);
  will-change: transform;
}
[data-palabras].revelado{ transform: none }

[data-palabras] .pal{
  display: inline-block;
  opacity: .08;
  filter: blur(4px);
  transform: translateY(.18em);
  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;
  }
}