/*
 * Cross-page fade: the leaving page fades out, the arriving page fades in with a slight rise.
 * Uses native cross-document view transitions; browsers without support simply navigate.
 * Both pages of a navigation must load this file; pages that do not (cli-login) keep a plain switch.
 */

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

/*
 * The site header and admin sidebar stay put while the content changes underneath.
 * Named only while a transition runs: a permanent name gives them their own compositing
 * layer, which changes how the text around them is rasterized.
 */
:root:active-view-transition #header {
    view-transition-name: site-header;
}

:root:active-view-transition .adm-sidebar {
    view-transition-name: admin-sidebar;
}

::view-transition-old(root) {
    animation: k-page-out 200ms cubic-bezier(0.4, 0, 1, 1) both;
}

::view-transition-new(root) {
    animation: k-page-in 460ms cubic-bezier(0.2, 0.72, 0.25, 1) 80ms both;
}

::view-transition-group(site-header),
::view-transition-group(admin-sidebar) {
    animation-duration: 260ms;
}

@keyframes k-page-out {
    to {
        opacity: 0;
    }
}

@keyframes k-page-in {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
}