// Cursor-following warm spotlight.
// Use as a wrapper class .spotlight on any container — it tracks the
// pointer and exposes --mx/--my, which the CSS uses for a radial fade.

const useSpotlight = () => {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const onMove = (e) => {
      const r = el.getBoundingClientRect();
      el.style.setProperty('--mx', `${e.clientX - r.left}px`);
      el.style.setProperty('--my', `${e.clientY - r.top}px`);
    };
    el.addEventListener('mousemove', onMove);
    return () => el.removeEventListener('mousemove', onMove);
  }, []);
  return ref;
};

window.useSpotlight = useSpotlight;