/* Inactive by default (media="not all"); enabled for one guarded navigation. */
@view-transition { navigation: auto; }
html[data-crossing] { --cross-x: 50%; --cross-y: 50%; }
::view-transition-group(root) { animation-duration: 760ms; }
::view-transition-old(root), ::view-transition-new(root) { mix-blend-mode: normal; }
html[data-crossing="kaidan"]::view-transition-new(root) { animation: native-crossing-in 760ms cubic-bezier(.2,0,0,1) both; }
html[data-crossing="briard"]::view-transition-old(root) { animation: native-crossing-out 760ms cubic-bezier(.2,0,0,1) both; z-index: 2; }
@keyframes native-crossing-in { from { clip-path: circle(0 at var(--cross-x) var(--cross-y)); } to { clip-path: circle(150% at var(--cross-x) var(--cross-y)); } }
@keyframes native-crossing-out { from { clip-path: circle(150% at var(--cross-x) var(--cross-y)); } to { clip-path: circle(0 at var(--cross-x) var(--cross-y)); } }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*) { animation-duration: 160ms; } }