Mask shape sections

Build "Mask shape sections" for my site using the Enrichr Library element at https://enrichr.dev/elements/mask-shape-sections.html.

Read the machine-readable spec and source at https://enrichr.dev/elements/mask-shape-sections.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:
- captions: Circle, Diamond, Band
- image: 
- height: 256
- manual: 0
- colorA: #2f7d5b
- colorB: #c6f26b

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

<div class="ef-mask">
  <div class="ef-mask__item" data-shape="circle"><div class="ef-mask__img"></div><span class="ef-mask__cap"></span></div>
  <div class="ef-mask__item" data-shape="diamond"><div class="ef-mask__img"></div><span class="ef-mask__cap"></span></div>
  <div class="ef-mask__item" data-shape="band"><div class="ef-mask__img"></div><span class="ef-mask__cap"></span></div>
</div>

.ef-mask__item { position: relative; height: var(--ef-h, 16rem); margin: 0 0 1rem; overflow: hidden; }
.ef-mask__img { position: absolute; inset: 0; background-size: cover; background-position: center; background-image: linear-gradient(135deg, var(--ef-a, #2f7d5b), var(--ef-b, #c6f26b)); }
.ef-mask__cap { position: absolute; left: 1rem; bottom: 0.8rem; z-index: 1; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; mix-blend-mode: difference; }
.ef-mask__item[data-shape="circle"] .ef-mask__img { clip-path: circle(calc(var(--p, 1) * 75%) at 50% 50%); }
.ef-mask__item[data-shape="diamond"] .ef-mask__img { clip-path: polygon(50% calc(50% - var(--p, 1) * 60%), calc(50% + var(--p, 1) * 60%) 50%, 50% calc(50% + var(--p, 1) * 60%), calc(50% - var(--p, 1) * 60%) 50%); }
.ef-mask__item[data-shape="band"] .ef-mask__img { clip-path: inset(calc((1 - var(--p, 1)) * 48%) 0); }
@media (prefers-reduced-motion: reduce) { .ef-mask__item .ef-mask__img { clip-path: none !important; } }

// Mask shape sections: the same image is cropped through a different shape in each section (circle, diamond, band),
// and each shape opens as its section scrolls into view. The shape is a CSS clip-path driven by one custom property, --p.
// mount(root, { image (URL or empty for a gradient), captions (comma separated), height (px), manual (0 = follow scroll, 1-100 = fixed %), colorA, colorB })
function mount(root, o) {
  var reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
  var box = root.querySelector(".ef-mask");
  var items = Array.prototype.slice.call(root.querySelectorAll(".ef-mask__item"));
  var opts = {}, raf = 0;

  function safeUrl(u) {
    try { var x = new URL(u, window.location.href); return /^https?:$/.test(x.protocol) ? x.href : ""; } catch (e) { return ""; }
  }
  function render() {
    var caps = opts.captions.split(",").map(function (c) { return c.trim(); });
    var url = opts.image ? safeUrl(opts.image) : "";
    box.style.setProperty("--ef-a", opts.colorA);
    box.style.setProperty("--ef-b", opts.colorB);
    box.style.setProperty("--ef-h", opts.height + "px");
    items.forEach(function (it, i) {
      it.querySelector(".ef-mask__cap").textContent = caps[i] || "";
      it.querySelector(".ef-mask__img").style.backgroundImage = url ? 'url("' + url + '")' : "";
    });
    paint();
  }
  function paint() {
    raf = 0;
    var vh = window.innerHeight || 800;
    items.forEach(function (it) {
      var p = 1;
      if (!reduce) {
        if (opts.manual > 0) p = opts.manual / 100;
        else {
          var r = it.getBoundingClientRect();
          var t = Math.min(1, Math.max(0, (vh * 0.95 - r.top) / (vh * 0.6)));
          p = t * t * (3 - 2 * t);
        }
      }
      it.style.setProperty("--p", p.toFixed(3));
    });
  }
  function schedule() { if (!raf) raf = requestAnimationFrame(paint); }
  function update(next) {
    opts = Object.assign({ image: "", captions: "Circle, Diamond, Band", height: 256, manual: 0, colorA: "#2f7d5b", colorB: "#c6f26b" }, opts, next || {});
    render();
  }
  update(o);
  if (!reduce) {
    window.addEventListener("scroll", schedule, { passive: true });
    window.addEventListener("resize", schedule);
  }
  return { update: update, destroy: function () { cancelAnimationFrame(raf); window.removeEventListener("scroll", schedule); window.removeEventListener("resize", schedule); } };
}

// Usage
var fx = mount(document.querySelector("#my-root"), {"captions":"Circle, Diamond, Band","image":"","height":256,"manual":0,"colorA":"#2f7d5b","colorB":"#c6f26b"});