/* ============================================================
   CURSOR — Custom dot + ring
   JS sets left/top directly; transform just centres each element
   ============================================================ */
.cursor {
  position: fixed;
  top: 0; left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: opacity 0.2s;
  mix-blend-mode: difference;
  will-change: left, top;
}

.cursor-ring {
  position: fixed;
  top: 0; left: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  transition: width 0.2s ease, height 0.2s ease, opacity 0.2s ease;
  opacity: 0.5;
  will-change: left, top;
}