/* Page transition animations */
html, body {
    overflow-x: hidden;
}

body.transitioning {
    overflow: hidden;
}

main, .main-content, .content {
    position: relative;
    will-change: transform;
}

main.page-transition,
.main-content.page-transition,
.content.page-transition {
    animation-duration: 0.5s;
    animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
    animation-fill-mode: both;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    perspective: 1000px;
    -webkit-perspective: 1000px;
}

/* Slide out animations */
@keyframes slideOutLeft {
    from {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
    to {
        transform: translate3d(-100%, 0, 0);
        opacity: 0.3;
    }
}

@keyframes slideOutRight {
    from {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
    to {
        transform: translate3d(100%, 0, 0);
        opacity: 0.3;
    }
}

/* Slide in animations */
@keyframes slideInLeft {
    from {
        transform: translate3d(-100%, 0, 0);
        opacity: 0;
    }
    to {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

@keyframes slideInRight {
    from {
        transform: translate3d(100%, 0, 0);
        opacity: 0;
    }
    to {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

/* Apply animations */
main.slide-out-left,
.main-content.slide-out-left,
.content.slide-out-left {
    animation-name: slideOutLeft;
}

main.slide-out-right,
.main-content.slide-out-right,
.content.slide-out-right {
    animation-name: slideOutRight;
}

main.slide-in-left,
.main-content.slide-in-left,
.content.slide-in-left {
    animation-name: slideInLeft;
}

main.slide-in-right,
.main-content.slide-in-right,
.content.slide-in-right {
    animation-name: slideInRight;
}