/* ==========================================================================
   REVELADO AL ENTRAR EN PANTALLA
   ==========================================================================

   Cada seccion de contenido aparece cuando el lector llega a ella, en vez de
   estar ya puesta desde el principio. Un solo viaje por elemento: lo que ya se
   revelo no se vuelve a animar aunque se pase por encima diez veces. Una
   pagina que re-anima en cada scroll es una interfaz peleandose con quien la
   lee.

   Es del **sitio publico y nada mas**. En el panel seria movimiento sobre
   pantallas de trabajo que se recorren decenas de veces al dia, y ahi el
   revelado deja de ser un detalle y se vuelve una espera.

   --------------------------------------------------------------------------
   Lo importante de este archivo: NADA se oculta hasta que el javascript
   avisa que puede ocultarlo.

   Todas las reglas cuelgan de [data-revelado] en el <html>, un atributo que
   escribe revelado.js recien cuando confirmo que el navegador tiene
   IntersectionObserver y que el visitante no pidio menos movimiento. Sin esa
   confirmacion no hay ni una regla que aplique y la pagina se ve completa.

   No es una precaucion de mas: es la unica forma de que un error de javascript
   —o un archivo que no descargo, o un navegador viejo— no deje el sitio entero
   en blanco. Ocultar por CSS y confiar en que el JS va a mostrar es como se
   construye una pagina que un dia no muestra nada.

   Ver revelado.js, que ademas decide QUE se revela (lo que esta bajo el
   pliegue) y que no (lo que ya se ve al cargar, que aparece sin animar).
   ========================================================================== */

[data-revelado] .revelado {
  opacity: 0;
  /* 24px: el revelado necesita mas recorrido que una transicion de pagina para
     leerse como movimiento y no como un parpadeo. */
  transform: translateY(var(--space-5));
  transition:
    opacity var(--duration-slow) var(--ease-out),
    transform var(--duration-slow) var(--ease-out);
  /* El retraso del escalonado lo escribe revelado.js elemento por elemento
     (transition-delay), porque depende de la posicion dentro de la fila. */
}

[data-revelado] .revelado-visible {
  opacity: 1;
  transform: none;
}

/* Lo que ya estaba en pantalla al cargar no viaja: aparece puesto. Es el mismo
   estado final, pero sin transicion, asi que no hay fade-in de bienvenida — la
   señal de "esto se acaba de cargar" que hace que un sitio serio parezca una
   plantilla. */
[data-revelado] .revelado-inmediato {
  opacity: 1;
  transform: none;
  transition: none;
}

/* --------------------------------------------------------------------------
   Menos movimiento
   --------------------------------------------------------------------------
   Aca si se apaga entero, y no se sustituye por un fundido como en la
   transicion de pagina. La diferencia es el proposito: la transicion de pagina
   informa de un cambio que el lector pidio y necesita ver; el revelado no
   informa de nada, es una decoracion sobre contenido que ya estaba ahi. Lo
   honesto con quien pidio menos movimiento es no hacerlo.

   revelado.js ademas ni siquiera escribe [data-revelado] en ese caso, asi que
   esta regla es el segundo cinturon (por si el ajuste cambia con la pagina ya
   abierta). */
@media (prefers-reduced-motion: reduce) {
  [data-revelado] .revelado,
  [data-revelado] .revelado-visible,
  [data-revelado] .revelado-inmediato {
    opacity: 1;
    transform: none;
    transition: none;
  }
}