/* Progressive enhancement: normal navigation remains available everywhere. */
@media (prefers-reduced-motion:no-preference) {
    @view-transition { navigation: auto; }

    ::view-transition-group(root) { animation-duration: 260ms; }
    ::view-transition-image-pair(root) { isolation: isolate; }
    ::view-transition-old(root),
    ::view-transition-new(root) {
        mix-blend-mode: normal;
        transform-origin: center;
        backface-visibility: hidden;
    }
    ::view-transition-old(root) {
        animation: tv-close 110ms cubic-bezier(.7,0,.84,0) both;
    }
    ::view-transition-new(root) {
        animation: tv-open 180ms 80ms cubic-bezier(.16,1,.3,1) both;
    }
}

/* A short picture-to-line contraction, then a calm return. No bright flash. */
@keyframes tv-close {
    0% { transform: scale(1); opacity: 1; filter: blur(0); }
    70% { transform: scale(1,.012); opacity: .8; filter: blur(.5px); }
    100% { transform: scale(.25,.006); opacity: 0; filter: blur(1px); }
}
@keyframes tv-open {
    0% { transform: scale(.5,.012); opacity: 0; filter: blur(.8px); }
    22% { transform: scale(1,.025); opacity: .65; filter: blur(.5px); }
    100% { transform: scale(1); opacity: 1; filter: blur(0); }
}
@media (prefers-reduced-motion:reduce) {
    @view-transition { navigation: none; }
    ::view-transition-old(root),
    ::view-transition-new(root),
    ::view-transition-group(root) { animation: none; }
}