/* Background Decorations */
#fixed-background-outer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

#global-background-wrapper {
    position: absolute;
    /* Height will be set by JS */
    top: 0;
    left: 0;
    width: 100%;
    will-change: transform;
}

/* Base Blob Style */
.blob-shape {
    position: absolute;
    border-radius: 50%;
    /* filter: blur(80px); -- TEMP DISABLED for debugging */
    /* Soften edges for "organic" look */
    opacity: 0.8;
    animation: floatBlob 20s infinite alternate ease-in-out;
    /* border: 3px dashed red; DEBUG REMOVED */
}

/* Specific Blobs based on the reference image (top-left green, mid-right blue, etc.) */

/* Top Left - Large Green */
.blob-1 {
    top: -10%;
    left: -10%;
    width: 50vw;
    height: 50vw;
    background: radial-gradient(circle, var(--cirq-green-light) 0%, rgba(76, 176, 80, 0) 70%);
    animation-delay: 0s;
}

/* Middle Right - Blue */
.blob-2 {
    top: 40%;
    right: -15%;
    width: 40vw;
    height: 60vw;
    background: radial-gradient(circle, var(--cirq-blue-light) 0%, rgba(0, 119, 182, 0) 70%);
    animation-delay: -5s;
}

/* Bottom Left - Green/Teal Mix */
.blob-3 {
    bottom: -10%;
    left: -10%;
    width: 60vw;
    height: 50vw;
    background: radial-gradient(circle, var(--cirq-green) 0%, rgba(0, 61, 91, 0) 70%);
    animation-delay: -10s;
}

/* Extra small accent blobs */
.blob-4 {
    top: 20%;
    left: 40%;
    width: 20vw;
    height: 20vw;
    background: rgba(0, 150, 224, 0.4);
    display: none;
    /* filter: blur(40px); -- TEMP DISABLED */
    animation-duration: 25s;
}

.blob-5 {
    bottom: 30%;
    left: 10%;
    width: 15vw;
    height: 15vw;
    background: rgba(107, 199, 111, 0.5);
    /* filter: blur(40px); -- TEMP DISABLED */
    animation-duration: 15s;
}

@keyframes floatBlob {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }

    100% {
        transform: translate(30px, 50px) rotate(10deg);
    }
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .blob-shape {
        opacity: 0.4;
        /* Fade them out a bit more on mobile so text is legible */
    }
}