@view-transition { navigation: auto; }

:root { --transition-bg: #090b16; }
:root[data-theme="light"] { --transition-bg: #fff; }
.header { view-transition-name: site-menu; }

/* Animate browser snapshots, leaving sticky layouts, videos and WebGL intact. */
::view-transition { background: var(--transition-bg); }
::view-transition-group(root) { animation-duration: .6s; }
::view-transition-old(root) {
  animation: page-view-out .2s cubic-bezier(.4, 0, 1, 1) both;
  mix-blend-mode: normal;
}
::view-transition-new(root) {
  /* Starts once the old page is fully gone, so the two never overlap. */
  animation: page-view-in .5s cubic-bezier(.22, 1, .36, 1) .2s both;
  mix-blend-mode: normal;
}
::view-transition-group(site-menu) { z-index: 2; animation-duration: .3s; }
::view-transition-old(site-menu) { animation: page-menu-out .2s ease both; }
::view-transition-new(site-menu) { animation: page-menu-in .3s ease both; }
@keyframes page-view-out {
  to { opacity: 0; transform: translateY(-18px) scale(.99); }
}
@keyframes page-view-in {
  from { opacity: 0; transform: translateY(24px) scale(1.01); }
  to { opacity: 1; transform: none; }
}
@keyframes page-menu-out { to { opacity: 0; } }
@keyframes page-menu-in { from { opacity: 0; } to { opacity: 1; } }

/* Small, fail-open fallback for browsers without cross-document transitions. */
:root::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 10000;
  pointer-events: none;
  background: var(--transition-bg);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .22s ease, transform .22s ease;
}
:root[data-page-transition="leaving"]::after { opacity: 1; transform: none; }
:root[data-page-transition="entering"]::after { animation: page-veil-in .55s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes page-veil-in {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateY(-18px); }
}
:root[data-page-motion="off"]::view-transition-group(*),
:root[data-page-motion="off"]::view-transition-old(*),
:root[data-page-motion="off"]::view-transition-new(*) { animation: none !important; }
:root[data-page-motion="off"]::after { display: none; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  :root::after { display: none; }
}