/* ==========================================================================
   motion.css — Movimiento transversal: aparición al hacer scroll, carga de
   imágenes y pantalla de carga entre páginas. Principios en docs/ux-movimiento.md.

   - Solo se animan transform y opacity.
   - Todo estado oculto depende de .js (lo pone main.js en <html>) y de una
     clase que el JS añade a propósito: sin JS no se oculta nada.
   - Con prefers-reduced-motion todo queda en su estado final (ver al pie).
   Se carga en todas las páginas, después de components/ y antes de pages/.
   ========================================================================== */

/* ---------- Aparición al hacer scroll (assets/js/reveal.js) ----------
   reveal.js marca con .por-aparecer SOLO los elementos que están fuera de la
   vista al cargar (así nada visible parpadea) y añade .aparecido al entrar.
   En grupos ([data-aparecer-grupo]) cada hijo recibe --orden para escalonar. */
.js .por-aparecer {
  opacity: 0;
  transform: translateY(var(--desplazamiento-aparicion));
}
.js .por-aparecer.aparecido {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--dur-lenta) var(--ease-entrada),
    transform var(--dur-lenta) var(--ease-entrada);
  transition-delay: calc(var(--orden, 0) * var(--escalonado));
}

/* ---------- Imágenes (assets/js/imagenes.js) ----------
   Solo las que aún no han cargado reciben .img-cargando; al cargar (o fallar)
   pasan a .img-cargada con un fundido. Sin JS se ven directamente. */
.js .img-cargando { opacity: 0; }
.js .img-cargada { transition: opacity var(--dur-lenta) var(--ease-entrada); }

/* ---------- Pantalla de carga (preloader) y cambio de página ----------
   .preloader va al inicio del <body> de cada página y es opaco desde el primer
   pintado. transiciones.js:
     - al terminar de cargar (window load) le pone .is-oculto → se desvanece;
     - al pulsar un enlace interno le pone .is-visible → cubre la pantalla y,
       tras --dur-preloader-entrada, navega.
   Salvaguardas para no dejar a nadie atrapado:
     - JS: si load no llega en 2,5 s, se oculta igual.
     - CSS (esta animación): si el JS no se ejecuta o falla, se retira solo a los
       --espera-preloader. .is-oculto / .is-visible la anulan (animation: none).
     - Sin JS: sin-js.css lo oculta de entrada.
   Por encima de todo (header 50): z-index 1000. */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  background: var(--c-abismo);
  animation: preloader-retirar var(--dur-preloader-salida) var(--ease-cambio) var(--espera-preloader) forwards;
}
.preloader.is-oculto {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  animation: none;
  transition:
    opacity var(--dur-preloader-salida) var(--ease-cambio),
    visibility 0s linear var(--dur-preloader-salida);
}
.preloader.is-visible {
  opacity: 1;
  visibility: visible;
  animation: none;
  transition: opacity var(--dur-preloader-entrada) var(--ease-cambio);
}
@keyframes preloader-retirar {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}

/* Anillo giratorio: pista tenue + arco en agua */
.preloader__anillo {
  width: var(--tam-preloader);
  height: var(--tam-preloader);
  border: var(--grosor-preloader) solid var(--borde-inverso-sutil);
  border-top-color: var(--c-agua);
  border-radius: var(--radio-circulo);
  animation: preloader-girar var(--dur-preloader-giro) linear infinite;
}
@keyframes preloader-girar { to { transform: rotate(1turn); } }

/* Al imprimir, nada queda oculto a la espera de un scroll */
@media print {
  .js .por-aparecer, .js .img-cargando { opacity: 1; transform: none; }
}

/* ---------- Movimiento reducido ----------
   base.css ya lleva todas las duraciones a casi cero; aquí se fijan los
   estados finales y se desactiva lo que no tiene sentido sin movimiento. */
@media (prefers-reduced-motion: reduce) {
  .preloader__anillo { animation: none; }       /* quieto: un giro a casi 0 ms parpadearía */
  .js .por-aparecer { opacity: 1; transform: none; }
  .js .img-cargando { opacity: 1; }
  .btn__spinner { animation: none; }
}