/* Transición "push" entre páginas: la actual sale por la izquierda y la nueva entra empujando desde la derecha.
   Al volver con "atrás" el push va al revés. Va en el <head> de cada página que participa. */
@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: push-out .5s cubic-bezier(.65, 0, .35, 1) both;
}
::view-transition-new(root) {
  animation: push-in .5s cubic-bezier(.65, 0, .35, 1) both;
}
html:active-view-transition-type(back)::view-transition-old(root) {
  animation-name: push-out-back;
}
html:active-view-transition-type(back)::view-transition-new(root) {
  animation-name: push-in-back;
}

@keyframes push-out { to { transform: translateX(-100%); } }
@keyframes push-in { from { transform: translateX(100%); } }
@keyframes push-out-back { to { transform: translateX(100%); } }
@keyframes push-in-back { from { transform: translateX(-100%); } }

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