/* Native-app style page changes on phones, using cross-document View
   Transitions. Browsers without support just navigate as before. Which
   animation runs is picked in partials/page-transitions (pagereveal):
   deeper page = forward slide, shallower = back slide, same level = fade. */
@media (max-width: 720px) and (prefers-reduced-motion: no-preference) {
    @view-transition {
        navigation: auto;
    }
    /* The bottom dock stays put while the page under it moves. */
    .dock { view-transition-name: dock; }
}
::view-transition-group(dock),
::view-transition-old(dock),
::view-transition-new(dock) { animation: none; }

/* Forward: new page slides in over the old one, which drifts left. */
html:active-view-transition-type(forward)::view-transition-old(root) {
    animation: pt-drift-left 0.34s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
html:active-view-transition-type(forward)::view-transition-new(root) {
    animation: pt-enter-right 0.34s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    box-shadow: -10px 0 28px rgba(0, 0, 0, 0.12);
}

/* Back: the page on top slides away to the right, revealing the one under. */
html:active-view-transition-type(back)::view-transition-old(root) {
    z-index: 1;
    animation: pt-exit-right 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    box-shadow: -10px 0 28px rgba(0, 0, 0, 0.12);
}
html:active-view-transition-type(back)::view-transition-new(root) {
    animation: pt-return-left 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

/* Between top-level menu pages: a quick cross-fade, like switching tabs. */
html:active-view-transition-type(lateral)::view-transition-old(root) {
    animation: pt-fade-out 0.16s ease both;
}
html:active-view-transition-type(lateral)::view-transition-new(root) {
    animation: pt-fade-in 0.2s ease both;
}

@keyframes pt-enter-right { from { transform: translateX(100%); } to { transform: none; } }
@keyframes pt-drift-left { from { transform: none; } to { transform: translateX(-28%); filter: brightness(0.92); } }
@keyframes pt-exit-right { from { transform: none; } to { transform: translateX(100%); } }
@keyframes pt-return-left { from { transform: translateX(-28%); filter: brightness(0.92); } to { transform: none; } }
@keyframes pt-fade-out { to { opacity: 0; } }
@keyframes pt-fade-in { from { opacity: 0; } }