.card-spotlight{--mouse-x:50%;--mouse-y:50%;--spotlight-color:#ffffff0d;border-radius:1.5rem;position:relative;overflow:hidden}.card-spotlight:before{content:"";background:radial-gradient(circle at var(--mouse-x)var(--mouse-y),var(--spotlight-color),transparent 80%);opacity:0;pointer-events:none;z-index:10;transition:opacity .5s;position:absolute;inset:0}.card-spotlight:hover:before,.card-spotlight:focus-within:before{opacity:1}.card-spotlight:after{content:"";border-radius:inherit;background:radial-gradient(circle at var(--mouse-x)var(--mouse-y),#ffffff80,transparent 35%);-webkit-mask-composite:xor;pointer-events:none;z-index:20;opacity:0;padding:1.5px;transition:opacity .5s;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);-webkit-mask-position:0 0,0 0;mask-position:0 0,0 0;-webkit-mask-size:auto,auto;mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.card-spotlight:hover:after{opacity:1}