.circuit-bg {
    --circuit-rgb-a: 7 215 255;
    --circuit-rgb-b: 104 255 239;
    --circuit-bg-rgb: 1 5 12;
    --circuit-overflow: 12%;
    --circuit-grid-size: clamp(30px, 4vw, 58px);
    --circuit-plane-height: 94%;
    --circuit-plane-bottom: -8%;
    --circuit-plane-tilt: 56deg;
    --circuit-perspective: 860px;
    --circuit-grid-opacity: 0.32;
    --circuit-grid-soft-opacity: 0.18;
    --circuit-sky-opacity: 0.72;
    --circuit-z-index: 0;
    position: relative;
    isolation: isolate;
}

.circuit-bg > :not(.circuit-bg__scene) {
    position: relative;
    z-index: calc(var(--circuit-z-index) + 1);
}

.circuit-bg__scene {
    position: absolute;
    inset: calc(var(--circuit-overflow) * -1);
    z-index: var(--circuit-z-index);
    pointer-events: none;
    overflow: hidden;
    border-radius: inherit;
    contain: layout paint style;
    background:
        linear-gradient(180deg,
            rgb(var(--circuit-bg-rgb) / 0) 0%,
            rgb(var(--circuit-bg-rgb) / 0.12) 44%,
            rgb(var(--circuit-bg-rgb) / 0.5) 100%);
}

.circuit-bg__scene::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 50% 54%,
            rgb(var(--circuit-rgb-a) / 0.12) 0%,
            rgb(var(--circuit-rgb-a) / 0.05) 28%,
            transparent 62%),
        linear-gradient(180deg,
            rgb(0 0 0 / 0.68) 0%,
            transparent 42%,
            rgb(0 0 0 / 0.34) 100%);
}

.circuit-bg__scene::after {
    content: "";
    position: absolute;
    left: 4%;
    right: 4%;
    top: 46%;
    height: 20%;
    background: radial-gradient(ellipse at center,
        rgb(var(--circuit-rgb-a) / 0.16) 0%,
        rgb(var(--circuit-rgb-b) / 0.06) 34%,
        transparent 72%);
    filter: blur(16px);
    opacity: 0.8;
}

.circuit-bg__plane {
    position: absolute;
    left: -12%;
    right: -12%;
    bottom: var(--circuit-plane-bottom);
    height: var(--circuit-plane-height);
    transform: perspective(var(--circuit-perspective)) rotateX(var(--circuit-plane-tilt));
    transform-origin: 50% 100%;
    background-image:
        linear-gradient(90deg, rgb(var(--circuit-rgb-a) / var(--circuit-grid-opacity)) 1px, transparent 1px),
        linear-gradient(180deg, rgb(var(--circuit-rgb-a) / var(--circuit-grid-soft-opacity)) 1px, transparent 1px),
        radial-gradient(ellipse at 50% 16%,
            rgb(var(--circuit-rgb-b) / 0.14) 0%,
            rgb(var(--circuit-rgb-a) / 0.08) 34%,
            transparent 70%);
    background-size:
        var(--circuit-grid-size) var(--circuit-grid-size),
        var(--circuit-grid-size) var(--circuit-grid-size),
        100% 100%;
    -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 14%, #000 74%, transparent 100%);
    mask-image: linear-gradient(to top, transparent 0%, #000 14%, #000 74%, transparent 100%);
}

.circuit-bg__trace,
.circuit-bg__node,
.circuit-bg__burst {
    position: absolute;
    display: block;
    mix-blend-mode: screen;
}

.circuit-bg__trace {
    left: var(--x);
    top: var(--y);
    width: var(--len);
    height: var(--thick);
    border-radius: 999px;
    opacity: var(--alpha);
    transform: rotate(var(--rot));
    transform-origin: 0 50%;
    background: linear-gradient(90deg,
        transparent 0%,
        rgb(var(--rgb) / 0.42) 10%,
        rgb(var(--rgb) / 0.98) 52%,
        rgb(var(--rgb) / 0.38) 88%,
        transparent 100%);
    box-shadow:
        0 0 calc(var(--thick) * 3) rgb(var(--rgb) / 0.55),
        0 0 var(--glow) rgb(var(--rgb) / 0.26);
}

.circuit-bg__trace::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: clamp(8px, 18%, 34px);
    height: calc(var(--thick) * 2.2);
    border-radius: inherit;
    transform: translateY(-50%);
    background: rgb(var(--rgb) / 0.92);
    box-shadow: 0 0 18px rgb(var(--rgb) / 0.72);
    opacity: var(--tip-alpha);
}

.circuit-bg__node {
    left: var(--x);
    top: var(--y);
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    opacity: var(--alpha);
    transform: translate(-50%, -50%);
    background: rgb(var(--rgb) / 0.98);
    box-shadow:
        0 0 8px rgb(var(--rgb) / 0.9),
        0 0 var(--glow) rgb(var(--rgb) / 0.44);
}

.circuit-bg__node::after {
    content: "";
    position: absolute;
    inset: -5px;
    border: 1px solid rgb(var(--rgb) / 0.18);
    border-radius: inherit;
}

.circuit-bg__burst {
    left: var(--x);
    top: var(--y);
    width: var(--w);
    height: var(--h);
    border-radius: 999px;
    opacity: var(--alpha);
    transform: translate(-50%, -50%) rotate(var(--rot));
    background: linear-gradient(90deg,
        transparent 0%,
        rgb(var(--rgb) / 0.42) 16%,
        rgb(var(--rgb) / 1) 50%,
        rgb(var(--rgb) / 0.42) 84%,
        transparent 100%);
    box-shadow:
        0 0 16px rgb(var(--rgb) / 0.74),
        0 0 34px rgb(var(--rgb) / 0.36);
}

.circuit-bg__spark {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    opacity: var(--alpha);
    background: rgb(var(--rgb) / 0.92);
    box-shadow:
        0 0 6px rgb(var(--rgb) / 0.74),
        0 0 var(--glow) rgb(var(--rgb) / 0.28);
}

.circuit-bg[data-circuit-animated="true"] .circuit-bg__trace,
.circuit-bg[data-circuit-animated="true"] .circuit-bg__node,
.circuit-bg[data-circuit-animated="true"] .circuit-bg__burst,
.circuit-bg[data-circuit-animated="true"] .circuit-bg__spark {
    animation: circuit-bg-pulse var(--dur, 5s) ease-in-out infinite;
    animation-delay: var(--delay, 0s);
}

@keyframes circuit-bg-pulse {
    0%, 100% {
        opacity: var(--alpha);
        filter: brightness(1);
    }
    50% {
        opacity: var(--alpha-high);
        filter: brightness(1.18);
    }
}

@media (prefers-reduced-motion: reduce) {
    .circuit-bg[data-circuit-animated="true"] .circuit-bg__trace,
    .circuit-bg[data-circuit-animated="true"] .circuit-bg__node,
    .circuit-bg[data-circuit-animated="true"] .circuit-bg__burst,
    .circuit-bg[data-circuit-animated="true"] .circuit-bg__spark {
        animation: none;
    }
}