.background-orbs {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
    isolation: isolate;
}

.background-orbs span {
    position: absolute;
    left: 0;
    top: 0;
    width: var(--orb-size, 1.5vmin);
    height: var(--orb-size, 1.5vmin);
    border-radius: 50%;
    backface-visibility: hidden;
    opacity: var(--orb-opacity, 0.65);
    color: var(--orb-color, var(--orb-1));
    background:
        radial-gradient(
            circle at center,
            rgb(from currentColor r g b / calc(var(--orb-core-density, 0.7) * 0.95)) 0%,
            rgb(from currentColor r g b / calc(var(--orb-core-density, 0.7) * 0.82)) 42%,
            rgb(from currentColor r g b / calc(var(--orb-core-density, 0.7) * 0.38)) 68%,
            rgb(0 0 0 / 0) var(--orb-edge-fade, 82%)
        );
    filter: blur(var(--orb-blur, 0.25px));
    transform: translate3d(var(--orb-render-x, 0px), var(--orb-render-y, 0px), 0) scale(var(--orb-render-scale, 1));
    box-shadow:
        0 0 var(--orb-glow-blur, 1vmin) var(--orb-glow-spread, 0.25vmin) rgb(from currentColor r g b / 0.42);
    will-change: transform;
}

:root {
    --orb-1: #ffffff;
    --orb-2: #ffffff;
    --orb-3: #ffffff;
}

[data-theme="dark"] {
    --orb-1: #383838;
    --orb-2: #323232;
    --orb-3: #3c3c3c;
}

@media (max-width: 768px) {
    .background-orbs span {
        opacity: 0.75;
    }
}

@media (prefers-reduced-motion: reduce) {
    .background-orbs span {
        transform: translate3d(
            calc(var(--orb-base-x, 50%) - (var(--orb-size, 1.5vmin) / 2)),
            calc(var(--orb-base-y, 50%) - (var(--orb-size, 1.5vmin) / 2)),
            0
        ) scale(var(--orb-scale, 1));
    }
}