.cursor-dot,
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
  will-change: transform;
}

.cursor-dot {
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  background: var(--blue-300);
  box-shadow: 0 0 12px 2px var(--glow-strong);
}

.cursor-ring {
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 1px solid var(--blue-400);
  transition: opacity var(--dur-base) var(--ease-out),
              width var(--dur-base) var(--ease-out),
              height var(--dur-base) var(--ease-out),
              margin var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}

html.custom-cursor,
html.custom-cursor body {
  cursor: none;
}

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

html.custom-cursor .cursor-dot,
html.custom-cursor .cursor-ring {
  opacity: 1;
}

html.custom-cursor .cursor-ring.is-hovering {
  width: 50px;
  height: 50px;
  margin: -25px 0 0 -25px;
  border-color: var(--blue-200);
  background: rgba(92, 147, 255, 0.08);
}