/* Keep normal links, history and same-origin navigation browser-native. */
@view-transition { navigation: auto; }

.editorial-site .header { view-transition-name: site-header; }
.editorial-site main { view-transition-name: page-content; }

/* The chrome stays in place while only the page content softly changes. */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}
::view-transition-group(root),
::view-transition-group(site-header) { animation: none; }
::view-transition-old(site-header) { display: none; }
::view-transition-new(site-header) { animation: none; }
::view-transition-group(page-content) {
  animation-duration: 240ms;
  animation-timing-function: cubic-bezier(.22, .61, .36, 1);
}
::view-transition-old(page-content) {
  animation: page-leave 160ms ease-out both;
  mix-blend-mode: normal;
}
::view-transition-new(page-content) {
  animation: page-enter 240ms cubic-bezier(.22, .61, .36, 1) both;
  mix-blend-mode: normal;
}
@keyframes page-leave {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes page-enter {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}