/*
 * Tokens de movimiento del atlas.
 * Es el único sitio donde se fijan duraciones, curvas y distancias de las animaciones: Las hojas numeradas, la hoja de las páginas estáticas (seo.css) y el código (js/interfaz/Movimiento.js) leen estas variables y no escriben cifras propias.
 * Va primera en el paquete de la aplicación y antes de seo.css en las páginas estáticas, de modo que las dos partes del sitio se mueven igual.
 *
 * Reglas del movimiento:
 *   - Solo se animan transform y opacity, que el navegador resuelve sin recalcular la disposición ni mover el contenido (sin CLS).
 *   - Interfaz entre 150 y 400 ms con curva de salida suave; la salida dura menos que la entrada.
 *   - El lienzo del visor DICOM no se anima nunca.
 *   - Con prefers-reduced-motion: reduce todo queda quieto: Las distancias pasan a cero y las duraciones a un instante.
 */

:root {
  /* Duraciones: Pulsación y estado (rápida), desplegables, tarjetas y cambio de sección (normal), ventanas, menú lateral y barras (lenta). */
  --mov-rapida: 150ms;
  --mov-normal: 220ms;
  --mov-lenta: 320ms;
  /* Cuenta de las cifras de la portada, el tope de la escala de duraciones. */
  --mov-cuenta: 400ms;
  /* Retardo entre tarjetas escalonadas; el escalón se corta en la sexta para que el total no pase de 400 ms. */
  --mov-escalon: 40ms;

  /* Curvas: La de salida es la firma del atlas (entrar y responder); la de dentro mueve algo que ya está en pantalla, como el marcador de una escala. */
  --mov-curva: cubic-bezier(0.16, 1, 0.3, 1);
  --mov-curva-dentro: cubic-bezier(0.65, 0, 0.35, 1);

  /* Distancias: Cuánto sube lo que entra, cuánto se eleva una tarjeta y cuánto se hunde un botón al pulsarlo. */
  --mov-desplazamiento: 8px;
  --mov-elevacion: -3px;
  --mov-pulsacion: 0.97;
}

/* Menos movimiento: Nada se desplaza ni se escala, y todo cambio de estado es inmediato. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --mov-desplazamiento: 0px;
    --mov-elevacion: 0px;
    --mov-pulsacion: 1;
    --mov-escalon: 0ms;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}
