body {
  cursor: none;
}

.custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 32px;
  height: 32px;
  border: 1px solid #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 999999;
  mix-blend-mode: difference;
  will-change: transform, left, top, width, height;
  transition:
    width 0.25s ease,
    height 0.25s ease,
    transform 0.12s ease,
    opacity 0.2s ease;
}

.custom-cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 8px;
  height: 8px;
  background: #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 999999;
  mix-blend-mode: difference;
  will-change: transform, left, top, width, height;
  transition:
    width 0.12s ease,
    height 0.12s ease,
    transform 0.12s ease,
    opacity 0.2s ease;
}

.cursor-hover .custom-cursor {
  width: 56px;
  height: 56px;
}

.cursor-click .custom-cursor {
  width: 20px;
  height: 20px;
}

.cursor-click .custom-cursor-dot {
  width: 14px;
  height: 14px;
}

.cursor-label {
  position: fixed;
  top: 0;
  left: 0;
  padding: 6px 10px;
  font-size: 12px;
  line-height: 1;
  color: #fff;
  background: #000;
  border-radius: 20px;
  transform: translate(24px, -32px);
  pointer-events: none;
  z-index: 999999;
  opacity: 0;
  will-change: left, top, opacity;
  transition: opacity 0.2s ease;
}

/* чтобы курсор не мешал в полях ввода */
input,
textarea,
select,
[contenteditable="true"] {
  cursor: text !important;
}

/* отключение на планшете и мобилке */
@media (max-width: 1024px) {
  body {
    cursor: auto;
  }

  .custom-cursor,
  .custom-cursor-dot,
  .cursor-label {
    display: none !important;
  }
}