.card-spotlight{position:relative;border-radius:1.5rem;border:1px solid hsl(var(--border));background:linear-gradient(145deg,hsl(var(--card)),hsl(var(--card)/.8));padding:2.5rem;overflow:hidden;--mouse-x:50%;--mouse-y:50%;--spotlight-color:rgba(255,255,255,0.08);backdrop-filter:blur(16px);transition:all .4s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06),inset 0 1px 0 rgba(255,255,255,.1)}.card-spotlight:before{background:radial-gradient(600px circle at var(--mouse-x) var(--mouse-y),var(--spotlight-color),transparent 40%);transition:opacity .6s cubic-bezier(.4,0,.2,1);z-index:1}.card-spotlight:after,.card-spotlight:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;opacity:0;pointer-events:none}.card-spotlight:after{background:radial-gradient(300px circle at var(--mouse-x) var(--mouse-y),rgba(255,255,255,.03),transparent 50%);transition:opacity .4s ease;z-index:2}.card-spotlight>*{position:relative;z-index:3}.card-spotlight:hover{border-color:hsl(var(--primary)/.3);box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 10px 10px -5px rgba(0,0,0,.04),inset 0 1px 0 rgba(255,255,255,.2),0 0 0 1px hsl(var(--primary)/.1)}.card-spotlight:hover:before{opacity:.8}.card-spotlight:hover:after{opacity:1}.card-spotlight:focus-within:after,.card-spotlight:focus-within:before{opacity:.6}@media (hover:hover){.card-spotlight:hover{transform:translateY(-4px)}}@media (max-width:768px){.card-spotlight{padding:2rem}}