/* ============================================================
   cursor.css — Custom LERP cursor (dot + ring)
   Hidden automatically on touch devices via media query
   ============================================================ */

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

.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  width: 32px;
  height: 32px;
  border: 1.5px solid rgba(108, 99, 255, 0.5);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  transition: width 0.2s ease, height 0.2s ease, border-color 0.2s ease, opacity 0.2s;
  will-change: left, top;
}

/* Hover expand — triggered by JS adding body.cursor-hover */
body.cursor-hover .cursor-ring {
  width: 56px;
  height: 56px;
  border-color: var(--accent);
}

/* Hide native cursor and show custom on desktop */
@media (hover: hover) and (pointer: fine) {
  html, html * { cursor: none !important; }
}

/* Hide custom cursor on touch devices */
@media (hover: none) {
  .cursor-dot,
  .cursor-ring { display: none; }
}