/* Page Container Styles */

.page {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none;
    visibility: hidden;
}

.page.active {
    display: block !important;
    opacity: 1 !important;
    pointer-events: auto;
    visibility: visible;
    animation: pageIn 0.3s ease-out forwards;
}

.page:not(.active) {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none;
    visibility: hidden;
}

@keyframes pageIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}