.esc-cursor {
  --esc-cursor-primary: #9461ff;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2147483646;
  width: 1px;
  height: 1px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 180ms ease;
  will-change: transform;
}

.esc-cursor.is-visible {
  opacity: 1;
}

.esc-cursor-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--esc-cursor-primary) 7%, transparent);
  box-shadow:
    0 0 24px color-mix(in srgb, var(--esc-cursor-primary) 25%, transparent),
    inset 0 0 14px color-mix(in srgb, var(--esc-cursor-primary) 14%, transparent);
  transform: translate(-50%, -50%);
  transition:
    width 180ms ease,
    height 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease,
    transform 100ms ease;
}

.esc-cursor-ring::before,
.esc-cursor-ring::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.esc-cursor-ring::before {
  inset: 0;
  padding: 1px;
  background: conic-gradient(
    from 45deg,
    var(--esc-cursor-primary),
    color-mix(in srgb, var(--esc-cursor-primary) 62%, white),
    var(--esc-cursor-primary)
  );
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0.82;
  transition: opacity 180ms ease, transform 220ms ease;
}

.esc-cursor-ring::after {
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  background: color-mix(in srgb, var(--esc-cursor-primary) 68%, white);
  box-shadow: 0 0 9px var(--esc-cursor-primary);
  transform: translate(-50%, -50%);
  transition: transform 180ms ease, background-color 180ms ease;
}

.esc-cursor.is-interactive .esc-cursor-ring {
  width: 48px;
  height: 48px;
  background: color-mix(in srgb, var(--esc-cursor-primary) 13%, transparent);
  box-shadow:
    0 0 30px color-mix(in srgb, var(--esc-cursor-primary) 35%, transparent),
    inset 0 0 18px color-mix(in srgb, var(--esc-cursor-primary) 20%, transparent);
}

.esc-cursor.is-interactive .esc-cursor-ring::before {
  opacity: 1;
  transform: rotate(90deg);
}

.esc-cursor.is-interactive .esc-cursor-ring::after {
  background: var(--esc-cursor-primary);
  transform: translate(-50%, -50%) scale(1.45);
}

.esc-cursor.is-pressed .esc-cursor-ring {
  transform: translate(-50%, -50%) scale(0.76);
}

.esc-cursor-ripple {
  --esc-cursor-primary: #9461ff;
  position: fixed;
  z-index: 2147483645;
  width: 12px;
  height: 12px;
  border: 1px solid var(--esc-cursor-primary);
  border-radius: 50%;
  pointer-events: none;
  box-shadow: 0 0 18px color-mix(in srgb, var(--esc-cursor-primary) 35%, transparent);
  transform: translate(-50%, -50%);
  animation: esc-cursor-ripple 480ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes esc-cursor-ripple {
  to {
    width: 68px;
    height: 68px;
    border-color: transparent;
    box-shadow: 0 0 34px transparent;
    opacity: 0;
  }
}

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