.custom-cursor {
  --cursor-scale: 1;
  position: fixed;
  z-index: 2147483647;
  top: 0;
  left: 0;
  width: 14px;
  height: 14px;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: difference;
  transform: translate3d(-40px, -40px, 0) translate(-50%, -50%);
  transition: opacity 140ms ease;
  will-change: transform;
}

.custom-cursor__circle {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #fff;
  transform: scale(var(--cursor-scale));
  transition: transform 180ms cubic-bezier(.22, .72, .24, 1);
  will-change: transform;
}

.custom-cursor.is-visible { opacity: 1; }
.custom-cursor.is-interactive { --cursor-scale: 2.45; }
.custom-cursor.is-down { --cursor-scale: .76; }
.custom-cursor.is-interactive.is-down { --cursor-scale: 1.92; }

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html.custom-cursor-active,
  html.custom-cursor-active * {
    cursor: none !important;
  }
}

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .custom-cursor { display: none !important; }
}