.ai-bg-blobs {
    --blur-size: 70px;
    /* how soft the blobs are */
    --opacity: 0.45;
    /* overall blob opacity */
    --saturation: 120%;
    /* color vibrance */
    --mix: screen;
    /* blend mode (try: screen, overlay) */

    position: absolute;
    inset: 0;
    /* full-size cover of the parent */
    z-index: 0;
    /* keep behind normal page content */
    pointer-events: none;
    /* clicks pass through */
    /* overflow: hidden; */
    display: block;
}

/* Each blob is a large blurred radial shape */
.ai-bg-blobs .blob {
    position: absolute;
    width: 40vmax;
    height: 40vmax;
    border-radius: 50%;
    filter: blur(var(--blur-size)) saturate(var(--saturation));
    opacity: var(--opacity);
    transform: translate3d(0, 0, 0);
    mix-blend-mode: var(--mix);
    will-change: transform, opacity;
}

/* Individual blob colors/positions/animation */
.ai-bg-blobs .b1 {
    background: radial-gradient(circle at 30% 30%, rgba(94, 92, 255, 1) 0%, rgba(94, 92, 255, 0.6) 40%, rgba(94, 92, 255, 0) 70%);
    left: -20%;
    top: -15%;
    animation: floatA 12s ease-in-out infinite;
    animation-delay: 0s;
}

.ai-bg-blobs .b2 {
    background: radial-gradient(circle at 70% 20%, rgba(0, 199, 190, 1) 0%, rgba(0, 199, 190, 0.55) 40%, rgba(0, 199, 190, 0) 70%);
    right: -5%;
    top: 5%;
    width: 35vmax;
    height: 35vmax;
    animation: floatB 18s ease-in-out infinite;
    animation-delay: 2s;
}

.ai-bg-blobs .b3 {
    background: radial-gradient(circle at 60% 60%, rgba(255, 92, 150, 1) 0%, rgba(255, 92, 150, 0.45) 40%, rgba(255, 92, 150, 0) 70%);
    left: 30%;
    bottom: -100%;
    width: 50vmax;
    height: 50vmax;
    animation: floatC 22s ease-in-out infinite;
    animation-delay: 1s;
}

.ai-bg-blobs .b4 {
    background: radial-gradient(circle at 40% 40%, rgba(255, 200, 80, 0.95) 0%, rgba(255, 200, 80, 0.4) 45%, rgba(255, 200, 80, 0) 75%);
    right: -20%;
    bottom: -15%;
    width: 30vmax;
    height: 30vmax;
    animation: floatD 14s ease-in-out infinite;
    animation-delay: 3s;
}