/* QeepX · qx-shell.css   App-shell navigation (Sep 21 2026).
 * Every screen is still its own page, but the WebView now animates between pages like a native app:
 *  · cross-document View Transitions (@view-transition) · the old screen stays on glass until the new one is ready, so there is no blank
 *  · the top bar and the bottom tab bar are pinned (view-transition-name) · only the content moves
 *  · forward = new screen slides in from the right · back = old screen slides out to the right · tab switch = quick cross-fade
 * The direction "types" (push / back / tab / swap) are set by includes/shell_head.php on pageswap + pagereveal. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

.top-bar     { view-transition-name: qx-top; }
.bottom-nav  { view-transition-name: qx-nav; }
.wallet-strip{ view-transition-name: qx-wallet; }
::view-transition-group(qx-top), ::view-transition-group(qx-nav), ::view-transition-group(qx-wallet) { animation-duration: .16s; }

/* content = root (the pinned parts are excluded from the root snapshot) */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .24s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); mix-blend-mode: normal; }
::view-transition-image-pair(root) { isolation: auto; }
html:active-view-transition-type(push)::view-transition-old(root) { animation-name: qx-vt-dim; }
html:active-view-transition-type(push)::view-transition-new(root) { animation-name: qx-vt-from-right; z-index: 2; box-shadow: -12px 0 30px rgba(20, 0, 24, .18); }
html:active-view-transition-type(back)::view-transition-old(root) { animation-name: qx-vt-to-right; z-index: 2; box-shadow: -12px 0 30px rgba(20, 0, 24, .18); }
html:active-view-transition-type(back)::view-transition-new(root) { animation-name: qx-vt-undim; }
html:active-view-transition-type(tab)::view-transition-old(root)  { animation: qx-vt-fade-out .12s ease-in; }
html:active-view-transition-type(tab)::view-transition-new(root)  { animation: qx-vt-fade-in .16s ease-out; }
html:active-view-transition-type(swap)::view-transition-old(root) { animation: qx-vt-fade-out .12s ease-in; }
html:active-view-transition-type(swap)::view-transition-new(root) { animation: qx-vt-fade-in .18s ease-out; }
@keyframes qx-vt-from-right { from { transform: translateX(100%); } }
@keyframes qx-vt-to-right   { to   { transform: translateX(100%); } }
@keyframes qx-vt-dim        { to   { transform: translateX(-22%); filter: brightness(.86); } }
@keyframes qx-vt-undim      { from { transform: translateX(-22%); filter: brightness(.86); } }
@keyframes qx-vt-fade-out   { to   { opacity: 0; } }
@keyframes qx-vt-fade-in    { from { opacity: 0; } }

/* touch feel: the tab you press reacts immediately, before the page arrives */
.nav-item .nav-icon, .nav-item img { transition: transform .12s ease-out; }
.nav-item:active .nav-icon, .nav-item:active img { transform: scale(.86); }