/* Transition Styles */

/* Fade out animation for landing page */
.fade-out {
    opacity: 1;
    animation: fadeOut 1s ease-in-out forwards;
}

@keyframes fadeOut {
    0% {
        opacity: 1;
        visibility: visible;
    }
    100% {
        opacity: 0;
        visibility: hidden;
    }
}

/* Fade in animation for main page */
.fade-in {
    opacity: 0;
    animation: fadeIn 1s ease-in-out forwards;
    animation-delay: 0.5s; /* Start fading in halfway through landing fade out */
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        visibility: hidden;
    }
    100% {
        opacity: 1;
        visibility: visible;
    }
}

/* Modal fade animations */
.modal.fade-in-modal {
    opacity: 0;
    animation: fadeInModal 0.3s ease-out forwards;
}

@keyframes fadeInModal {
    0% {
        opacity: 0;
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.modal.fade-out-modal {
    opacity: 1;
    animation: fadeOutModal 0.3s ease-in forwards;
}

@keyframes fadeOutModal {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0.9);
    }
}

/* Smooth transitions for interactive elements */
.smooth-transition {
    transition: all 0.3s ease;
}

/* Page transition utilities */
.page-transition-enter {
    opacity: 0;
    transform: translateY(20px);
}

.page-transition-enter-active {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.page-transition-exit {
    opacity: 1;
    transform: translateY(0);
}

.page-transition-exit-active {
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}