:root {
    --blob-color-1: rgba(0, 255, 132, 0.15); /* Slightly reduced opacity for subtlety */
    --blob-color-2: rgba(255, 190, 32, 0.15);
    --blob-color-3: rgba(138, 43, 226, 0.1);
    --blob-color-4: rgba(255, 105, 180, 0.1);
    --blob-color-5: rgba(30, 144, 255, 0.1);
    --hue: 0deg; /* Initial hue for all */
}

/* Background blobs */
body::before,
body::after,
.main-body::before,
.main-body::after,
.container::before,
.container::after { /* Added container::after for one more blob */
    content: '';
    position: fixed;
    z-index: -1;
    pointer-events: none;
    background-color: var(--blob-color); /* Using solid color with opacity */
    filter: blur(50px) hue-rotate(var(--hue)); /* Reduced blur for performance and subtlety */
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; /* Initial morph shape */
    animation: morph-float 25s ease-in-out infinite, color-cycle 60s linear infinite; /* Slower animations for subtlety */
    transform-origin: center;
    will-change: transform, border-radius; /* Hint to browser for smoother rendering, may reduce flickering */
}

/* Specific styles and overrides for each blob */
body::before {
    --blob-color: var(--blob-color-1);
    width: 800px; /* Increased size for better screen coverage */
    height: 800px;
    top: 0%; /* Moved up for middle-top placement */
    left: 10%;
    animation-duration: 25s, 60s; /* morph-float, color-cycle */
    animation-name: morph-float1, color-cycle;
}

body::after {
    --blob-color: var(--blob-color-2);
    width: 700px;
    height: 700px;
    top: 5%;
    right: 10%;
    animation-duration: 28s, 65s;
    animation-name: morph-float2, color-cycle;
}

.main-body::before {
    --blob-color: var(--blob-color-3);
    width: 800px;
    height: 800px;
    top: 10%;
    right: 20%;
    animation-duration: 30s, 70s;
    animation-name: morph-float3, color-cycle;
}

.main-body::after {
    --blob-color: var(--blob-color-4);
    width: 600px;
    height: 600px;
    top: 15%;
    left: 30%;
    animation-duration: 27s, 62s;
    animation-name: morph-float4, color-cycle;
}

.container::before {
    --blob-color: var(--blob-color-5);
    width: 650px;
    height: 650px;
    top: 20%; /* Changed from bottom to top for upper placement */
    left: 20%;
    animation-duration: 29s, 68s;
    animation-name: morph-float5, color-cycle;
}

.container::after {
    --blob-color: var(--blob-color-1); /* Reuse color for extra blob */
    width: 750px;
    height: 750px;
    top: 25%; /* Changed from bottom to top for upper placement */
    right: 15%;
    animation-duration: 32s, 74s;
    animation-name: morph-float6, color-cycle;
}

/* Color cycle animation */
@keyframes color-cycle {
    0% {
        --hue: 0deg;
    }
    100% {
        --hue: 360deg;
    }
}

/* Morph and float animations (varied per blob for uniqueness, reduced amplitude for subtlety) */
@keyframes morph-float1 {
    0%, 100% {
        transform: translate(0, 0) scale(1) rotate(0deg);
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    }
    50% {
        transform: translate(20px, -100px) scale(1.05, 0.95) rotate(5deg); /* Reduced movement */
        border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
    }
}

@keyframes morph-float2 {
    0%, 100% {
        transform: translate(0, 0) scale(1) rotate(0deg);
        border-radius: 64% 36% 52% 48% / 62% 38% 64% 36%;
    }
    50% {
        transform: translate(-15px, -80px) scale(0.95, 1.05) rotate(-3deg);
        border-radius: 58% 42% 42% 58% / 58% 69% 31% 42%;
    }
}

@keyframes morph-float3 {
    0%, 100% {
        transform: translate(0, 0) scale(1) rotate(0deg);
        border-radius: 52% 48% 66% 34% / 38% 64% 36% 62%;
    }
    50% {
        transform: translate(25px, -120px) scale(1.1, 0.9) rotate(7deg);
        border-radius: 42% 58% 58% 42% / 42% 31% 69% 58%;
    }
}

@keyframes morph-float4 {
    0%, 100% {
        transform: translate(0, 0) scale(1) rotate(0deg);
        border-radius: 40% 70% 60% 45% / 40% 70% 60% 45%;
    }
    50% {
        transform: translate(-20px, -90px) scale(0.9, 1.1) rotate(-5deg);
        border-radius: 60% 45% 45% 70% / 60% 45% 45% 70%;
    }
}

@keyframes morph-float5 {
    0%, 100% {
        transform: translate(0, 0) scale(1) rotate(0deg);
        border-radius: 58% 42% 42% 58% / 58% 69% 31% 42%;
    }
    50% {
        transform: translate(15px, -110px) scale(1.03, 0.97) rotate(4deg);
        border-radius: 64% 36% 52% 48% / 62% 38% 64% 36%;
    }
}

@keyframes morph-float6 {
    0%, 100% {
        transform: translate(0, 0) scale(1) rotate(0deg);
        border-radius: 42% 58% 58% 42% / 42% 31% 69% 58%;
    }
    50% {
        transform: translate(-25px, -130px) scale(1.08, 0.92) rotate(-6deg);
        border-radius: 52% 48% 66% 34% / 38% 64% 36% 62%;
    }
}

/* Media query for smaller screens */
@media (max-width: 760px) {
    body::before {
        width: 400px;
        height: 400px;
        top: 0%;
        left: 5%;
        filter: blur(40px) hue-rotate(var(--hue)); /* Further reduced blur */
    }
    body::after {
        width: 350px;
        height: 350px;
        top: 3%;
        right: 5%;
        filter: blur(35px) hue-rotate(var(--hue));
    }
    .main-body::before {
        width: 400px;
        height: 400px;
        top: 5%;
        right: 15%;
        filter: blur(40px) hue-rotate(var(--hue));
    }
    .main-body::after {
        width: 300px;
        height: 300px;
        top: 10%;
        left: 25%;
        filter: blur(35px) hue-rotate(var(--hue));
    }
    .container::before {
        width: 325px;
        height: 325px;
        top: 15%;
        left: 15%;
        filter: blur(37px) hue-rotate(var(--hue));
    }
    .container::after {
        width: 375px;
        height: 375px;
        top: 20%;
        right: 10%;
        filter: blur(37px) hue-rotate(var(--hue));
    }
}