

.fancy-animation {
    animation: slideFadeIn 1.1s ease-out;
}
.fancy-animation-slow {
    animation: slideFadeInSlow 1.9s ease-out;
}

@keyframes slideFadeIn {
    0% {
        opacity: 0;
        transform: translateY(-1rem); /* Slide down from ~1rem */
    }
    100% {
        opacity: 1;
        transform: translateY(0); /* End at original position */
    }
}

@keyframes slideFadeInSlow {
    0% {
        opacity: 0;
        transform: translateY(-1.5rem); /* Slide down from ~1rem */
    }
    50% {
        opacity: 0;
        transform: translateY(-1.5rem); /* Slide down from ~1rem */
    }
    100% {
        opacity: 1;
        transform: translateY(0); /* End at original position */
    }
}
