/* ============================================
   cursor.css — Cipher Linux Custom Cursor
   ============================================ */

/* Hide default cursor everywhere */
*, *::before, *::after { cursor: none !important; }

/* ── Cursor Dot (inner) ── */
#cursor-dot {
  position: fixed;
  width: 6px;
  height: 6px;
  background: var(--cipher-violet);
  border-radius: 50%;
  pointer-events: none;
  z-index: var(--z-cursor);
  transform: translate(-50%, -50%);
  transition: width 150ms var(--ease-out),
              height 150ms var(--ease-out),
              background 150ms;
  will-change: left, top;
}

/* ── Cursor Ring (outer) ── */
#cursor-ring {
  position: fixed;
  width: 28px;
  height: 28px;
  border: 1.5px solid var(--cipher-purple);
  border-radius: 50%;
  pointer-events: none;
  z-index: var(--z-cursor);
  transform: translate(-50%, -50%);
  transition: width 200ms var(--ease-out),
              height 200ms var(--ease-out),
              border-color 200ms,
              opacity 200ms;
  will-change: left, top;
  opacity: 0.75;
}

/* ── Hover state (over clickable elements) ── */
body.cursor-hover #cursor-dot {
  width: 10px;
  height: 10px;
  background: var(--cipher-purple-light);
}
body.cursor-hover #cursor-ring {
  width: 38px;
  height: 38px;
  border-color: var(--cipher-purple-light);
  opacity: 0.5;
}

/* ── Click state ── */
body.cursor-click #cursor-dot {
  width: 14px;
  height: 14px;
  background: var(--cipher-accent);
}
body.cursor-click #cursor-ring {
  width: 18px;
  height: 18px;
  border-color: var(--cipher-accent);
  opacity: 0.9;
}

/* ── Text cursor state ── */
body.cursor-text #cursor-dot {
  width: 2px;
  height: 20px;
  border-radius: 1px;
  background: var(--cipher-violet);
}
body.cursor-text #cursor-ring {
  opacity: 0;
}

/* ── Drag state ── */
body.cursor-drag #cursor-ring {
  border-style: dashed;
  border-color: var(--cipher-yellow);
}
body.cursor-drag #cursor-dot {
  background: var(--cipher-yellow);
}

/* ── Glow trail effect ── */
#cursor-ring::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: var(--cipher-purple-glow);
  opacity: 0;
  transition: opacity 200ms;
}
body.cursor-hover #cursor-ring::before { opacity: 0.3; }