/* Transición nativa entre documentos, sin convertir el sitio en una SPA. */
@view-transition {
  navigation: auto;
}
header {
  view-transition-name: site-header;
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 560ms;
  animation-timing-function: cubic-bezier(0.22, 0.7, 0.2, 1);
  animation-fill-mode: both;
  mix-blend-mode: normal;
}
html[data-slide-direction="next"]::view-transition-old(root) {
  animation-name: slide-out-left;
}
html[data-slide-direction="next"]::view-transition-new(root) {
  animation-name: slide-in-right;
}
html[data-slide-direction="back"]::view-transition-old(root) {
  animation-name: slide-out-right;
}
html[data-slide-direction="back"]::view-transition-new(root) {
  animation-name: slide-in-left;
}
::view-transition-group(site-header) {
  animation-duration: 560ms;
}
/* Alternativa para navegadores sin transiciones entre documentos. */
html[data-slide-fallback="enter"][data-slide-direction="next"] main {
  animation: slide-in-right 500ms cubic-bezier(0.22, 0.7, 0.2, 1) both;
}
html[data-slide-fallback="enter"][data-slide-direction="back"] main {
  animation: slide-in-left 500ms cubic-bezier(0.22, 0.7, 0.2, 1) both;
}
@keyframes slide-in-right {
  from {
    transform: translateX(100vw);
    opacity: 0.25;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slide-out-left {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(-100vw);
    opacity: 0.25;
  }
}
@keyframes slide-in-left {
  from {
    transform: translateX(-100vw);
    opacity: 0.25;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slide-out-right {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100vw);
    opacity: 0.25;
  }
}
@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
  html[data-slide-fallback="enter"] main {
    animation: none;
  }
}