/* =====================
   Base Animations
===================== */
[class*="animate-"] {
    opacity: 0;
    transition: all 0.8s ease;
}

/* Directions */
.animate-bottom {
    transform: translateY(100px);
}

.animate-top {
    transform: translateY(-100px);
}

.animate-right {
    transform: translateX(100px);
}

.animate-left {
    transform: translateX(-100px);
}

.animate-left-rotate {
    transform: translateX(-100px) rotate(360deg);
    transition: transform 1s ease;
}

.animate-fade {
    opacity: 0;
    transition: opacity 3s ease;
}

/* 🌸 Bloom Animation */
.animate-bloom {
    opacity: 0;
    transform: scale(0.2);
    transition: transform 0.8s ease-out, opacity 0.8s ease-out;
}

/* When element is visible */
.animate-visible {
    opacity: 1;
    transform: translate(0, 0) scale(1);
}

/* Optional: smooth bounce after bloom */
.animate-bloom.animate-visible {
    animation: bloom-bounce 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes bloom-bounce {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }

    70% {
        transform: scale(1.02);
        opacity: 1;
    }

    100% {
        transform: scale(1);
    }
}