@view-transition {
  navigation: auto;
}

@keyframes rh-page-out {
  to { opacity: 0; }
}
@keyframes rh-page-in {
  from { opacity: 0; }
}
@keyframes rh-text-in {
  from { opacity: 0; translate: 0 10px; }
  to { opacity: 1; translate: 0 0; }
}

::view-transition-old(root) {
  animation: rh-page-out 220ms ease-out both;
}
::view-transition-new(root) {
  animation: rh-page-in 280ms ease-out both;
}

#fillText > h1,
.page-title,
.rh-visits-page > h1 {
  animation: rh-text-in 420ms cubic-bezier(.2,.7,.3,1) 40ms backwards;
}
#fillText > :is(h2, h3),
.rh-visits-page > div {
  animation: rh-text-in 460ms cubic-bezier(.2,.7,.3,1) 100ms backwards;
}
#fillText > :is(p, ul, ol),
.page > :is(p, ul, ol) {
  animation: rh-text-in 480ms cubic-bezier(.2,.7,.3,1) 150ms backwards;
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  #fillText > :is(h1, h2, h3, p, ul, ol),
  .page-title,
  .rh-visits-page > :is(h1, div),
  .page > :is(p, ul, ol) {
    animation: none;
  }
}