@keyframes fade-in {
    from {
        opacity: 0;
        translate: 0 1rem;
    }
    to {
        opacity: 1;
        translate: 0 0;
    translatY(0);
    }
}

.animate-fade-in {
    animation: fade-in 500ms ease-out forwards;
}

main {
    view-transition-name: main;
}

html:active-view-transition-type(l) {
    &::view-transition-old(main) {
        animation: 500ms ease-in-out both slide-out-to-left;
    }
    
    &::view-transition-new(main) {
        animation: 500ms ease-in-out both slide-in-from-right;
    }
}

html:active-view-transition-type(r) {
    &::view-transition-old(main) {
        animation: 500ms ease-in-out both slide-out-to-right;
    }
    
    &::view-transition-new(main) {
        animation: 500ms ease-in-out both slide-in-from-left;
    }
}

@keyframes slide-in-from-right {
    from {
        transform: translateX(2%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slide-out-to-left {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(-2%);
        opacity: 0;
    }
}

@keyframes slide-out-to-right {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(2%);
        opacity: 0;
    }
}

@keyframes slide-in-from-left {
    from {
        transform: translateX(-2%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}