/*
 * Page transitions (PLAN.md §11.2). Turbo Drive wraps visits in document.startViewTransition() (meta
 * view-transition=same-origin) and sets html[data-turbo-visit-direction] to forward (push), back (pop) or none
 * (replace, used by the tab bar). Unsupported browsers navigate instantly. Turbo skips transitions under
 * prefers-reduced-motion.
 */

/* App bar and tab bar stay put while the content slides. */
.app-bar {
    view-transition-name: app-bar;
}

.tab-bar {
    view-transition-name: tab-bar;
}

::view-transition-group(app-bar),
::view-transition-group(tab-bar) {
    animation-duration: 0s;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: var(--animation-timing-fast);
    animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Push: new page slides in from the right, old page moves slightly left. */
html[data-turbo-visit-direction='forward']::view-transition-old(root) {
    animation-name: capture-slide-out-left;
}

html[data-turbo-visit-direction='forward']::view-transition-new(root) {
    animation-name: capture-slide-in-right;
}

/* Pop: the reverse. */
html[data-turbo-visit-direction='back']::view-transition-old(root) {
    animation-name: capture-slide-out-right;
}

html[data-turbo-visit-direction='back']::view-transition-new(root) {
    animation-name: capture-slide-in-left;
}

/* Tabs (replace): cross-fade, the browser default. The iOS edge swipe already moved the page: no animation. */
html[data-swipe-back]::view-transition-old(root),
html[data-swipe-back]::view-transition-new(root) {
    animation: none;
}

@keyframes capture-slide-in-right {
    from {
        transform: translateX(100%);
    }
}

@keyframes capture-slide-out-left {
    to {
        transform: translateX(-25%);
        opacity: 0.6;
    }
}

@keyframes capture-slide-in-left {
    from {
        transform: translateX(-25%);
        opacity: 0.6;
    }
}

@keyframes capture-slide-out-right {
    to {
        transform: translateX(100%);
    }
}

/* Edge-swipe back (swipe-back controller): the page follows the finger. */
.swipe-back--dragging,
.swipe-back--settling {
    box-shadow: var(--main-box-shadow);
    will-change: transform;
}

.swipe-back--settling {
    transition: transform 0.2s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none;
    }
}