/* Movimiento del sitio.
   Regla: el movimiento confirma, no adorna. Solo se animan opacidad y
   posición o escala — nunca desenfoques, anchos ni sombras, que obligan al
   móvil a repintar en cada fotograma. Nada dura más de 400 ms.
   Todo queda desactivado con prefers-reduced-motion. */

@media (prefers-reduced-motion: no-preference) {
  /* Cambio de página: fundido corto, sin desenfoque. */
  @view-transition {
    navigation: auto;
  }

  ::view-transition-old(root) {
    animation: pagina-sale 120ms ease both;
  }

  ::view-transition-new(root) {
    animation: pagina-entra 240ms var(--ease-out) both;
  }

  /* Respaldo para navegadores sin transiciones de vista: solo la entrada.
     La salida no se anima a propósito — esperar antes de navegar se nota
     como lentitud, y el corte limpio no. */
  html.page-enter body {
    animation: pagina-entra 240ms var(--ease-out) both;
  }

  /* Entrada de bloques al aparecer en pantalla. Solo se oculta si hay JS,
     y una sola vez por bloque. */
  html.js-motion [data-reveal] {
    opacity: 0;
    transform: translateY(12px);
    transition:
      opacity var(--motion-enter) var(--ease-out),
      transform var(--motion-enter) var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
  }

  html.js-motion [data-reveal].is-revealed {
    opacity: 1;
    transform: none;
  }
}

@keyframes pagina-sale {
  to { opacity: 0; }
}

@keyframes pagina-entra {
  from { opacity: 0; }
  to { opacity: 1; }
}