.cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9000; mix-blend-mode: difference; }
.cursor-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--mv-lime);
  transform: translate(-50%, -50%);
  transition: width 180ms var(--ease-out-quart), height 180ms var(--ease-out-quart), opacity 180ms;
}
.cursor-ring {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--mv-lime);
  transform: translate(-50%, -50%) scale(0.6);
  opacity: 0;
  transition: transform 200ms var(--ease-out-quart), opacity 200ms var(--ease-out-quart);
}
body.hover-interactive .cursor-ring { transform: translate(-50%, -50%) scale(1); opacity: 0.9; }
body.hover-interactive .cursor-dot { opacity: 0; }
@media (hover: none) { .cursor-dot, .cursor-ring { display: none; } }