.card-spotlight{--mouse-x:50%;--mouse-y:50%;--spotlight-color:#0f6b4f1a;border:1px solid var(--hairline);background-color:var(--color-paper-raised);transition:border-color .4s var(--ease-out-quint),box-shadow .4s var(--ease-out-quint),transform .4s var(--ease-out-quint);border-radius:1rem;position:relative;overflow:hidden;box-shadow:0 1px 2px #1418150a,0 8px 24px -12px #1418151f}.card-spotlight:hover,.card-spotlight:focus-within{border-color:#0f6b4f38;transform:translateY(-3px);box-shadow:0 2px 4px #1418150d,0 20px 48px -20px #1418152e}.card-spotlight:before{content:"";z-index:0;pointer-events:none;background:radial-gradient(circle at var(--mouse-x)var(--mouse-y),var(--spotlight-color),transparent 72%);opacity:0;transition:opacity .5s;position:absolute;inset:0}.card-spotlight:hover:before,.card-spotlight:focus-within:before{opacity:1}.card-spotlight:after{content:"";z-index:1;pointer-events:none;background:linear-gradient(to right,var(--color-emerald),var(--color-gold));width:100%;height:1px;transform-origin:inline-start center;transition:transform .55s var(--ease-out-quint);position:absolute;inset-block-end:0;inset-inline-start:0;transform:scaleX(0)}.card-spotlight:hover:after,.card-spotlight:focus-within:after{transform:scaleX(1)}.card-spotlight>*{z-index:2;position:relative}@media (prefers-reduced-motion:reduce){.card-spotlight,.card-spotlight:hover,.card-spotlight:focus-within{transform:none}.card-spotlight:before,.card-spotlight:after{display:none}}