::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 1.2s;
    animation-timing-function: ease-in-out;
    will-change: transform, opacity;
}

/* Pagina in uscita: scorre a sinistra */
::view-transition-old(root) {
    opacity: 1;
    transform: translateX(0);
    animation: slide-out-left 1.2s forwards ease-in-out;
}

/* Pagina in entrata: scorre da destra */
::view-transition-new(root) {
    opacity: 0;
    transform: translateX(100%);
    animation: slide-in-right 1.2s forwards ease-in-out;
}

/* Animazione scorrimento da destra per la pagina in entrata */
@keyframes slide-in-right {
    0% {
        opacity: 0;
        transform: translateX(100%);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Animazione scorrimento a sinistra per la pagina in uscita */
@keyframes slide-out-left {
    0% {
        opacity: 1;
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        transform: translateX(-100%);
    }
}