/* Shared native navigation crossfade; both pages use the central layout. */
@media (prefers-reduced-motion: no-preference) {
    @view-transition {
        navigation: auto;
    }

    ::view-transition-group(root),
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation-duration: 240ms;
        animation-timing-function: ease-in-out;
    }

    /* Keep shared navigation separate from the content crossfade. */
    .bi-site-header { view-transition-name: site-header; }
    .bi-account-navigation { view-transition-name: account-navigation; }
    .bi-tabbar { view-transition-name: account-tabbar; }

    /* Show the destination navigation immediately, without stretching it or
       briefly overlapping the old and new active links. */
    ::view-transition-group(site-header),
    ::view-transition-group(account-navigation),
    ::view-transition-group(account-tabbar),
    ::view-transition-old(site-header),
    ::view-transition-new(site-header),
    ::view-transition-old(account-navigation),
    ::view-transition-new(account-navigation),
    ::view-transition-old(account-tabbar),
    ::view-transition-new(account-tabbar) {
        animation: none;
    }

    ::view-transition-old(site-header),
    ::view-transition-old(account-navigation),
    ::view-transition-old(account-tabbar) {
        opacity: 0;
    }
}