/* Page transitions: old page dims to black, new page fades in (one motion). */
@view-transition { navigation: auto; }
::view-transition { background-color: var(--bg, #0a0907); }
::view-transition-group(root) { animation-duration: 600ms; }
::view-transition-old(root) { animation: tx-out 220ms cubic-bezier(.4, 0, 1, 1) forwards; }
::view-transition-new(root) { animation: tx-in 380ms cubic-bezier(0, 0, .2, 1) 200ms both; }
@keyframes tx-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes tx-in { from { opacity: 0; } to { opacity: 1; } }

/* JS fallback veil (browsers without cross-document VT) */
#tx-veil {
  position: fixed; inset: 0; background: var(--bg); pointer-events: none;
  z-index: 2147483000; opacity: 0; transition: opacity 220ms cubic-bezier(.4, 0, 1, 1);
}
html.tx-leave #tx-veil { opacity: 1; }
html.tx-enter #tx-veil { opacity: 1; transition: none; }
html.tx-fade #tx-veil { opacity: 0; transition: opacity 380ms cubic-bezier(0, 0, .2, 1); }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  #tx-veil, html.tx-leave #tx-veil, html.tx-enter #tx-veil, html.tx-fade #tx-veil { opacity: 0 !important; transition: none !important; }
}