.cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 8px;
  height: 8px;
  background: var(--accent-purple);
  border-radius: 50%;
  pointer-events: none;
  z-index: var(--z-cursor);
  will-change: transform;
  transform: translate(-50%, -50%);
  transition: width 0.25s var(--ease-out),
              height 0.25s var(--ease-out),
              border-radius 0.25s var(--ease-out),
              background 0.25s,
              opacity 0.25s;
}

/* Buttons & CTAs — grow into a soft disc */
.cursor-dot.on-button {
  width: 40px;
  height: 40px;
  background: rgba(123, 97, 255, 0.12);
  mix-blend-mode: normal;
}

/* Text content — flatten into a thin line */
.cursor-dot.on-text {
  width: 2px;
  height: 24px;
  border-radius: 1px;
  background: var(--accent-purple);
  opacity: 0.6;
}

/* Cards — medium glow */
.cursor-dot.on-card {
  width: 20px;
  height: 20px;
  background: rgba(123, 97, 255, 0.08);
}

/* Inputs — thin caret */
.cursor-dot.on-input {
  width: 2px;
  height: 20px;
  border-radius: 1px;
  background: var(--accent-purple);
  opacity: 0.8;
}