// Cursor — liquid-glass logo following the mouse on pointer-fine devices.
function Cursor() {
  const elRef = React.useRef(null);
  React.useEffect(() => {
    if (typeof window === "undefined") return;
    const fine = window.matchMedia("(hover: hover) and (pointer: fine)");
    if (!fine.matches) return;
    const el = elRef.current;
    if (!el) return;

    let mx = window.innerWidth / 2;
    let my = window.innerHeight / 2;
    let raf = 0;
    let visible = false;

    const apply = () => {
      el.style.transform = `translate3d(${mx}px, ${my}px, 0) translate(-50%, -50%)`;
      raf = 0;
    };
    const onMove = (e) => {
      mx = e.clientX;
      my = e.clientY;
      if (!visible) {
        visible = true;
        el.classList.add("is-visible");
      }
      if (!raf) raf = requestAnimationFrame(apply);
    };
    const onLeave = () => {
      visible = false;
      el.classList.remove("is-visible");
    };
    const onEnter = () => {
      // re-show on next move
    };
    const onDown = () => el.classList.add("is-press");
    const onUp = () => el.classList.remove("is-press");
    const onOver = (e) => {
      const t = e.target;
      const interactive = t && (t.closest && t.closest("a, button, [role=button], .hcell, .hero-mark-logo, input, textarea, select, label[for]"));
      el.classList.toggle("is-hot", !!interactive);
    };

    document.documentElement.classList.add("has-logo-cursor");
    window.addEventListener("mousemove", onMove, { passive: true });
    window.addEventListener("mouseover", onOver, { passive: true });
    document.documentElement.addEventListener("mouseleave", onLeave);
    document.documentElement.addEventListener("mouseenter", onEnter);
    window.addEventListener("mousedown", onDown);
    window.addEventListener("mouseup", onUp);

    return () => {
      document.documentElement.classList.remove("has-logo-cursor");
      window.removeEventListener("mousemove", onMove);
      window.removeEventListener("mouseover", onOver);
      document.documentElement.removeEventListener("mouseleave", onLeave);
      document.documentElement.removeEventListener("mouseenter", onEnter);
      window.removeEventListener("mousedown", onDown);
      window.removeEventListener("mouseup", onUp);
      if (raf) cancelAnimationFrame(raf);
    };
  }, []);
  return <div ref={elRef} className="cursor-logo" aria-hidden="true"></div>;
}
window.Cursor = Cursor;