/* ==========================================================================
 * page-transition.css — page-to-page navigation. Loaded by every page that loads vertx-nav.js.
 * The router (vertx-nav.js) wraps each soft navigation in document.startViewTransition(): the OLD page stays on screen
 * (no white / blank frame), then the NEW page slides in from the right over it (back = from the left).
 * The app shell (sidebar + top bar) is pinned in its own transition group so it stays put; only the page content moves.
 * html[data-vx-nav] = "forward" | "back" is set by the router for the duration of the transition.
 * ========================================================================== */
.vx-dock { view-transition-name: vx-dock; }
.vx-head { view-transition-name: vx-head; }

::view-transition-group(root) { animation-duration: .4s; }
::view-transition-old(root), ::view-transition-new(root) {
  mix-blend-mode: normal;            /* default is plus-lighter (a crossfade): it would add the two pages' brightness while they overlap */
  animation-duration: .4s;
  animation-timing-function: cubic-bezier(.22, .86, .24, 1);
  animation-fill-mode: both;
}
::view-transition-image-pair(root) { isolation: isolate; }

/* forward: new page enters from the right, old page drifts left and dims */
::view-transition-new(root) { animation-name: vx-vt-in-right; z-index: 2; }
::view-transition-old(root) { animation-name: vx-vt-out-left; z-index: 1; }
/* back: old page leaves to the right, the page underneath returns from the left */
html[data-vx-nav="back"]::view-transition-new(root) { animation-name: vx-vt-in-left; z-index: 1; }
html[data-vx-nav="back"]::view-transition-old(root) { animation-name: vx-vt-out-right; z-index: 2; }

@keyframes vx-vt-in-right  { from { transform: translateX(100%); box-shadow: -18px 0 40px rgba(0,0,0,.18); } to { transform: none; box-shadow: none; } }
@keyframes vx-vt-out-left  { from { transform: none; filter: none; } to { transform: translateX(-22%); filter: brightness(.82); } }
@keyframes vx-vt-in-left   { from { transform: translateX(-22%); filter: brightness(.82); } to { transform: none; filter: none; } }
@keyframes vx-vt-out-right { from { transform: none; box-shadow: -18px 0 40px rgba(0,0,0,.18); } to { transform: translateX(100%); box-shadow: -18px 0 40px rgba(0,0,0,.18); } }

/* shell groups: no movement, no flash — identical pixels simply stay (changed ones, e.g. the title, cross-fade) */
::view-transition-group(vx-dock), ::view-transition-group(vx-head) { animation-duration: .3s; }

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