/* Smooth page-to-page transitions (Chrome, Edge, Opera and other Chromium browsers). Other browsers get a simple fade. */
@view-transition { navigation: auto; }

::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(.2,.8,.2,1) both; }
@keyframes vt-out { to   { opacity: 0; transform: translateY(-8px) scale(.996); } }
@keyframes vt-in  { from { opacity: 0; transform: translateY(16px); } }

/* the logo in the top bar stays in place and glides between pages */
header .logo { view-transition-name: site-logo; }
::view-transition-group(site-logo) { animation-duration: .4s; animation-timing-function: cubic-bezier(.2,.8,.2,1); }

/* fallback for browsers without view transitions */
@keyframes vt-fade { from { opacity: 0; } }
@supports not (view-transition-name: x) {
  body { animation: vt-fade .45s ease both; }
  html.leaving body { opacity: 0; transition: opacity .2s ease; }
}

/* the browser skipped the transition: same gentle fade-in as the fallback, so it always looks alike */
html.vt-fallback body { animation: vt-fade .42s ease both; }