/* Team space ⇄ main: cross-document view transition on the sidebar nav only. Entering the team space slides the nav
   left and the team nav in from the right; going back reverses it. Everything else (top bar, page) swaps instantly.
   Direction is set in transitions.js. ponytail: native View Transitions — browsers without it just navigate. */
@view-transition { navigation: auto; }
.nav-body { view-transition-name: nav; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
::view-transition-group(nav) { overflow: clip; animation-duration: 0.32s; }
::view-transition-old(nav), ::view-transition-new(nav) {
  animation-duration: 0.32s; animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1); animation-fill-mode: both;
}
html:active-view-transition-type(to-team)::view-transition-old(nav) { animation-name: vt-out-left; }
html:active-view-transition-type(to-team)::view-transition-new(nav) { animation-name: vt-in-right; }
html:active-view-transition-type(to-main)::view-transition-old(nav) { animation-name: vt-out-right; }
html:active-view-transition-type(to-main)::view-transition-new(nav) { animation-name: vt-in-left; }
@keyframes vt-out-left { to { transform: translateX(-100%); opacity: 0; } }
@keyframes vt-in-right { from { transform: translateX(100%); opacity: 0; } }
@keyframes vt-out-right { to { transform: translateX(100%); opacity: 0; } }
@keyframes vt-in-left { from { transform: translateX(-100%); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }