Spotlight Border

Create a spotlight border card. Build the card as two layers: an outer wrapper with padding: 1.5px and border-radius 14px whose background acts as the border, and an inner card (background matching the page's card color, border-radius 12.5px) holding the content. On mousemove over the card, set the wrapper's background to radial-gradient(140px circle at Xpx Ypx, <accent color>, <hairline border color> 70%), where X and Y are the cursor position relative to the card. The glow follows the cursor with no transition while moving. On mouse leave, fade the background back to the plain hairline color over 400ms. Disable the effect (keep a static border) when prefers-reduced-motion is enabled, and make sure the inner content never overflows the rounded corners. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.