/* ============================================
   BORDER GLOW — Ported from ReactBits
   Cursor-following edge glow effect
   ============================================ */

.border-glow-card {
    --edge-proximity: 0;
    --cursor-angle: 45deg;
    --edge-sensitivity: 30;
    --color-sensitivity: calc(var(--edge-sensitivity) + 20);
    --border-radius: 24px;
    --glow-padding: 30px;
    --cone-spread: 25;
    --card-bg: #111111;
    --fill-opacity: 0.3;

    /* Glow color vars (white/cool tones for our design) */
    --glow-color: hsl(220deg 20% 90% / 100%);
    --glow-color-60: hsl(220deg 20% 90% / 60%);
    --glow-color-50: hsl(220deg 20% 90% / 50%);
    --glow-color-40: hsl(220deg 20% 90% / 40%);
    --glow-color-30: hsl(220deg 20% 90% / 30%);
    --glow-color-20: hsl(220deg 20% 90% / 20%);
    --glow-color-10: hsl(220deg 20% 90% / 10%);

    /* Gradient vars */
    --gradient-one: radial-gradient(at 80% 55%, rgba(255,255,255,0.15) 0px, transparent 50%);
    --gradient-two: radial-gradient(at 69% 34%, rgba(200,200,255,0.12) 0px, transparent 50%);
    --gradient-three: radial-gradient(at 8% 6%, rgba(180,220,255,0.1) 0px, transparent 50%);
    --gradient-four: radial-gradient(at 41% 38%, rgba(255,255,255,0.08) 0px, transparent 50%);
    --gradient-five: radial-gradient(at 86% 85%, rgba(200,220,255,0.1) 0px, transparent 50%);
    --gradient-six: radial-gradient(at 82% 18%, rgba(255,255,240,0.08) 0px, transparent 50%);
    --gradient-seven: radial-gradient(at 51% 4%, rgba(220,220,255,0.1) 0px, transparent 50%);
    --gradient-base: linear-gradient(rgba(255,255,255,0.05) 0 100%);

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

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

.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;
}

/* Colored mesh-gradient border */
.border-glow-card::before {
    border: 1px solid transparent;
    background:
        linear-gradient(var(--card-bg) 0 100%) padding-box,
        linear-gradient(rgb(255 255 255 / 0%) 0% 100%) border-box,
        var(--gradient-one) border-box,
        var(--gradient-two) border-box,
        var(--gradient-three) border-box,
        var(--gradient-four) border-box,
        var(--gradient-five) border-box,
        var(--gradient-six) border-box,
        var(--gradient-seven) border-box,
        var(--gradient-base) 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%)
        );
}

/* Colored mesh-gradient background fill */
.border-glow-card::after {
    border: 1px solid transparent;
    background:
        var(--gradient-one) padding-box,
        var(--gradient-two) padding-box,
        var(--gradient-three) padding-box,
        var(--gradient-four) padding-box,
        var(--gradient-five) padding-box,
        var(--gradient-six) padding-box,
        var(--gradient-seven) padding-box,
        var(--gradient-base) 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) * (var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));
    mix-blend-mode: soft-light;
}

/* Outer glow */
.border-glow-card > .edge-light {
    inset: calc(var(--glow-padding) * -1);
    z-index: 1;

    mask-image:
        conic-gradient(
            from var(--cursor-angle) at center,
            black 2.5%, transparent 10%, transparent 90%, black 97.5%
        );

    opacity: calc((var(--edge-proximity) - var(--edge-sensitivity)) / (100 - var(--edge-sensitivity)));
    mix-blend-mode: plus-lighter;
}

.border-glow-card > .edge-light::before {
    content: "";
    position: absolute;
    inset: var(--glow-padding);
    border-radius: inherit;
    box-shadow:
        inset 0 0 0 1px var(--glow-color),
        inset 0 0 1px 0 var(--glow-color-60),
        inset 0 0 3px 0 var(--glow-color-50),
        inset 0 0 6px 0 var(--glow-color-40),
        inset 0 0 15px 0 var(--glow-color-30),
        inset 0 0 25px 2px var(--glow-color-20),
        inset 0 0 50px 2px var(--glow-color-10),
        0 0 1px 0 var(--glow-color-60),
        0 0 3px 0 var(--glow-color-50),
        0 0 6px 0 var(--glow-color-40),
        0 0 15px 0 var(--glow-color-30),
        0 0 25px 2px var(--glow-color-20),
        0 0 50px 2px var(--glow-color-10);
}

.border-glow-inner {
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: auto;
    z-index: 1;
}