/* Smooth page fade, with no masking or movement. */
@view-transition { navigation: auto; }
::view-transition-group(root) { animation: none; }
::view-transition-image-pair(root) { isolation: isolate; }
::view-transition-old(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { animation: route-fade 300ms ease-in-out both; mix-blend-mode: normal; z-index: 1; }
@keyframes route-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
/* Older browsers fade the document in over a white canvas. */
html[data-route-enter] body { animation: route-fade 300ms ease-in-out both; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation-duration: .001ms !important; }
  html[data-route-enter] body { animation: none; }
}