html.theme-swap, html.theme-swap *, html.theme-swap *::before, html.theme-swap *::after { transition: none !important; }

html:not(.theme-vt) .app:not(.anon) .side { view-transition-name: hub-side; }
html:not(.theme-vt) .app:not(.anon) .appbar { view-transition-name: hub-appbar; }
html:not(.theme-vt) .app:not(.anon) .tabbar { view-transition-name: hub-tabbar; }
html:not(.theme-vt) .app:not(.anon) .secnav.has-sub { view-transition-name: hub-secnav; }

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; types: hub-page; }

  html:active-view-transition-type(hub-page)::view-transition-group(*) { animation-duration: var(--duration-fast); animation-timing-function: var(--ease-smooth-out); }
  html:active-view-transition-type(hub-page)::view-transition-group(hub-side),
  html:active-view-transition-type(hub-page)::view-transition-group(hub-appbar),
  html:active-view-transition-type(hub-page)::view-transition-group(hub-tabbar),
  html:active-view-transition-type(hub-page)::view-transition-group(hub-secnav),
  html:active-view-transition-type(hub-page)::view-transition-new(hub-side),
  html:active-view-transition-type(hub-page)::view-transition-new(hub-appbar),
  html:active-view-transition-type(hub-page)::view-transition-new(hub-tabbar),
  html:active-view-transition-type(hub-page)::view-transition-new(hub-secnav) { animation: none; }
  html:active-view-transition-type(hub-page)::view-transition-old(hub-side),
  html:active-view-transition-type(hub-page)::view-transition-old(hub-appbar),
  html:active-view-transition-type(hub-page)::view-transition-old(hub-tabbar),
  html:active-view-transition-type(hub-page)::view-transition-old(hub-secnav) { display: none; }
  html:active-view-transition-type(hub-page)::view-transition-group(root) { animation: none; }
  html:active-view-transition-type(hub-page)::view-transition-old(root) { animation: var(--duration-quick) var(--ease-smooth-out) both hub-fade-out; }
  html:active-view-transition-type(hub-page)::view-transition-new(root) { animation: var(--duration-fast) var(--ease-smooth-out) both hub-fade-in; }
  html[data-theme="mono"]:active-view-transition-type(hub-page)::view-transition-new(root) { animation-name: hub-rise-in; }

  html:active-view-transition-type(hub-theme)::view-transition-group(*) { animation: none; }
  html:active-view-transition-type(hub-theme)::view-transition-old(*) { animation: none; }
  html:active-view-transition-type(hub-theme)::view-transition-new(*) { mix-blend-mode: normal; animation: var(--theme-dur) var(--ease-fade) both hub-fade-in; }
  html:active-view-transition-type(hub-to-mono)::view-transition-new(*) { animation: var(--duration-very-slow) var(--ease-smooth-out) both hub-scan-in; }
}

@keyframes hub-fade-out { to { opacity: 0; } }
@keyframes hub-fade-in { from { opacity: 0; } }
@keyframes hub-rise-in { from { opacity: 0; transform: translateY(var(--distance-base, 8px)); } }
@keyframes hub-scan-in { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }

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