/* Shared by the React pages and standalone onsite landing page. */
@view-transition { navigation: auto; }
/* Old page lifts away quickly; new page rises into place. The navbar is excluded below. */
::view-transition-group(root) { animation-duration: 420ms; }
::view-transition-old(root) { animation: opaque-page-out 180ms cubic-bezier(.4,0,1,1) both; }
::view-transition-new(root) { animation: opaque-page-in 420ms cubic-bezier(.2,.8,.2,1) 80ms both; }
@keyframes opaque-page-out { to { opacity: 0; transform: translateY(-12px); } }
@keyframes opaque-page-in { from { opacity: 0; transform: translateY(24px); } }
/* Navigation stays in place instead of fading with the page content. */
.site-navigation { view-transition-name: site-navigation; }
::view-transition-group(site-navigation) { animation-duration: 0s; }
::view-transition-old(site-navigation) { animation: none; opacity: 0; }
::view-transition-new(site-navigation) { animation: none; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}