/*
  Sistema de movimiento — battōjutsu como gramática interna, nunca mencionado en la UI.
  Regla de admisión: ningún elemento se anima por defecto. Toda animación nueva debe
  poder nombrar a cuál de las cuatro fases corresponde. Si no encaja, no se añade.
*/

:root {
  /* Nukitsuke — desenvainar y cortar en un solo gesto. Arranca a velocidad máxima. */
  --ease-nukitsuke: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-nukitsuke: 200ms;

  /* Kiritsuke — el corte que sigue. El contenido llega detrás del gesto. */
  --dur-kiritsuke: 240ms;
  --delay-kiritsuke: 60ms;

  /* Chiburi — sacudir la sangre. El rastro rojo aparece y se evapora. */
  --dur-chiburi: 700ms;

  /* Nōtō — envainar, lento y controlado. La salida dura el doble que la entrada. */
  --ease-noto: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-noto: 400ms;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 6.6 Rejilla — entrada escalonada vía IntersectionObserver */
.pieza-entra {
  opacity: 0;
  transform: translateY(12px);
}

.pieza-entra.pieza-visible {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity var(--dur-noto) var(--ease-noto),
    transform var(--dur-noto) var(--ease-noto);
}

/*
  6.4 Transición entre páginas — sin Astro ClientRouter, se usa la View
  Transition API nativa entre documentos. El navegador captura la página
  saliente y entrante y las cruza; se afina el tiempo para que la salida sea
  un corte rápido (kiritsuke) y la entrada quede colocada con calma (nōtō).
  Sin desplazamientos, sin desenfoques, sin escalados: solo opacidad.
*/
@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation-duration: var(--dur-kiritsuke);
  animation-timing-function: var(--ease-nukitsuke);
}

::view-transition-new(root) {
  animation-duration: var(--dur-noto);
  animation-timing-function: var(--ease-noto);
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0.01ms;
  }
}