/* ===== Custom Cursor ===== */
* { cursor: none !important; }

#cursor-dot {
  position: fixed;
  width: 8px; height: 8px;
  background: var(--accent);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: width 0.2s, height 0.2s, background 0.2s;
  box-shadow: 0 0 10px var(--accent);
}

#cursor-ring {
  position: fixed;
  width: 36px; height: 36px;
  border: 1.5px solid rgba(0,212,255,0.5);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  transition: width 0.15s, height 0.15s, border-color 0.2s, transform 0.08s;
}

#cursor-trail {
  position: fixed;
  pointer-events: none;
  z-index: 9997;
}

#cursor-trail span {
  position: fixed;
  width: 4px; height: 4px;
  background: var(--accent);
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  opacity: 0;
}

body.cursor-hover #cursor-dot {
  width: 12px; height: 12px;
  background: var(--accent3);
  box-shadow: 0 0 16px var(--accent3);
}
body.cursor-hover #cursor-ring {
  width: 52px; height: 52px;
  border-color: rgba(6,255,165,0.4);
}

body.cursor-click #cursor-dot {
  width: 6px; height: 6px;
}
body.cursor-click #cursor-ring {
  width: 28px; height: 28px;
}

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