.spotlight-border-card{--mouse-x:50%;--mouse-y:50%;--edge-proximity:0;--cursor-angle:45deg;--spotlight-color:#ffffff40 0%,#6366f10f 40%,transparent 80%;--edge-sensitivity:25;--border-radius:20px;--glow-padding:30px;--cone-spread:20;border-radius:var(--border-radius);isolation:isolate;background:#fff;border:1px solid #0f172a14;transition:transform .3s cubic-bezier(.22,.61,.36,1),box-shadow .3s cubic-bezier(.22,.61,.36,1),border-color .3s cubic-bezier(.22,.61,.36,1);position:relative;overflow:visible;box-shadow:0 6px 20px #0f172a14}.spotlight-border-card:hover{border-color:#0f172a1f;transform:translateY(-4px);box-shadow:0 14px 40px #0f172a1f}.spotlight-border-card:before{content:"";border-radius:inherit;background:radial-gradient(var(--spotlight-size,600px)circle at var(--mouse-x)var(--mouse-y),var(--spotlight-color));opacity:0;pointer-events:none;z-index:0;transition:opacity .3s cubic-bezier(.22,.61,.36,1);position:absolute;inset:0}.spotlight-border-card:hover:before{opacity:1}.card-content{z-index:1;position:relative}.spotlight-border-card:after{content:"";border-radius:inherit;background:linear-gradient(#fff,#fff)padding-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;-webkit-mask: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: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%));-webkit-mask: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%));opacity:0;pointer-events:none;z-index:2;border:1px solid #0000;transition:opacity .3s cubic-bezier(.22,.61,.36,1);position:absolute;inset:0}.spotlight-border-card:hover:after{opacity:calc((var(--edge-proximity) - var(--edge-sensitivity))/(100 - var(--edge-sensitivity))*.5)}.spotlight-border-card>.edge-light{inset:calc(var(--glow-padding)*-1);border-radius:calc(var(--border-radius) + var(--glow-padding));pointer-events:none;z-index:3;-webkit-mask:conic-gradient(from var(--cursor-angle)at center,black 2.5%,transparent 10%,transparent 90%,black 97.5%);mask:conic-gradient(from var(--cursor-angle)at center,black 2.5%,transparent 10%,transparent 90%,black 97.5%);-webkit-mask:conic-gradient(from var(--cursor-angle)at center,black 2.5%,transparent 10%,transparent 90%,black 97.5%);opacity:0;transition:opacity .3s cubic-bezier(.22,.61,.36,1);position:absolute}.spotlight-border-card:hover>.edge-light{opacity:calc((var(--edge-proximity) - var(--edge-sensitivity))/(100 - var(--edge-sensitivity))*.15)}.spotlight-border-card>.edge-light:before{content:"";inset:var(--glow-padding);border-radius:inherit;box-shadow: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);position:absolute}@media (prefers-reduced-motion:reduce){.spotlight-border-card,.spotlight-border-card:before,.spotlight-border-card:after,.spotlight-border-card>.edge-light{transition:none}.spotlight-border-card:hover{transform:none}}.spotlight-border-card:focus-visible{outline-offset:2px;outline:2px solid #60a5fa}