/* Blob Animations and Styling */

/* Blob container and blobs */
.blob-container {
    position: fixed;
    top: -15vh;
    left: -15vw;
    width: 130vw;
    height: 130vh;
    pointer-events: none;
    z-index: -1;
    overflow: visible;
}

.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(18px);
    transition: background-color 0.8s cubic-bezier(0.19, 1, 0.22, 1);
    will-change: transform, opacity, border-radius;
    animation-play-state: running !important;
    animation-fill-mode: forwards !important;
}

/* Subtle heartbeat animation that will apply to all blobs with different delays */
@keyframes subtle-heartbeat {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(0.9);
    }
}

/* Central blob representing the user's community */
.central-blob {
    width: 40vmin;
    height: 40vmin;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    filter: blur(15px);
    animation: subtle-heartbeat 5s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
}

/* Dark mode blob colors */
.dark .blob-1, .dark .blob-8, .dark .blob-11 {
    background: rgba(121, 134, 203, 0.2); /* Soft purple */
}

.dark .blob-2, .dark .blob-9, .dark .blob-14 {
    background: rgba(100, 151, 177, 0.2); /* Soft blue */
}

.dark .blob-3, .dark .blob-5, .dark .blob-10 {
    background: rgba(78, 168, 222, 0.2); /* Light blue */
}

.dark .blob-4, .dark .blob-6, .dark .blob-12 {
    background: rgba(86, 130, 181, 0.2); /* Medium blue */
}

.dark .blob-7, .dark .blob-13 {
    background: rgba(72, 202, 228, 0.2); /* Teal */
}

.dark .central-blob {
    background: rgba(78, 168, 222, 0.3); /* Slightly more opaque light blue */
}

/* Surrounding blobs - adjusted positions to extend beyond screen edges */
.blob-1 {
    width: 45vmin;
    height: 45vmin;
    top: -5%;
    left: 10%;
    animation: blob-float-1 20s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite alternate, subtle-heartbeat 12s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite 1s;
}

.blob-2 {
    width: 35vmin;
    height: 35vmin;
    top: 60%;
    left: 75%;
    animation: blob-float-2 23s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite alternate, subtle-heartbeat 14s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite 2s;
}

.blob-3 {
    width: 40vmin;
    height: 40vmin;
    top: 30%;
    left: 95%;
    animation: blob-float-3 26s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite alternate, subtle-heartbeat 16s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite 3s;
}

.blob-4 {
    width: 30vmin;
    height: 30vmin;
    top: 75%;
    left: 25%;
    animation: blob-float-4 22s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite alternate, subtle-heartbeat 13s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite 4s;
}

.blob-5 {
    width: 38vmin;
    height: 38vmin;
    top: 15%;
    left: 50%;
    animation: blob-float-5 24s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite alternate, subtle-heartbeat 15s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite 5s;
}

.blob-6 {
    width: 28vmin;
    height: 28vmin;
    top: 95%;
    left: 15%;
    animation: blob-float-6 21s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite alternate, subtle-heartbeat 11s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite 6s;
}

.blob-7 {
    width: 32vmin;
    height: 32vmin;
    top: 5%;
    left: 85%;
    animation: blob-float-7 25s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite alternate, subtle-heartbeat 17s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite 7s;
}

.blob-8 {
    width: 42vmin;
    height: 42vmin;
    top: 85%;
    left: 85%;
    animation: blob-float-8 27s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite alternate, subtle-heartbeat 18s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite 8s;
}

/* Adding more blobs with extended positions */
.blob-9 {
    width: 34vmin;
    height: 34vmin;
    top: 40%;
    left: -5%;
    animation: blob-float-9 23s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite alternate, subtle-heartbeat 12.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite 9s;
}

.blob-10 {
    width: 30vmin;
    height: 30vmin;
    top: 105%;
    left: 50%;
    animation: blob-float-10 22s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite alternate, subtle-heartbeat 13.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite 10s;
}

.blob-11 {
    width: 38vmin;
    height: 38vmin;
    top: -10%;
    left: 40%;
    animation: blob-float-11 26s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite alternate, subtle-heartbeat 15.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite 11s;
}

.blob-12 {
    width: 42vmin;
    height: 42vmin;
    top: 60%;
    left: -10%;
    animation: blob-float-12 24s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite alternate, subtle-heartbeat 14.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite 12s;
}

.blob-13 {
    width: 36vmin;
    height: 36vmin;
    top: 30%;
    left: 105%;
    animation: blob-float-13 25s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite alternate, subtle-heartbeat 16.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite 13s;
}

.blob-14 {
    width: 28vmin;
    height: 28vmin;
    top: -5%;
    left: 70%;
    animation: blob-float-14 27s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite alternate, subtle-heartbeat 17.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite 14s;
}

/* Blob animation keyframes */
@keyframes blob-float-1 {
    0% {
        transform: translateY(-20%) translateX(-15%) scale(1) rotate(0deg);
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    }
    50% {
        transform: translateY(10%) translateX(20%) scale(1.1) rotate(5deg);
        border-radius: 40% 60% 70% 30% / 30% 60% 40% 70%;
    }
    100% {
        transform: translateY(30%) translateX(5%) scale(0.95) rotate(-5deg);
        border-radius: 30% 70% 40% 60% / 70% 40% 60% 30%;
    }
}

@keyframes blob-float-2 {
    0% {
        transform: translateY(10%) translateX(10%) scale(1) rotate(0deg);
        border-radius: 50% 50% 20% 80% / 25% 80% 20% 75%;
    }
    50% {
        transform: translateY(-5%) translateX(-8%) scale(1.1) rotate(-8deg);
        border-radius: 70% 30% 50% 50% / 40% 60% 40% 60%;
    }
    100% {
        transform: translateY(-15%) translateX(5%) scale(0.9) rotate(10deg);
        border-radius: 25% 75% 70% 30% / 60% 40% 60% 40%;
    }
}

@keyframes blob-float-3 {
    0% {
        transform: translateY(5%) translateX(-12%) scale(0.9) rotate(-3deg);
        border-radius: 40% 60% 30% 70% / 60% 40% 60% 40%;
    }
    50% {
        transform: translateY(-10%) translateX(5%) scale(1.1) rotate(8deg);
        border-radius: 60% 40% 60% 40% / 40% 60% 40% 60%;
    }
    100% {
        transform: translateY(12%) translateX(10%) scale(1) rotate(-10deg);
        border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    }
}

@keyframes blob-float-4 {
    0% {
        transform: translateY(-8%) translateX(15%) scale(1.05) rotate(5deg);
        border-radius: 30% 70% 60% 40% / 50% 60% 40% 50%;
    }
    50% {
        transform: translateY(12%) translateX(-10%) scale(0.95) rotate(-5deg);
        border-radius: 60% 40% 40% 60% / 40% 50% 50% 60%;
    }
    100% {
        transform: translateY(-5%) translateX(-15%) scale(1.1) rotate(8deg);
        border-radius: 50% 50% 30% 70% / 70% 30% 70% 30%;
    }
}

@keyframes blob-float-5 {
    0% {
        transform: translateY(10%) translateX(5%) scale(1) rotate(-5deg);
        border-radius: 45% 55% 65% 35% / 40% 50% 50% 60%;
    }
    50% {
        transform: translateY(-12%) translateX(-8%) scale(1.05) rotate(5deg);
        border-radius: 50% 50% 40% 60% / 60% 40% 60% 40%;
    }
    100% {
        transform: translateY(8%) translateX(-12%) scale(0.9) rotate(-8deg);
        border-radius: 65% 35% 50% 50% / 35% 65% 35% 65%;
    }
}

@keyframes blob-float-6 {
    0% {
        transform: translateY(15%) translateX(-20%) scale(0.9) rotate(-8deg);
        border-radius: 55% 45% 35% 65% / 45% 55% 45% 55%;
    }
    50% {
        transform: translateY(-10%) translateX(15%) scale(1.1) rotate(10deg);
        border-radius: 40% 60% 60% 40% / 60% 40% 60% 40%;
    }
    100% {
        transform: translateY(-25%) translateX(-10%) scale(1) rotate(-5deg);
        border-radius: 65% 35% 45% 55% / 35% 65% 55% 45%;
    }
}

@keyframes blob-float-7 {
    0% {
        transform: translateY(-10%) translateX(25%) scale(1.05) rotate(8deg);
        border-radius: 35% 65% 55% 45% / 65% 35% 45% 55%;
    }
    50% {
        transform: translateY(20%) translateX(-15%) scale(0.9) rotate(-10deg);
        border-radius: 60% 40% 30% 70% / 40% 60% 70% 30%;
    }
    100% {
        transform: translateY(5%) translateX(10%) scale(1.1) rotate(5deg);
        border-radius: 45% 55% 65% 35% / 55% 45% 35% 65%;
    }
}

@keyframes blob-float-8 {
    0% {
        transform: translateY(20%) translateX(10%) scale(0.95) rotate(-5deg);
        border-radius: 50% 50% 40% 60% / 40% 60% 60% 40%;
    }
    50% {
        transform: translateY(-15%) translateX(-20%) scale(1.1) rotate(8deg);
        border-radius: 30% 70% 60% 40% / 70% 30% 40% 60%;
    }
    100% {
        transform: translateY(-5%) translateX(15%) scale(1) rotate(-10deg);
        border-radius: 60% 40% 50% 50% / 40% 60% 50% 50%;
    }
}

@keyframes blob-float-9 {
    0% {
        transform: translateY(-12%) translateX(15%) scale(1.02) rotate(8deg);
        border-radius: 45% 55% 40% 60% / 55% 45% 50% 50%;
    }
    50% {
        transform: translateY(14%) translateX(-12%) scale(0.98) rotate(-7deg);
        border-radius: 55% 45% 55% 45% / 45% 55% 45% 55%;
    }
    100% {
        transform: translateY(-8%) translateX(-15%) scale(1.05) rotate(5deg);
        border-radius: 50% 50% 45% 55% / 55% 45% 50% 50%;
    }
}

@keyframes blob-float-10 {
    0% {
        transform: translateY(18%) translateX(-10%) scale(0.95) rotate(-6deg);
        border-radius: 60% 40% 35% 65% / 40% 60% 60% 40%;
    }
    50% {
        transform: translateY(-10%) translateX(15%) scale(1.08) rotate(9deg);
        border-radius: 40% 60% 65% 35% / 60% 40% 35% 65%;
    }
    100% {
        transform: translateY(-20%) translateX(-8%) scale(1) rotate(-5deg);
        border-radius: 55% 45% 50% 50% / 45% 55% 55% 45%;
    }
}

@keyframes blob-float-11 {
    0% {
        transform: translateY(-15%) translateX(-8%) scale(1.05) rotate(-8deg);
        border-radius: 35% 65% 60% 40% / 60% 40% 35% 65%;
    }
    50% {
        transform: translateY(10%) translateX(12%) scale(0.92) rotate(6deg);
        border-radius: 60% 40% 40% 60% / 40% 60% 60% 40%;
    }
    100% {
        transform: translateY(15%) translateX(-15%) scale(1.02) rotate(-4deg);
        border-radius: 50% 50% 55% 45% / 45% 55% 50% 50%;
    }
}

@keyframes blob-float-12 {
    0% {
        transform: translateY(10%) translateX(15%) scale(0.98) rotate(7deg);
        border-radius: 40% 60% 55% 45% / 55% 45% 40% 60%;
    }
    50% {
        transform: translateY(-15%) translateX(-10%) scale(1.05) rotate(-6deg);
        border-radius: 60% 40% 45% 55% / 45% 55% 60% 40%;
    }
    100% {
        transform: translateY(-8%) translateX(8%) scale(0.95) rotate(9deg);
        border-radius: 45% 55% 60% 40% / 50% 50% 45% 55%;
    }
}

@keyframes blob-float-13 {
    0% {
        transform: translateY(-12%) translateX(-15%) scale(1.02) rotate(-7deg);
        border-radius: 55% 45% 40% 60% / 40% 60% 55% 45%;
    }
    50% {
        transform: translateY(8%) translateX(10%) scale(0.96) rotate(5deg);
        border-radius: 45% 55% 60% 40% / 60% 40% 45% 55%;
    }
    100% {
        transform: translateY(15%) translateX(-10%) scale(1.04) rotate(-8deg);
        border-radius: 40% 60% 50% 50% / 50% 50% 40% 60%;
    }
}

@keyframes blob-float-14 {
    0% {
        transform: translateY(12%) translateX(10%) scale(0.94) rotate(6deg);
        border-radius: 45% 55% 50% 50% / 55% 45% 45% 55%;
    }
    50% {
        transform: translateY(-10%) translateX(-15%) scale(1.06) rotate(-8deg);
        border-radius: 55% 45% 45% 55% / 45% 55% 55% 45%;
    }
    100% {
        transform: translateY(-15%) translateX(8%) scale(0.98) rotate(7deg);
        border-radius: 50% 50% 55% 45% / 55% 45% 40% 60%;
    }
}