@view-transition {
    navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.24s;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

::view-transition-old(root) {
    animation-name: page-fade-out;
}

::view-transition-new(root) {
    animation-name: page-fade-in;
}

@keyframes page-fade-out {
    from {
        opacity: 1;
        transform: translateY(0);
        filter: saturate(1);
    }

    to {
        opacity: 0.88;
        transform: translateY(4px);
        filter: saturate(0.98);
    }
}

@keyframes page-fade-in {
    from {
        opacity: 0.9;
        transform: translateY(6px);
        filter: saturate(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: saturate(1);
    }
}