@view-transition { navigation: auto; }

::view-transition-old(root) { animation: page-out 180ms ease both; }
::view-transition-new(root) { animation: page-in 250ms ease both; }
@keyframes page-out { to { opacity: 0; } }
@keyframes page-in { from { opacity: 0; } }

html[data-navigation="scan"]::view-transition-new(root) {
  animation: scan-reveal 350ms cubic-bezier(.25,.8,.25,1) both;
}
.navigation-scan-line {
  position: fixed;
  top: 0; left: 0;
  width: 2px; height: 100vh;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
  pointer-events: none;
  view-transition-name: navigation-scan;
}
::view-transition-group(navigation-scan) {
  z-index: 100;
  animation: scan-line 350ms cubic-bezier(.25,.8,.25,1) both;
}
::view-transition-new(navigation-scan) { animation: none; }
@keyframes scan-reveal {
  from { clip-path: inset(0 100% 0 0); opacity: .65; }
  to { clip-path: inset(0 0 0 0); opacity: 1; }
}
@keyframes scan-line {
  from { transform: translateX(0); opacity: 0; }
  15% { opacity: .8; }
  85% { opacity: .8; }
  to { transform: translateX(100vw); opacity: 0; }
}

html[data-transition="theme"] .logo,
html[data-transition="theme"] .topbar-logo,
html[data-transition="theme"] .theme-toggle { view-transition-name: none !important; }
html[data-transition="theme"] * { transition: none !important; }
html[data-transition="theme"]::view-transition-group(root) { animation: none; }
html[data-transition="theme"]::view-transition-image-pair(root) { isolation: auto; }
html[data-transition="theme"]::view-transition-old(root),
html[data-transition="theme"]::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}
html[data-transition="theme"]::view-transition-old(root) { z-index: 1; }
html[data-transition="theme"]::view-transition-new(root) { z-index: 2; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .navigation-scan-line { display: none; }
  html .reveal { opacity: 1; transform: none; transition: none; }
  html .theme-toggle, html .home-nav a { transition: none; }
  html .theme-toggle:hover, html .home-nav a:hover { transform: none; }
}