/* Same-origin navigation keeps the outgoing page until the incoming page can paint. */
@view-transition {
    navigation: auto;
}

html {
    background: #050807;
}

::view-transition {
    background: #050807;
}

::view-transition-old(root) {
    animation: page-out 700ms ease-in-out both;
    mix-blend-mode: normal;
}

::view-transition-new(root) {
    animation: page-in 700ms cubic-bezier(0.4, 0, 0.2, 1) both;
    mix-blend-mode: normal;
}

@keyframes page-out {
    0%, 70% { opacity: 1; }
    to { opacity: 0; }
}

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

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