Blend-mode cursor

Build "Blend-mode cursor" for my site using the Enrichr Library element at https://enrichr.dev/elements/blend-mode-cursor.html.

Read the machine-readable spec and source at https://enrichr.dev/elements/blend-mode-cursor.json (markup, CSS, JavaScript, parameters).
Requirements: vanilla JavaScript and CSS, no new dependencies; keep the behaviour of the source unchanged; respect prefers-reduced-motion; work on touch screens; keep it accessible.

Settings:
- title: Move the pointer
- items: Work, About, Contact
- size: 28
- hoverScale: 3
- smoothing: 0.18
- background: #ff5a36
- textColor: #10261f
- dotColor: #ffffff

Verify: reduced motion shows no movement, it works at 375px wide, there are no console errors, and scrolling stays smooth.

<div class="ef-cur">
  <div class="ef-cur__zone">
    <h3 class="ef-cur__t"></h3>
    <ul class="ef-cur__list"></ul>
    <div class="ef-cur__dot" aria-hidden="true"></div>
  </div>
</div>

.ef-cur__zone { position: relative; isolation: isolate; overflow: hidden; min-height: 16rem; padding: 2rem 1.6rem; border-radius: 1rem; display: flex; flex-direction: column; justify-content: center; gap: 1rem; }
.ef-cur__zone.is-on, .ef-cur__zone.is-on a, .ef-cur__zone.is-on button { cursor: none; }
.ef-cur__t { margin: 0; font-size: clamp(1.8rem, 5vw, 3.2rem); font-weight: 800; letter-spacing: -0.02em; }
.ef-cur__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; }
.ef-cur__list a { color: inherit; font-size: 1.1rem; font-weight: 600; text-decoration: none; }
.ef-cur__list a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.ef-cur__dot { position: absolute; left: 0; top: 0; z-index: 2; width: var(--ef-size, 28px); height: var(--ef-size, 28px); border-radius: 50%; background: #fff; mix-blend-mode: difference; pointer-events: none; opacity: 0; transition: opacity 150ms linear; will-change: transform; }
.ef-cur__zone.is-on.is-inside .ef-cur__dot { opacity: 1; }

// Blend-mode cursor: a dot follows the pointer inside an area, inverts whatever is beneath it (mix-blend-mode: difference)
// and grows over links, buttons and anything marked data-cursor. Only used with a fine pointer; touch screens and
// reduced motion keep the normal cursor (reduced motion also removes the lag).
// mount(root, { title, items (comma separated link labels), size (px), hoverScale, smoothing (0.05-1), background, textColor, dotColor })
function mount(root, o) {
  var reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
  var fine = window.matchMedia("(pointer: fine)").matches;
  var zone = root.querySelector(".ef-cur__zone");
  var dot = root.querySelector(".ef-cur__dot");
  var title = root.querySelector(".ef-cur__t");
  var list = root.querySelector(".ef-cur__list");
  var opts = {}, raf = 0, x = 0, y = 0, tx = 0, ty = 0, s = 1, ts = 1;

  function frame() {
    raf = requestAnimationFrame(frame);
    var k = reduce ? 1 : opts.smoothing;
    x += (tx - x) * k;
    y += (ty - y) * k;
    s += (ts - s) * (reduce ? 1 : 0.2);
    dot.style.transform = "translate3d(" + (x - opts.size / 2).toFixed(1) + "px," + (y - opts.size / 2).toFixed(1) + "px,0) scale(" + s.toFixed(3) + ")";
  }
  function move(e) {
    var r = zone.getBoundingClientRect();
    tx = e.clientX - r.left;
    ty = e.clientY - r.top;
    if (!zone.classList.contains("is-inside")) { x = tx; y = ty; zone.classList.add("is-inside"); }
    var hot = e.target && e.target.closest && e.target.closest("a,button,[data-cursor]");
    ts = hot ? opts.hoverScale : 1;
  }
  function leave() { zone.classList.remove("is-inside"); ts = 1; }
  function update(next) {
    opts = Object.assign({ title: "Move the pointer", items: "Work, About, Contact", size: 28, hoverScale: 3, smoothing: 0.18, background: "#ff5a36", textColor: "#10261f", dotColor: "#ffffff" }, opts, next || {});
    zone.style.background = opts.background;
    zone.style.color = opts.textColor;
    zone.style.setProperty("--ef-size", opts.size + "px");
    dot.style.background = opts.dotColor;
    title.textContent = opts.title;
    list.textContent = "";
    opts.items.split(",").map(function (t) { return t.trim(); }).filter(Boolean).forEach(function (t) {
      var li = document.createElement("li");
      var a = document.createElement("a");
      a.href = "#";
      a.textContent = t;
      a.addEventListener("click", function (e) { e.preventDefault(); });
      li.appendChild(a);
      list.appendChild(li);
    });
  }
  update(o);
  if (fine) {
    zone.classList.add("is-on");
    zone.addEventListener("pointermove", move);
    zone.addEventListener("pointerleave", leave);
    raf = requestAnimationFrame(frame);
  }
  return { update: update, destroy: function () { cancelAnimationFrame(raf); zone.removeEventListener("pointermove", move); zone.removeEventListener("pointerleave", leave); } };
}

// Usage
var fx = mount(document.querySelector("#my-root"), {"title":"Move the pointer","items":"Work, About, Contact","size":28,"hoverScale":3,"smoothing":0.18,"background":"#ff5a36","textColor":"#10261f","dotColor":"#ffffff"});