.vmx-glow {
    position: relative;
    border-radius: 20px;
    overflow: visible;
    isolation: isolate;
    z-index: 0;
}

.vmx-glow::before {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: inherit;

    background: linear-gradient(
        90deg,
        #FF00BB 0%,
        #00B3FF 50%,
        #FF00BB 100%
    );

    background-size: 200% 100%;
    animation: vmxGlowMove 3s linear infinite;

    filter: blur(10px);
    opacity: 0.9;

    pointer-events: none;
    z-index: -2;
}

.vmx-glow::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;

    background: linear-gradient(
        90deg,
        #FF00BB 0%,
        #00B3FF 50%,
        #FF00BB 100%
    );

    background-size: 200% 100%;
    animation: vmxGlowMove 3s linear infinite;

    pointer-events: none;
    z-index: -1;

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite: xor;
    mask-composite: exclude;

    padding: 1.5px;
}

@keyframes vmxGlowMove {
    0% {
        background-position: 0% 50%;
    }

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

@media (prefers-reduced-motion: reduce) {
    .vmx-glow::before,
    .vmx-glow::after {
        animation: none;
    }
}