// Quiet animated background — two large, very slow gradient washes that breathe
// across the page. Reads like ambient light on warm fabric, not particles.
// Pure CSS-keyframe motion driven by JS-injected style for size + cursor parallax.

const BackgroundCanvas = () => {
  const ref = React.useRef(null);

  React.useEffect(() => {
    const root = ref.current;
    if (!root) return;

    // Skip cursor parallax on touch / coarse-pointer devices — on Android the
    // mousemove sim from taps causes the bg layer to jump and flicker.
    const isCoarse = window.matchMedia('(hover: none), (pointer: coarse)').matches;
    if (isCoarse) return;

    // Smooth cursor parallax — very subtle, just a few px of shift.
    let targetX = 0, targetY = 0, x = 0, y = 0;
    let raf;
    const onMove = (e) => {
      const cx = window.innerWidth / 2;
      const cy = window.innerHeight / 2;
      targetX = (e.clientX - cx) / cx;   // -1..1
      targetY = (e.clientY - cy) / cy;
    };
    const tick = () => {
      x += (targetX - x) * 0.025;
      y += (targetY - y) * 0.025;
      root.style.setProperty('--mx', x.toFixed(3));
      root.style.setProperty('--my', y.toFixed(3));
      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    window.addEventListener('mousemove', onMove);

    return () => {
      cancelAnimationFrame(raf);
      window.removeEventListener('mousemove', onMove);
    };
  }, []);

  return React.createElement('div', {
    ref,
    className: 'bg-quiet',
    'aria-hidden': 'true',
  });
};

window.BackgroundCanvas = BackgroundCanvas;