/* ═══════════════════════════════════════════════════════════════
   Aparición al desplazarse.

   El estado oculto cuelga de `.dz-reveal-ready`, que pone dz-reveal.js
   al arrancar. Si el JavaScript falla o está bloqueado, esa clase nunca
   se añade y TODO el contenido se ve con normalidad. Antes el CSS de
   index.html ocultaba sin esa condición: si el script fallaba, 42
   elementos se quedaban invisibles para siempre.
   ═══════════════════════════════════════════════════════════════ */

.dz-reveal-ready .reveal,
.dz-reveal-ready .reveal-scale,
.dz-reveal-ready .reveal-left,
.dz-reveal-ready .reveal-right {
  opacity: 0;
  /* Se anima solo opacidad y transform: nada que provoque reflow ni
     cambie la altura, así que no hay saltos de diseño. */
  transition: opacity 520ms var(--ease), transform 520ms var(--ease);
  will-change: opacity, transform;
}

.dz-reveal-ready .reveal { transform: translateY(18px); }
.dz-reveal-ready .reveal-scale { transform: scale(.97); }
.dz-reveal-ready .reveal-left { transform: translateX(-22px); }
.dz-reveal-ready .reveal-right { transform: translateX(22px); }

/* Las imágenes llevan algo más de recorrido y un punto más de duración:
   es donde mejor se aprecia y donde menos molesta. */
.dz-reveal-ready img.reveal-scale,
.dz-reveal-ready figure.reveal-scale {
  transform: scale(.985);
  transition-duration: 680ms;
}

.dz-reveal-ready .reveal.in-view,
.dz-reveal-ready .reveal-scale.in-view,
.dz-reveal-ready .reveal-left.in-view,
.dz-reveal-ready .reveal-right.in-view {
  opacity: 1;
  transform: none;
}

/* Los textos de una cabecera entran un pelín después del bloque, que es
   lo que da la sensación de orden en lugar de que todo salte a la vez. */
.dz-reveal-ready .section-head .reveal:nth-child(2) { transition-delay: 70ms; }
.dz-reveal-ready .section-head .reveal:nth-child(3) { transition-delay: 140ms; }

@media (prefers-reduced-motion: reduce) {
  .dz-reveal-ready .reveal,
  .dz-reveal-ready .reveal-scale,
  .dz-reveal-ready .reveal-left,
  .dz-reveal-ready .reveal-right {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}