/* ── BorderGlow Component (adapted from ReactBits) ── */ .border-glow-card { --edge-proximity: 0; --cursor-angle: 45deg; --edge-sensitivity: 30; --color-sensitivity: calc(var(--edge-sensitivity) + 20); --border-radius: 24px; --glow-padding: 40px; --cone-spread: 25; --fill-opacity: 0.4; position: relative; border-radius: var(--border-radius); isolation: isolate; 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: -1; } .border-glow-card:not(:hover)::before, .border-glow-card:not(:hover)::after, .border-glow-card:not(:hover) > .edge-light { opacity: 0 !important; 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, rgba(5,20,36,0.9)) 0 100%) padding-box, linear-gradient(rgb(255 255 255 / 0%) 0% 100%) border-box, var(--gradient-one, radial-gradient(at 80% 55%, #c084fc 0px, transparent 50%)) border-box, var(--gradient-two, radial-gradient(at 69% 34%, #2fd9f4 0px, transparent 50%)) border-box, var(--gradient-three, radial-gradient(at 8% 6%, #ddb7ff 0px, transparent 50%)) border-box, var(--gradient-four, radial-gradient(at 41% 38%, #c084fc 0px, transparent 50%)) border-box, var(--gradient-five, radial-gradient(at 86% 85%, #2fd9f4 0px, transparent 50%)) border-box, var(--gradient-six, radial-gradient(at 82% 18%, #ddb7ff 0px, transparent 50%)) border-box, var(--gradient-seven, radial-gradient(at 51% 4%, #2fd9f4 0px, transparent 50%)) border-box, var(--gradient-base, linear-gradient(#c084fc 0 100%)) border-box; opacity: calc((var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity))); -webkit-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%) ); 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%) ); } /* ── gradient fill near hovered edge ── */ .border-glow-card::after { background: var(--gradient-one, radial-gradient(at 80% 55%, #c084fc 0px, transparent 50%)) padding-box, var(--gradient-two, radial-gradient(at 69% 34%, #2fd9f4 0px, transparent 50%)) padding-box, var(--gradient-three, radial-gradient(at 8% 6%, #ddb7ff 0px, transparent 50%)) padding-box, var(--gradient-four, radial-gradient(at 41% 38%, #c084fc 0px, transparent 50%)) padding-box, var(--gradient-five, radial-gradient(at 86% 85%, #2fd9f4 0px, transparent 50%)) padding-box, var(--gradient-six, radial-gradient(at 82% 18%, #ddb7ff 0px, transparent 50%)) padding-box, var(--gradient-seven, radial-gradient(at 51% 4%, #2fd9f4 0px, transparent 50%)) padding-box, var(--gradient-base, linear-gradient(#c084fc 0 100%)) padding-box; -webkit-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-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%); -webkit-mask-composite: destination-out, source-over, source-over, source-over, source-over, source-over; mask-composite: subtract, add, add, add, add, add; opacity: calc(var(--fill-opacity, 0.4) * (var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity))); mix-blend-mode: soft-light; } /* ── outer / inner glow ring ── */ .border-glow-card > .edge-light { inset: calc(var(--glow-padding) * -1); z-index: 1; -webkit-mask-image: conic-gradient( from var(--cursor-angle) at center, black 2.5%, transparent 10%, transparent 90%, black 97.5% ); 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, hsl(186deg 90% 57% / 100%)), inset 0 0 1px 0 var(--glow-color-60, hsl(186deg 90% 57% / 60%)), inset 0 0 3px 0 var(--glow-color-50, hsl(186deg 90% 57% / 50%)), inset 0 0 6px 0 var(--glow-color-40, hsl(186deg 90% 57% / 40%)), inset 0 0 15px 0 var(--glow-color-30, hsl(186deg 90% 57% / 30%)), inset 0 0 25px 2px var(--glow-color-20, hsl(186deg 90% 57% / 20%)), inset 0 0 50px 2px var(--glow-color-10, hsl(186deg 90% 57% / 10%)), 0 0 1px 0 var(--glow-color-60, hsl(186deg 90% 57% / 60%)), 0 0 3px 0 var(--glow-color-50, hsl(186deg 90% 57% / 50%)), 0 0 6px 0 var(--glow-color-40, hsl(186deg 90% 57% / 40%)), 0 0 15px 0 var(--glow-color-30, hsl(186deg 90% 57% / 30%)), 0 0 25px 2px var(--glow-color-20, hsl(186deg 90% 57% / 20%)), 0 0 50px 2px var(--glow-color-10, hsl(186deg 90% 57% / 10%)); }