.card-spotlight{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);--mouse-x:50%;--mouse-y:50%;--spotlight-color:#ffffff0d;--card-color:#ffffff1a;background:#ffffff09;border:1px solid #ffffff17;border-radius:20px;padding:26px 26px 28px;transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s cubic-bezier(.16,1,.3,1),border-color .4s;position:relative;overflow:hidden}.card-spotlight:hover{border-color:color-mix(in srgb, var(--card-color) 50%, transparent);box-shadow:0 20px 40px -12px color-mix(in srgb, var(--card-color) 40%, transparent), 0 0 60px -10px color-mix(in srgb, var(--card-color) 30%, transparent);transform:translateY(-8px)}.card-spotlight:before{content:"";background:radial-gradient(600px circle at var(--mouse-x) var(--mouse-y), var(--spotlight-color), transparent 40%);opacity:0;pointer-events:none;z-index:0;transition:opacity .5s;position:absolute;inset:0}.card-spotlight:hover:before,.card-spotlight:focus-within:before{opacity:1}@media (prefers-reduced-motion:reduce){.card-spotlight,.card-spotlight:before{transition:none}}