Custom Cursor for Squarespace

<script>
(function () {
  /* Skip touch devices entirely: they have no cursor to replace */
  if (window.matchMedia('(pointer: coarse)').matches) return;

  var dot = document.createElement('div');
  var ring = document.createElement('div');
  dot.className = 'cursor-dot';
  ring.className = 'cursor-ring';
  document.body.appendChild(dot);
  document.body.appendChild(ring);
  document.body.classList.add('has-custom-cursor');

  var mouseX = -100, mouseY = -100; /* start off-screen */
  var ringX = -100, ringY = -100;

  document.addEventListener('mousemove', function (e) {
    mouseX = e.clientX;
    mouseY = e.clientY;
    dot.style.transform = 'translate(' + mouseX + 'px, ' + mouseY + 'px)';
  });

  /* The ring trails the dot with a little easing */
  function follow() {
    ringX += (mouseX - ringX) * 0.15;
    ringY += (mouseY - ringY) * 0.15;
    ring.style.transform = 'translate(' + ringX + 'px, ' + ringY + 'px)';
    requestAnimationFrame(follow);
  }
  follow();

  /* Grow the ring over links and buttons */
  document.addEventListener('mouseover', function (e) {
    if (e.target.closest('a, button')) ring.classList.add('is-active');
  });
  document.addEventListener('mouseout', function (e) {
    if (e.target.closest('a, button')) ring.classList.remove('is-active');
  });
})();
</script>

/* Hide the native cursor only while the custom one is running */
body.has-custom-cursor,
body.has-custom-cursor a,
body.has-custom-cursor button {
  cursor: none;
}

.cursor-dot,
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none; /* never block clicks */
  border-radius: 50%;
  z-index: 9999;
}

.cursor-dot {
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  background: #c9974a; /* dot color */
}

.cursor-ring {
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 1.5px solid rgba(201, 151, 74, 0.6); /* ring color */
  transition: width 0.2s ease, height 0.2s ease, margin 0.2s ease;
}

/* Larger ring over links and buttons */
.cursor-ring.is-active {
  width: 52px;
  height: 52px;
  margin: -26px 0 0 -26px;
}