/* revelado-scroll — el contenido entra al aparecer en pantalla.
   Es el componente más transversal de la librería: bien puesto, sube la
   percepción de calidad de CUALQUIER web sin cambiar ni el diseño ni el texto.

   La animación se hace con una clase, no con la posición del scroll: nada de
   escuchar `scroll` ni de recalcular en cada cuadro. */
[data-lui~="revelar"]{
  opacity:0;
  transform:translateY(var(--lui-desde,18px));
  transition:opacity .7s cubic-bezier(.16,1,.3,1),
             transform .7s cubic-bezier(.16,1,.3,1);
  transition-delay:var(--lui-retardo,0ms);
  /* Le dice al navegador que va a animar esto: evita el parpadeo del primer
     cuadro en móviles lentos. */
  will-change:opacity,transform;
}

[data-lui~="revelar"].lui-dentro{
  opacity:1;
  transform:none;
  will-change:auto;           /* soltarlo al acabar; mantenerlo gasta memoria */
}

/* Variantes: sólo cambian el punto de partida. */
[data-lui~="revelar"][data-lui-desde="izquierda"]{transform:translateX(-24px)}
[data-lui~="revelar"][data-lui-desde="derecha"]{transform:translateX(24px)}
[data-lui~="revelar"][data-lui-desde="escala"]{transform:scale(.96)}
[data-lui~="revelar"][data-lui-desde="nada"]{transform:none}

@media (prefers-reduced-motion:reduce){
  /* Visible desde el principio y sin transición. OJO: sin esto, alguien con el
     ajuste puesto vería la página EN BLANCO si el observador fallara. */
  [data-lui~="revelar"]{opacity:1;transform:none;transition:none}
}