.border-glow-card {
    --edge-proximity: 0;
    --cursor-angle: 45deg;
    --edge-sensitivity: 30;
    --color-sensitivity: min(calc(var(--edge-sensitivity) + 20), 95);
    --border-radius: 12px;
    --glow-padding: 28px;
    --cone-spread: 25;
    --fill-opacity: 0.35;
    --cursor-x: 50%;
    --cursor-y: 50%;

    position: relative;
    border-radius: var(--border-radius);
    isolation: isolate;
    overflow: visible;
    transform: translate3d(0, 0, 0.01px);
}

.border-glow-card::before,
.border-glow-card::after,
.border-glow-card>.edge-light {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    transition: opacity 0.25s ease-out;
    z-index: 0;
}

.border-glow-card:not(:hover):not(.sweep-active)::before,
.border-glow-card:not(:hover):not(.sweep-active)::after,
.border-glow-card:not(:hover):not(.sweep-active)>.edge-light {
    opacity: 0;
    transition: opacity 0.75s ease-in-out;
}

.border-glow-card::before {
    display: none;
    border: 1px solid transparent;
    background:
        linear-gradient(var(--card-bg, #120f17) 0 100%) padding-box,
        linear-gradient(rgb(255 255 255 / 0%) 0% 100%) border-box,
        var(--gradient-one, radial-gradient(at 80% 55%, #a873ff 0px, transparent 50%)) border-box,
        var(--gradient-two, radial-gradient(at 69% 34%, #7c3aed 0px, transparent 50%)) border-box,
        var(--gradient-three, radial-gradient(at 8% 6%, #c084fc 0px, transparent 50%)) border-box,
        var(--gradient-four, radial-gradient(at 41% 38%, #a873ff 0px, transparent 50%)) border-box,
        var(--gradient-five, radial-gradient(at 86% 85%, #7c3aed 0px, transparent 50%)) border-box,
        var(--gradient-six, radial-gradient(at 82% 18%, #c084fc 0px, transparent 50%)) border-box,
        var(--gradient-seven, radial-gradient(at 51% 4%, #7c3aed 0px, transparent 50%)) border-box,
        var(--gradient-base, linear-gradient(#a873ff 0 100%)) border-box;

    opacity: calc((var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));

    mask-image:
        conic-gradient(from var(--cursor-angle) at center,
            black calc(var(--cone-spread) * 1%),
            transparent calc((var(--cone-spread) + 15) * 1%),
            transparent calc((100 - var(--cone-spread) - 15) * 1%),
            black calc((100 - var(--cone-spread)) * 1%));
}

.border-glow-card::after {
    display: none;
    border: 1px solid transparent;
    background:
        var(--gradient-one, radial-gradient(at 80% 55%, #a873ff 0px, transparent 50%)) padding-box,
        var(--gradient-two, radial-gradient(at 69% 34%, #7c3aed 0px, transparent 50%)) padding-box,
        var(--gradient-three, radial-gradient(at 8% 6%, #c084fc 0px, transparent 50%)) padding-box,
        var(--gradient-four, radial-gradient(at 41% 38%, #a873ff 0px, transparent 50%)) padding-box,
        var(--gradient-five, radial-gradient(at 86% 85%, #7c3aed 0px, transparent 50%)) padding-box,
        var(--gradient-six, radial-gradient(at 82% 18%, #c084fc 0px, transparent 50%)) padding-box,
        var(--gradient-seven, radial-gradient(at 51% 4%, #7c3aed 0px, transparent 50%)) padding-box,
        var(--gradient-base, linear-gradient(#a873ff 0 100%)) padding-box;

    mask-image:
        linear-gradient(to bottom, black, black),
        radial-gradient(ellipse at 50% 50%, black 40%, transparent 65%),
        radial-gradient(ellipse at 66% 66%, black 5%, transparent 40%),
        radial-gradient(ellipse at 33% 33%, black 5%, transparent 40%),
        radial-gradient(ellipse at 66% 33%, black 5%, transparent 40%),
        radial-gradient(ellipse at 33% 66%, black 5%, transparent 40%),
        conic-gradient(from var(--cursor-angle) at center, transparent 5%, black 15%, black 85%, transparent 95%);

    mask-composite: subtract, add, add, add, add, add;
    opacity: calc(var(--fill-opacity, 0.35) * (var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));
    mix-blend-mode: soft-light;
}

.border-glow-card>.edge-light {
    padding: 1px;
    background: radial-gradient(76px circle at var(--cursor-x) var(--cursor-y),
            var(--glow-color, hsl(264deg 100% 72% / 100%)) 0%,
            var(--glow-color-50, hsl(264deg 100% 72% / 50%)) 36%,
            transparent 68%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    opacity: calc((var(--edge-proximity) - var(--edge-sensitivity)) / (100 - var(--edge-sensitivity)));
    mix-blend-mode: plus-lighter;
}

.border-glow-card:hover>.edge-light,
.border-glow-card.sweep-active>.edge-light {
    opacity: 1;
}

.border-glow-card>.edge-light::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(92px circle at var(--cursor-x) var(--cursor-y),
            var(--glow-color-30, hsl(264deg 100% 72% / 30%)) 0%,
            transparent 64%);
}

.border-glow-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    min-height: 0;
    display: inherit;
    flex-direction: inherit;
    flex-wrap: inherit;
    justify-content: inherit;
    align-items: inherit;
    gap: inherit;
    overflow: visible;
}

@media (prefers-reduced-motion: reduce) {
    .border-glow-card::before,
    .border-glow-card::after,
    .border-glow-card>.edge-light {
        transition: none;
    }
}