/*
  Navegación entre páginas: que la banda no se vuelva a pintar.

  Cada clic en el menú es una carga completa del documento, así que por omisión el navegador
  reemplaza **todo**: la banda lateral, el mapa, el contenido. Y como la banda es idéntica en
  todas las páginas —el mismo mapa, porque la semilla está fija, el mismo menú, el mismo
  logotipo—, volver a pintarla no aporta nada: es lo que hace que la navegación se sienta como un
  refresco en vez de como un cambio de sección.

  Con las transiciones de vista entre documentos, el navegador guarda una foto de la página que se
  va y otra de la que llega, y las cruza. Si la banda lleva nombre propio (`view-transition-name`),
  deja de formar parte del cruce general: se mantiene quieta mientras el resto se desvanece. El
  resultado es que el visitante ve cambiar el contenido, no la página entera.

  Es CSS puro, sin JavaScript y sin tocar el theme. Lo entienden los navegadores basados en
  Chromium; donde no, la navegación sigue igual que antes.

  Nada de esto necesita especificidad alta: son propiedades que sólo se declaran acá (el theme no
  las usa), así que el orden de las hojas no importa.
*/
@view-transition {
  navigation: auto;
}

/* La banda lateral viaja entre páginas sin desvanecerse. */
aside.site-panel.sidebar {
  view-transition-name: banda;
}

/* El resto (la columna de contenido, el pie) entra con un cruce corto. Es más rápido que el
   segundo y medio que Chromium usa por omisión: con la banda quieta, un cruce largo se lee como
   lentitud. */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 220ms;
  animation-timing-function: ease-out;
}

/* Quien pidió menos movimiento en su sistema no ve transición: ve la página nueva. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}