/* Keyframes for sliding animations */
@keyframes slide-in-right {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}

@keyframes slide-out-left {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}

@keyframes slide-in-left {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(0);
    }
}

@keyframes slide-out-right {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(100%);
    }
}

/* Define the transition name on the main element */
main {
    view-transition-name: main-content;
}

/* View Transition Definitions */
/* NEXT: Slide Out Left, Slide In Right */
html[data-transition-direction="next"]::view-transition-old(main-content) {
    animation: slide-out-left 0.4s ease-out forwards;
}

html[data-transition-direction="next"]::view-transition-new(main-content) {
    animation: slide-in-right 0.4s ease-out forwards;
}

/* PREV: Slide Out Right, Slide In Left */
html[data-transition-direction="prev"]::view-transition-old(main-content) {
    animation: slide-out-right 0.4s ease-out forwards;
}

html[data-transition-direction="prev"]::view-transition-new(main-content) {
    animation: slide-in-left 0.4s ease-out forwards;
}