/**
 * Transición entre páginas.
 *
 * Los estilos de aquí valen para las dos formas de disparar la
 * transición: la que declara este @view-transition, que sólo entienden
 * los navegadores con transiciones entre documentos, y la que arranca
 * transitions.js interceptando la navegación, que además cubre a
 * Firefox. Las dos acaban en las mismas pseudo-clases.
 *
 * Con el JS activo manda el JS, porque intercepta el clic antes. Esta
 * regla es la red de seguridad para cuando no lo esté.
 */
@view-transition {
  navigation: auto;
}

/**
 * El fundido. Sin nombrar nada más, el navegador captura la página
 * entera como un único elemento llamado `root` y la cruza con la
 * siguiente, que es exactamente el fundido que buscamos: sólo hay que
 * ajustarle el tiempo.
 */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 200ms;
  animation-timing-function: ease-in-out;
}

/**
 * El menú queda fuera. Darle un nombre propio lo saca de la captura de
 * `root`, así que deja de formar parte del fundido, y anular las
 * animaciones de su grupo hace que no se funda consigo mismo: se queda
 * quieto mientras el resto de la página cambia.
 */
.nav {
  view-transition-name: nav;
}

::view-transition-group(nav) {
  animation: none;
}

::view-transition-image-pair(nav) {
  isolation: none;
}

::view-transition-old(nav),
::view-transition-new(nav) {
  animation: none;
  mix-blend-mode: normal;
}

::view-transition-old(nav) {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}