/* Native navigation only: no link interception or extra page requests. */
@view-transition {
    navigation: auto;
}

.__h {
    view-transition-name: site-header;
}

::view-transition-old(root) {
    animation: status-page-out 220ms ease-out both;
}

::view-transition-new(root) {
    animation: status-page-in 220ms ease-out both;
}

/* Keep the header in its own layer, without a second dissolve or movement. */
::view-transition-group(site-header) {
    animation-duration: 0s;
}

::view-transition-old(site-header) {
    animation: none;
    opacity: 0;
}

::view-transition-new(site-header) {
    animation: none;
    mix-blend-mode: normal;
}

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

@keyframes status-page-in {
    from { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    @view-transition {
        navigation: none;
    }

    ::view-transition-group(*) {
        animation: none !important;
    }
}