/* Dancing Clouds above Badge */
.dancing-clouds-container {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 20px;
    margin-bottom: 20px;
    height: 90px;
    /* Space for them */
}

.dancing-cloud {
    width: 72px;
    height: auto;
    object-fit: contain;
    animation: fluffy-dance 4s infinite ease-in-out;
}

/* Stagger slightly if desired, but user said "left 3 times right 3 times" behavior generally.
   Let's stagger them a bit for "fluffy" feel */
.dancing-cloud:nth-child(2) {
    animation-delay: 0.1s;
}

.dancing-cloud:nth-child(3) {
    animation-delay: 0.2s;
}

@keyframes fluffy-dance {
    0% {
        transform: translate(0, 0);
    }

    /* Left side 3 bounces */
    5% {
        transform: translate(-4px, -6px) rotate(-5deg);
    }

    10% {
        transform: translate(0, 0);
    }

    15% {
        transform: translate(-4px, -6px) rotate(-5deg);
    }

    20% {
        transform: translate(0, 0);
    }

    25% {
        transform: translate(-4px, -6px) rotate(-5deg);
    }

    30% {
        transform: translate(0, 0);
    }

    /* Pause in middle? */
    45% {
        transform: translate(0, 0);
    }

    /* Right side 3 bounces */
    50% {
        transform: translate(4px, -6px) rotate(5deg);
    }

    55% {
        transform: translate(0, 0);
    }

    60% {
        transform: translate(4px, -6px) rotate(5deg);
    }

    65% {
        transform: translate(0, 0);
    }

    70% {
        transform: translate(4px, -6px) rotate(5deg);
    }

    75% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(0, 0);
    }
}