/* Drifting cloud *formations* — overlapping blobs, theme-tinted (no white wash, no glow) */
#cloudsContainer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 2000;
    overflow: hidden;
    display: none;
    --cloud-primary-rgb: 91, 143, 255;
    --cloud-secondary-rgb: 96, 146, 255;
}

.cloud-formation {
    position: absolute;
    will-change: transform, opacity;
    animation: cloud-drift var(--drift-duration, 72s) linear infinite;
}

/* Each lump in the formation — stacked circles read as a cloud silhouette */
.cloud-blob {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    /* Match leaves/stars: primary-led glass tint, tiny white only as specular */
    background: radial-gradient(
        ellipse 100% 90% at 38% 32%,
        rgba(var(--cloud-primary-rgb), 0.38) 0%,
        rgba(var(--cloud-secondary-rgb), 0.26) 38%,
        rgba(var(--cloud-primary-rgb), 0.14) 58%,
        transparent 78%
    );
    filter: blur(11px);
    /* No box-shadow — avoids the “glowing orb” look */
}

@keyframes cloud-drift {
    0% {
        transform: translate3d(-45vw, var(--y0, 0), 0) scale(var(--s0, 1));
        opacity: var(--o0, 0.42);
    }
    18% {
        transform: translate3d(8vw, var(--y1, -8px), 0) scale(var(--s1, 1.03));
        opacity: var(--o1, 0.5);
    }
    48% {
        transform: translate3d(52vw, var(--y2, 6px), 0) scale(var(--s2, 0.98));
        opacity: var(--o2, 0.45);
    }
    78% {
        transform: translate3d(98vw, var(--y3, -4px), 0) scale(var(--s3, 1.02));
        opacity: var(--o3, 0.48);
    }
    100% {
        transform: translate3d(135vw, var(--y4, 0), 0) scale(var(--s4, 1));
        opacity: var(--o4, 0.4);
    }
}