/* Keyframes for sliding in from the top */
@keyframes slideInTop {
    0% {
        transform: translateY(-100%); /* Start above the section */
        opacity: 0;
    }
    100% {
        transform: translateY(0); /* End at original position */
        opacity: 1;
    }
}

@keyframes slideOutTop {
    0% {
        transform: translateY(0); /* Start at original position */
        opacity: 1;
    }
    100% {
        transform: translateY(-100%); /* Move above the section while fading out */
        opacity: 0;
    }
}

/* Classes for animations */
.start-hidden {
    opacity: 0;
    transform: translateY(-100%); /* Hide above */
}

.slide-in-top {
    animation: slideInTop 0.8s ease forwards;
    /* animation-delay: 1s; 1 second delay */
}

.slide-out-top {
    animation: slideOutTop 0.8s ease forwards; /* Move out upwards */
}



@keyframes slideInLeftBlur {
    0% {
        transform: translateX(-100%);
        opacity: 0;
        filter: blur(10px); /* Start with a blur */
    }
    100% {
        transform: translateX(0);
        opacity: 1;
        filter: blur(0); /* End with no blur */
    }
}

@keyframes slideInRightBlur {
    0% {
        transform: translateX(100%);
        opacity: 0;
        filter: blur(10px); /* Start with a blur */
    }
    100% {
        transform: translateX(0);
        opacity: 1;
        filter: blur(0); /* End with no blur */
    }
}

/* Classes for animations with blur */
.start-hidden {
    opacity: 0;
    transform: translateX(0);
    filter: blur(10px); /* Start in a hidden and blurred state */
}

.slide-in-left-blur {
    animation: slideInLeftBlur 0.8s ease forwards;
}

.slide-in-right-blur {
    animation: slideInRightBlur 0.8s ease forwards;
}