.cursor {
  position: fixed;
  width: 6px;
  height: 6px;
  background: #3300FF;
  border-radius: 50%;
  pointer-events: none;
  z-index: var(--z-cursor);
  transform: translate(-50%, -50%);
  transition: opacity var(--duration-fast) var(--ease-in-out),
              width var(--duration-base) var(--ease-spring),
              height var(--duration-base) var(--ease-spring);
}

.cursor__follower {
  position: fixed;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(51, 0, 255, 0.35);
  border-radius: 50%;
  pointer-events: none;
  z-index: calc(var(--z-cursor) - 1);
  transform: translate(-50%, -50%);
  transition: width var(--duration-base) var(--ease-spring),
              height var(--duration-base) var(--ease-spring),
              border-color var(--duration-base) var(--ease-in-out),
              opacity var(--duration-base) var(--ease-in-out);
}

.cursor--hovered {
  width: 10px;
  height: 10px;
}

.cursor__follower--hovered {
  width: 56px;
  height: 56px;
  border-color: rgba(51, 0, 255, 0.65);
}

.cursor--hidden,
.cursor__follower--hidden {
  opacity: 0;
}

@media (hover: none) and (pointer: coarse) {
  .cursor, .cursor__follower { display: none; }
  html { cursor: auto; }
}