/* Native cross-document snapshots keep the previous photograph behind the new one.
   Normal navigation remains available in browsers without View Transitions. */
@media (prefers-reduced-motion: no-preference) {
    @view-transition { navigation: auto; }

    ::view-transition { pointer-events: none; }
    ::view-transition-group(*) { animation-duration: 0s; }
    ::view-transition-image-pair(*) { isolation: isolate; }
    ::view-transition-old(*),
    ::view-transition-new(*) { mix-blend-mode: normal; }

    ::view-transition-old(*) {
        animation: skyhigh-text-out var(--skyhigh-text-duration, 300ms) ease-in both;
    }
    ::view-transition-new(*) {
        animation: skyhigh-text-in var(--skyhigh-text-duration, 300ms) ease-out both;
        animation-delay: calc(var(--skyhigh-text-duration, 300ms) * .45 + var(--skyhigh-background-duration, 600ms) * .65);
    }
    /* Keep the old background opaque: there is no dip to black between images. */
    ::view-transition-old(root) { animation: none; opacity: 1; }
    ::view-transition-new(root) {
        animation: skyhigh-background-in var(--skyhigh-background-duration, 600ms) ease-in-out both;
        animation-delay: calc(var(--skyhigh-text-duration, 300ms) * .45);
    }
}

@keyframes skyhigh-background-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes skyhigh-text-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes skyhigh-text-in { from { opacity: 0; } to { opacity: 1; } }