/* Native page dissolve. Keep the outgoing page opaque beneath the new one. */
@media (prefers-reduced-motion: no-preference) {
    @view-transition { navigation: auto; }

    .ape-site > .ape-header { view-transition-name: ape-header; }
    ::view-transition { background: var(--ape-cream); }
    ::view-transition-group(root) { animation: none; }
    ::view-transition-image-pair(root) { isolation: isolate; }
    ::view-transition-old(root),
    ::view-transition-new(root) { mix-blend-mode: normal; }
    ::view-transition-old(root) { animation: none; opacity: 1; z-index: 1; }
    ::view-transition-new(root) {
        z-index: 2;
        animation: ape-page-fade-in 200ms ease-out both;
    }

    ::view-transition-group(ape-header),
    ::view-transition-new(ape-header) { animation: none; }
    ::view-transition-group(ape-header) { z-index: 3; }
    ::view-transition-old(ape-header) { display: none; }

    html:active-view-transition .ape-reveal-ready .ape-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

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