/* ==========================================================================
   Animations & Enhanced Transitions
   ========================================================================== */
.fade-in {
    opacity: 0;
    transition: opacity 0.8s ease-out;
}

.slide-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.slide-up.visible,
.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

.info-card {
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;
}

.info-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.15), 0 10px 20px -10px rgba(0, 0, 0, 0.1);
}

.page-transition {
    animation: fadeInPage 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.page-exit {
    animation: fadeOutPage 0.4s ease-in forwards;
}

@keyframes fadeInPage {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeOutPage {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(-15px);
    }
}