@view-transition {
  navigation: auto;
}

html:active-view-transition-type(project-forward)::view-transition-old(root),
html:active-view-transition-type(project-back)::view-transition-old(root) {
  animation: rsverse-page-out 140ms ease-out both;
}

html:active-view-transition-type(project-forward)::view-transition-new(root),
html:active-view-transition-type(project-back)::view-transition-new(root) {
  animation: rsverse-page-in 180ms ease-out both;
}

@keyframes rsverse-page-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes rsverse-page-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

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