.blobs{
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}
.blob{
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.4;
    will-change: transform;
}
.blob-1{
    width: 480px; height: 480px;
    background: radial-gradient(circle at 30% 30%, #f4509a, transparent 72%);
    top: -140px; left: -120px;
    animation: blobDrift1 22s ease-in-out infinite;
}
.blob-2{
    width: 420px; height: 420px;
    background: radial-gradient(circle at 60% 40%, #8a5cf6, transparent 72%);
    top: 28%; right: -160px;
    animation: blobDrift2 26s ease-in-out infinite;
}
.blob-3{
    width: 400px; height: 400px;
    background: radial-gradient(circle at 50% 50%, #ff8fc4, transparent 72%);
    bottom: -180px; left: 18%;
    animation: blobDrift3 30s ease-in-out infinite;
}

@keyframes blobDrift1{
    0%, 100%{ transform: translate(0,0) scale(1); }
    33%{ transform: translate(70px, 50px) scale(1.12); }
    66%{ transform: translate(-30px, 80px) scale(0.94); }
}
@keyframes blobDrift2{
    0%, 100%{ transform: translate(0,0) scale(1); }
    50%{ transform: translate(-80px, -60px) scale(1.16); }
}
@keyframes blobDrift3{
    0%, 100%{ transform: translate(0,0) scale(1); }
    50%{ transform: translate(60px, -70px) scale(1.1); }
}