/* Floating color blobs background */
.bg-blobs {
    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 200%;

    z-index: -20;
    overflow: hidden;
    background-color: var(--color-bg-dark);
}

/* Network connection texture overlay */
.bg-blobs::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('img/network-texture.svg');
    background-repeat: repeat;
    background-size: 600px 600px;
    opacity: 0.08;
    pointer-events: none;
    z-index: 1;
}

.blob {
    position: absolute;
    filter: blur(80px);
    will-change: transform;
}

.blob-1 {
    width: 65vmax;
    height: 65vmax;
    background: var(--color-green);
    opacity: 0.45;
    top: 12.5%;
    left: 15%;
    border-radius: 60% 40% 30% 70% / 100% 85% 92% 74%;
    animation: drift-1 15s ease-in-out infinite alternate;
}

.blob-2 {
    width: 25vmax;
    height: 25vmax;
    background: var(--color-blue);
    opacity: 0.65;
    top: 10%;
    left: -20%;
    border-radius: 60% 40% 30% 70% / 100% 85% 92% 74%;
    animation: drift-1 15s ease-in-out infinite alternate;
}

.blob-3 {
    width: 25vmax;
    height: 25vmax;
    background: var(--color-blue);
    opacity: 0.35;
    top: 80%;
    left: 70%;
    border-radius: 60% 40% 30% 70% / 100% 85% 92% 74%;
    animation: drift-1 15s ease-in-out infinite alternate;
}

/* translate-only keyframes: no scale, no rotate = no blur re-rasterization */
@keyframes drift-1 {
    from {
        transform: translate(0, 0);
    }

    to {
        transform: translate(38vw, 6vh);
    }
}

@keyframes drift-2 {
    from {
        transform: translate(0, 0);
    }

    to {
        transform: translate(-50vw, -4vh);
    }
}

@keyframes drift-3 {
    from {
        transform: translate(0, 0);
    }

    to {
        transform: translate(-60vw, -50vh);
    }
}

@keyframes drift-4 {
    from {
        transform: translate(0, 0);
    }

    to {
        transform: translate(50vw, -30vh);
    }
}