.blob-wrapper {
    position: relative;
    overflow: visible;
}

.blob {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
}

/* Media */
.blob-media {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 2;
    border-radius: 50%;
}

/* Blob Designs */
.blob-design-1 {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
}
.blob-design-2 {
    border-radius: 30% 70% 70% 30% / 50% 60% 40% 50%;
}
.blob-design-3 {
    border-radius: 70% 30% 40% 60% / 30% 70% 60% 40%;
}

/* Animations */
.left-right {
    animation: lr linear infinite alternate;
}
.right-left {
    animation: rl linear infinite alternate;
}
.top-bottom {
    animation: tb linear infinite alternate;
}
.bottom-top {
    animation: bt linear infinite alternate;
}

@keyframes lr {
    from { transform: translateX(0); }
    to { transform: translateX(40px); }
}
@keyframes rl {
    from { transform: translateX(0); }
    to { transform: translateX(-40px); }
}
@keyframes tb {
    from { transform: translateY(0); }
    to { transform: translateY(40px); }
}
@keyframes bt {
    from { transform: translateY(0); }
    to { transform: translateY(-40px); }
}


/* new adissions */

.blob-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.blob {
    width: 85%;
    height: 85%;
    position: absolute;
    z-index: 1;
    animation: blobFire 8s ease-in-out infinite;
    margin-left: 15%;
}

/* Media */
.blob-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 2;
    border-radius: inherit;
    margin-top: 3%;
}

/* Blob designs (base shapes) */
.blob-design-1 {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
}
.blob-design-2 {
    border-radius: 30% 70% 70% 30% / 50% 60% 40% 50%;
}
.blob-design-3 {
    border-radius: 70% 30% 40% 60% / 30% 70% 60% 40%;
}

/* 🔥 Fire-like morph animation */
@keyframes blobFire {
    0% {
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
        transform: scale(1) rotate(0deg);
    }
    25% {
        border-radius: 55% 45% 35% 65% / 65% 35% 65% 35%;
        transform: scale(1.03) rotate(1deg);
    }
    50% {
        border-radius: 40% 60% 60% 40% / 40% 60% 30% 70%;
        transform: scale(0.97) rotate(-1deg);
    }
    75% {
        border-radius: 65% 35% 45% 55% / 35% 65% 55% 45%;
        transform: scale(1.02) rotate(0.5deg);
    }
    100% {
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
        transform: scale(1) rotate(0deg);
    }
}