/* === RAINBOW BUTTON EFFECT (Magic UI) === */
:root {
    /* INSTAGRAM COLORS */
    --color-1: #feda75;
    --color-2: #fa7e1e;
    --color-3: #d62976;
    --color-4: #962fbf;
    --color-5: #4f5bd5;

    --rainbow-speed: 3s;
    /* 3s Animation Speed */
}

@keyframes rainbow {
    0% {
        background-position: 0%;
    }

    100% {
        background-position: 200%;
    }
}

.rainbow-container {
    position: relative;
    z-index: 10;
    /* Rainbow Gradient Border Background */
    background:
        linear-gradient(#ffffff, #ffffff),
        linear-gradient(#ffffff 50%, rgba(255, 255, 255, 0.6) 80%, rgba(255, 255, 255, 0)),
        linear-gradient(90deg,
            var(--color-1),
            var(--color-2),
            var(--color-3),
            var(--color-4),
            var(--color-5),
            var(--color-1),
            /* Reuse existing vars instead of undefined 6-10 */
            var(--color-2),
            var(--color-3),
            var(--color-4),
            var(--color-5),
            var(--color-1)
            /* REPEAT FIRST COLOR FOR SEAMLESS LOOP */
        );

    background-origin: border-box;
    background-clip: padding-box, border-box, border-box;
    background-size: 200%;
    border: 4px solid transparent;

    animation: rainbow var(--rainbow-speed) infinite linear;
}

/* Glow Effect Underneath */
.rainbow-container::before {
    content: "";
    position: absolute;
    bottom: -20%;
    left: 50%;
    z-index: -1;
    height: 20%;
    width: 60%;
    transform: translateX(-50%);
    background: linear-gradient(90deg,
            var(--color-1),
            var(--color-2),
            var(--color-3),
            var(--color-4),
            var(--color-5),
            var(--color-1),
            /* Reuse existing vars instead of undefined 6-10 */
            var(--color-2),
            var(--color-3),
            var(--color-4),
            var(--color-5),
            var(--color-1)
            /* REPEAT FIRST COLOR FOR SEAMLESS LOOP */
        );
    background-size: 200%;
    filter: blur(20px);
    animation: rainbow var(--rainbow-speed) infinite linear;
    opacity: 0.5;
}