::view-transition-old(*) {
    animation: 180ms ease-out both stage-out;
}

::view-transition-new(*) {
    animation: 320ms cubic-bezier(.2,.8,.2,1) both stage-in;
}

@keyframes stage-out {
    to {
        opacity: 0;
        transform: translateX(-18px);
        filter: blur(1px);
    }
}

@keyframes stage-in {
    from {
        opacity: 0;
        transform: translateX(26px);
        filter: blur(2px);
    }

    to {
        opacity: 1;
        transform: none;
        filter: none;
    }
}
/* --- MEDIA: snappy (quick slide) --- */
::view-transition-old(main-media) {
    animation: 140ms ease-out both media-out;
}

::view-transition-new(main-media) {
    animation: 180ms ease-out both media-in;
}

@keyframes media-out {
    to {
        opacity: 0;
        transform: translateX(-10px);
    }
}

@keyframes media-in {
    from {
        opacity: 0;
        transform: translateX(10px);
    }
}