/* ─── CURSOR: dot + ring only ─── */

* { cursor: none !important; }

#cursor-dot {
  position: fixed;
  width: 6px;
  height: 6px;
  background: var(--cyan);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 8px var(--cyan);
  transition: width .15s, height .15s, background .15s;
}

#cursor-ring {
  position: fixed;
  width: 32px;
  height: 32px;
  border: 1.5px solid rgba(0,229,255,.6);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99998;
  transform: translate(-50%, -50%);
  transition: width .25s ease, height .25s ease, border-color .25s;
}

/* Hover state — ring expands slightly, dot fills */
body.cursor-hover #cursor-ring {
  width: 44px;
  height: 44px;
  border-color: var(--cyan);
}
body.cursor-hover #cursor-dot {
  width: 8px;
  height: 8px;
}

/* Click — dot pulses */
body.cursor-click #cursor-dot {
  width: 10px;
  height: 10px;
  box-shadow: 0 0 16px var(--cyan), 0 0 32px rgba(0,229,255,.4);
}

/* ─── Hide cursor on touch devices ─── */
@media (hover: none) and (pointer: coarse) {
  * { cursor: auto !important; }
  #cursor-dot,
  #cursor-ring { display: none; }
}