/* Page-to-page transitions, shared by every page.
   Uses cross-document View Transitions: the header and logo stay put while the page body
   fades and lifts into place. Browsers without support just navigate normally. */
@view-transition { navigation: auto; }

.nav { view-transition-name: site-nav; }
.logo { view-transition-name: site-logo; }

::view-transition-group(root) { animation-duration: .42s; }
::view-transition-old(root) { animation: vt-out .22s cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: vt-in .42s cubic-bezier(.16, 1, .3, 1) .06s both; }
::view-transition-group(site-nav), ::view-transition-group(site-logo) { animation-duration: .3s; }
::view-transition-old(site-nav), ::view-transition-new(site-nav) { animation: none; mix-blend-mode: normal; }

@keyframes vt-out { to { opacity: 0; transform: translateY(-6px) scale(.995); filter: blur(2px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px) scale(.995); filter: blur(3px); } }

/* first paint (and browsers without view transitions): a gentle settle */
@keyframes page-in { from { opacity: 0; transform: translateY(6px); } }
main, .layout { animation: page-in .5s cubic-bezier(.16, 1, .3, 1) both; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .15s; transform: none; filter: none; }
  main, .layout { animation-duration: .2s; }
}