body.has-custom-cursor,
body.has-custom-cursor a,
body.has-custom-cursor button {
  cursor: none;
}

.cursor {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  pointer-events: none;
  mix-blend-mode: difference;
}

.cursor__ring {
  position: absolute;
  width: 1.5rem;
  height: 1.5rem;
  margin: -0.75rem 0 0 -0.75rem;
  border: 1px solid #fff;
  border-radius: 50%;
  opacity: 0.85;
  transition:
    width 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    height 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    margin 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.25s ease,
    border-width 0.25s ease;
}

.cursor__dot {
  position: absolute;
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  background: #fff;
  border-radius: 50%;
  transition:
    transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.2s ease;
}

.cursor--hover .cursor__ring {
  width: 2.75rem;
  height: 2.75rem;
  margin: -1.375rem 0 0 -1.375rem;
  opacity: 1;
  border-width: 1.5px;
}

.cursor--hover .cursor__dot {
  transform: scale(0.5);
}

.cursor--press .cursor__ring {
  width: 1.125rem;
  height: 1.125rem;
  margin: -0.5625rem 0 0 -0.5625rem;
  opacity: 0.65;
}

.cursor--press .cursor__dot {
  transform: scale(1.6);
}

.cursor--grab .cursor__ring {
  width: 2rem;
  height: 2rem;
  margin: -1rem 0 0 -1rem;
  border-radius: 4px;
  transform: rotate(12deg);
}

.cursor--wave .cursor__ring {
  width: 2.25rem;
  height: 1.125rem;
  margin: -0.5625rem 0 0 -1.125rem;
  border-radius: 2px;
}

.cursor--hidden {
  opacity: 0;
}

@media (hover: none), (pointer: coarse) {
  body.has-custom-cursor,
  body.has-custom-cursor a,
  body.has-custom-cursor button {
    cursor: auto;
  }

  .cursor {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cursor__ring,
  .cursor__dot {
    transition: none;
  }
}