/* ========================================
   Animations
   ======================================== */

/* Floating elements - rise up and fade out, then restart */
@keyframes floatUp {
    0% {
        transform: translateY(0) scale(1);
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    80% {
        opacity: 1;
    }
    100% {
        transform: translateY(-60px) scale(0.8);
        opacity: 0;
    }
}

/* Different timing variations for staggered effect */
.float-element-1 {
    animation: floatUp 4s ease-in-out infinite;
}

.float-element-2 {
    animation: floatUp 4.5s ease-in-out infinite;
    animation-delay: 0.5s;
}

.float-element-3 {
    animation: floatUp 5s ease-in-out infinite;
    animation-delay: 1s;
}

.float-element-4 {
    animation: floatUp 4.8s ease-in-out infinite;
    animation-delay: 1.5s;
}

.float-element-5 {
    animation: floatUp 5.2s ease-in-out infinite;
    animation-delay: 2s;
}

.float-element-6 {
    animation: floatUp 4.3s ease-in-out infinite;
    animation-delay: 2.5s;
}

.float-element-7 {
    animation: floatUp 4.7s ease-in-out infinite;
    animation-delay: 0.8s;
}