/* Background burbujas */
:root {
    --color1: 218, 165, 242;
    --color2: 255, 114, 205;
    --color3: 201, 255, 178;
    --color4: 108, 255, 86;
    --color5: 185, 255, 156;
    --color-interactive: var(--color1);
    animation: colorShift 10s linear infinite;
}

.filters-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.filter-gooey {
    filter: url(#goo) blur(90px);
}

@keyframes colorShift {
    0% {
        --color-interactive: var(--color1);
        /* Empieza con el color 1 (violeta) */
    }

    25% {
        --color-interactive: var(--color2);
        /* Cambia al color 2 (rosa) */
    }

    50% {
        --color-interactive: var(--color4);
        /* Cambia al color 4 (verde neón) */
    }

    75% {
        --color-interactive: var(--color5);
        /* Cambia al color 5 (verde pastel) */
    }

    100% {
        --color-interactive: var(--color1);
        /* Vuelve al color 1 para un ciclo perfecto */
    }
}

@keyframes moveInCircle {
    0% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(180deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes moveVertical {
    0% {
        transform: translateY(-50%);
    }

    50% {
        transform: translateY(50%);
    }

    100% {
        transform: translateY(-50%);
    }
}

@keyframes moveHorizontal {
    0% {
        transform: translateX(-50%) translateY(-10%);
    }

    50% {
        transform: translateX(50%) translateY(10%);
    }

    100% {
        transform: translateX(-50%) translateY(-10%);
    }
}

.g1 {
    transform-origin: center center;
    animation: moveVertical 30s ease infinite;
}

.g2 {
    transform-origin: calc(50% - 400px);
    animation: moveInCircle 20s reverse infinite;
}

.g3 {
    transform-origin: calc(50% + 400px);
    animation: moveInCircle 40s linear infinite;
}

.g4 {
    transform-origin: calc(50% - 200px);
    animation: moveHorizontal 40s ease infinite;
}

.interactive {
    width: 50%;
    height: 50%;
    top: -25%;
    left: -25%;
}