/* Finite compositor animations; transforms affect snapshots, never live layout. */
@keyframes ui-page-enter {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes ui-page-leave {
    from { opacity: 1; }
    to { opacity: 0; }
}
@keyframes ui-content-enter {
    from { opacity: .12; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: no-preference) {
    @view-transition {
        navigation: auto;
    }

    /* A stable navigation bar anchors the otherwise changing page. */
    #top-bar {
        view-transition-name: ui-top-bar;
    }
    ::view-transition-group(root),
    ::view-transition-group(ui-top-bar) {
        animation: none;
    }
    ::view-transition-old(root) {
        animation: ui-page-leave 140ms ease-out both;
        mix-blend-mode: normal;
    }
    ::view-transition-new(root) {
        animation: ui-page-enter 320ms cubic-bezier(.22, .61, .36, 1) both;
        mix-blend-mode: normal;
    }
    ::view-transition-old(ui-top-bar) {
        display: none;
    }
    ::view-transition-new(ui-top-bar) {
        animation: none;
    }

    /* First visits and browsers without cross-document transitions stay immediate.
       Opacity keeps fixed gallery controls in their existing containing block. */
    html:not(.ui-native-page-transition) body.app-shell > :is(.content-width, .center-box, #home-cover, #image-viewer),
    html:not(.ui-native-page-transition) body#upload #anywhere-upload > .content-width,
    html:not(.ui-native-page-transition) body#login .fancy-box {
        animation: ui-content-enter 320ms cubic-bezier(.22, .61, .36, 1);
    }
}

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