/* Page-to-page transition, loaded by every page. The page crossfades and
   the main content rises in; from the landing page, the big logo also
   glides into the header. Browsers without cross-document view
   transitions (e.g. Firefox) just navigate normally. */
@view-transition { navigation: auto; }

/* The same name on every page's logo makes the big landing logo glide
   and shrink into the header logo; between other pages it stays put. */
.landing-logo img, .brand img { view-transition-name: site-logo; }
main { view-transition-name: site-content; }

::view-transition-group(site-logo) {
  animation-duration: 0.75s;
  animation-timing-function: cubic-bezier(0.65, 0, 0.25, 1);
}
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 0.5s; }
::view-transition-new(site-content) {
  animation: vt-rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s both;
}
::view-transition-old(site-content) { animation: vt-fade 0.3s ease both reverse; }

@keyframes vt-rise { from { opacity: 0; transform: translateY(1.25rem); } }
@keyframes vt-fade { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}