@view-transition {
  navigation: auto;
}

.archive-browser { view-transition-name: archive-results; }

::view-transition-old(archive-results) {
  animation: archive-results-out 150ms ease both;
}

::view-transition-new(archive-results) {
  animation: archive-results-in 230ms cubic-bezier(.2,.75,.25,1) both;
}

@keyframes archive-results-out {
  to { opacity: 0; }
}

@keyframes archive-results-in {
  from { opacity: 0; transform: translateY(5px); }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(archive-results),
  ::view-transition-new(archive-results) { animation: none; }
}