Act as a senior front-end engineer with a motion design eye. Add a cursor spotlight to the card grid on {{page_or_feature}} in my {{tech_stack}} project. Accent color: {{brand_colors}}. Read the card component and styles first. What moves and why: a soft glow follows the pointer, so people sense which card they're about to pick. Use it on one grid of clickable cards, not across the site. Build: - One pointermove listener on the grid, not one per card, throttled with requestAnimationFrame - Each card holds a pre-rendered radial glow, about 300px across, at 8 to 12% opacity of the accent, in a layer clipped to the card - Move the glow with transform translate, from the pointer position relative to each card; don't repaint gradients every frame - The card border brightens under the glow, using the same layer masked to the border - The glow fades in over 200ms ease-out on enter and out over 300ms on leave Fallbacks: - Only on devices with hover and a fine pointer; on touch, cards get a plain pressed state - Keyboard focus: the focused card shows a static centered glow plus a visible focus ring - Under prefers-reduced-motion: reduce, no following: hover shows the static centered glow instead Rules: - Text contrast stays at least 4.5:1 with the glow at full strength; test the worst spot - Only transform and opacity animate, so there's no layout shift - Cards stay real links or buttons with one clear click target Performance budget: no work while the pointer is outside the grid, 60fps on a mid-range laptop with 4x CPU throttling, and Interaction to Next Paint unchanged. Avoid: glow on cards you can't click, rainbow gradients, and the spotlight on every section. Finish with the files changed and a short note on where it should not be used.