/* 02-Nov-2026 — page changes without the blink.
   Cross-document view transitions (Chrome/Edge 126+, Safari 18.2+; other browsers ignore this file and navigate as before):
   the sidebar and the top bar are separate transition layers that never fade, only the page area animates. */
@view-transition { navigation: auto; }

html body.tw-shell .wrapper .main-nav.gs-side { view-transition-name: gt-sidebar; }
html body.tw-shell #tw-topbar { view-transition-name: gt-topbar; }

::view-transition-group(gt-sidebar), ::view-transition-group(gt-topbar) { animation: none; }
::view-transition-old(gt-sidebar), ::view-transition-old(gt-topbar) { animation: none; opacity: 1; }
::view-transition-new(gt-sidebar), ::view-transition-new(gt-topbar) { animation: none; opacity: 1; }

::view-transition-old(root) { animation: gt-vt-out .12s ease both; }
::view-transition-new(root) { animation: gt-vt-in .22s ease both; }
@keyframes gt-vt-out { to { opacity: 0; } }
@keyframes gt-vt-in { from { opacity: 0; } }

/* the page area already has its own enter animation; keep it short so the two do not stack */
html:not([data-no-vt]) .app-page-enter { animation-duration: .35s; }

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