
.vbe-wrapper {
    position: relative !important;
    overflow: hidden;
    z-index: 0;
    --vbe-color-primary: rgba(255, 255, 255, 0.6); /* fallback */
    --vbe-color-bg: transparent;
}

.vbe-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: transparent;
}

/* Fixed animations with visible defaults */
.vbe-orbs::before {
    background: radial-gradient(circle, var(--vbe-color-primary, rgba(255, 255, 255, 0.6)) 10%, transparent 11%) center/20px 20px;
    animation: moveOrbs 20s infinite linear;
}

.vbe-dots::before {
    background: radial-gradient(var(--vbe-color-primary, rgba(255, 255, 255, 0.6)) 1px, transparent 1px) 0 0 / 10px 10px repeat;
    animation: scrollDots 30s linear infinite;
}

.vbe-waves::before {
    background: repeating-linear-gradient(135deg, var(--vbe-color-primary, rgba(255,255,255,0.4)) 0px, var(--vbe-color-primary, rgba(255,255,255,0.4)) 2px, transparent 2px, transparent 10px);
    animation: waveFlow 20s linear infinite;
}

.vbe-shimmer::before {
    background: linear-gradient(45deg, transparent, var(--vbe-color-primary, rgba(255,255,255,0.5)), transparent);
    animation: shimmerAnim 3s infinite linear;
}

@keyframes moveOrbs {
    0% { background-position: 0 0; }
    100% { background-position: 100px 100px; }
}

@keyframes scrollDots {
    0% { background-position: 0 0; }
    100% { background-position: 100px 100px; }
}

@keyframes waveFlow {
    0% { background-position: 0 0; }
    100% { background-position: 200px 200px; }
}

@keyframes shimmerAnim {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
