/* --- Page transitions --- */
.page {
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease;
}

.page:not(.active) {
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    transform: translateX(0);
}

.page.slide-out-left { transform: translateX(-100%); opacity: 0; }
.page.slide-in-from-right { transform: translateX(100%); }
.page.slide-out-right { transform: translateX(100%); opacity: 0; }
.page.slide-in-from-left { transform: translateX(-100%); }

#home-page.active {
    position: relative;
}