AW-Flow — Custom CursorAW-Flow — Custom Cursor

<!-- AW-Flow — Custom Cursor · код для всего сайта, префикс классов: awf-custom-cursor -->
<style>
.awf-custom-cursor-dot, .awf-custom-cursor-ring {
  --awf-dot: 8px;
  --awf-ring: 38px;
  --awf-color: #7c5cff;
  --awf-smoothing: 0.16;
  --awf-hover-scale: 1.8;
}
.awf-custom-cursor-dot,
.awf-custom-cursor-ring {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 2147483647;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.awf-custom-cursor-dot {
  width: var(--awf-dot);
  height: var(--awf-dot);
  margin: calc(var(--awf-dot) / -2) 0 0 calc(var(--awf-dot) / -2);
  border-radius: 50%;
  background: var(--awf-color);
}
.awf-custom-cursor-ring {
  width: var(--awf-ring);
  height: var(--awf-ring);
  margin: calc(var(--awf-ring) / -2) 0 0 calc(var(--awf-ring) / -2);
}
.awf-custom-cursor-ring i {
  display: block;
  width: 100%;
  height: 100%;
  border: 1.5px solid var(--awf-color);
  border-radius: 50%;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.awf-custom-cursor-ring.awf-hover i { transform: scale(var(--awf-hover-scale)); opacity: 0.6; }
.awf-custom-cursor-dot.awf-show,
.awf-custom-cursor-ring.awf-show { opacity: 1; }
html.awf-custom-cursor-on,
html.awf-custom-cursor-on * { cursor: none !important; }
</style>
<script>
(function () {
  var CLS = 'awf-custom-cursor';
  // только для мыши: на телефонах и планшетах курсор не нужен
  if (!window.matchMedia || !matchMedia('(hover: hover) and (pointer: fine)').matches) return;
  var reduce = matchMedia('(prefers-reduced-motion: reduce)').matches;
  // над этими элементами кольцо увеличивается; свой элемент — класс awf-custom-cursor-hover
  var HOVER = 'a, button, input, select, textarea, label, [role="button"], .t-btn, .t-submit, .' + CLS + '-hover';
  function init() {
    var dot = document.createElement('div'), ring = document.createElement('div');
    dot.className = CLS + '-dot';
    ring.className = CLS + '-ring';
    ring.appendChild(document.createElement('i'));
    document.body.appendChild(dot);
    document.body.appendChild(ring);
    document.documentElement.classList.add(CLS + '-on');
    var k = parseFloat(getComputedStyle(ring).getPropertyValue('--awf-smoothing')) || 0.16;
    var x = -100, y = -100, rx = x, ry = y;
    document.addEventListener('mousemove', function (e) {
      x = e.clientX; y = e.clientY;
      dot.style.transform = 'translate3d(' + x + 'px,' + y + 'px,0)';
      dot.classList.add('awf-show');
      ring.classList.add('awf-show');
      var t = e.target && e.target.closest ? e.target.closest(HOVER) : null;
      ring.classList.toggle('awf-hover', !!t);
    });
    document.documentElement.addEventListener('mouseleave', function () {
      dot.classList.remove('awf-show');
      ring.classList.remove('awf-show');
    });
    (function loop() {
      rx += (x - rx) * (reduce ? 1 : k);
      ry += (y - ry) * (reduce ? 1 : k);
      ring.style.transform = 'translate3d(' + rx.toFixed(2) + 'px,' + ry.toFixed(2) + 'px,0)';
      requestAnimationFrame(loop);
    })();
  }
  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init);
  else init();
})();
</script>