#cursor-ring {
  position: fixed; top: 0; left: 0; z-index: 10000;
  width: 28px; height: 28px; border-radius: 50%;
  border: 1.5px solid #cc00ff;
  box-shadow: 0 0 8px #cc00ff;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: width .2s, height .2s, border-color .2s, background .2s, border-radius .2s;
  will-change: transform;
}
#cursor-dot {
  position: fixed; top: 0; left: 0; z-index: 10001;
  width: 6px; height: 6px; border-radius: 50%;
  background: #ff0055;
  box-shadow: 0 0 6px #ff0055;
  pointer-events: none;
  transform: translate(-50%, -50%);
  will-change: transform;
}

/* Hover state on magnetic elements */
body.cursor-hover #cursor-ring {
  width: 48px; height: 48px;
  border-color: #ff0055;
  background: rgba(102, 0, 255, .12);
  box-shadow: 0 0 16px #ff0055;
}
body.cursor-hover #cursor-dot { opacity: 0; }

/* On links: oval */
body.cursor-link #cursor-ring {
  width: 42px; height: 28px;
  border-color: #0088ff;
  box-shadow: 0 0 10px #0088ff;
}

@media (pointer: coarse) {
  #cursor-ring, #cursor-dot { display: none; }
  body { cursor: auto; }
  * { cursor: auto; }
}