/* ============================================================
   cloonk.com — cursor.css
   Custom dot + pill + pen cursor. Injected by js/cursor.js.
   Depends on tokens --accent, --bg, --font-display from the host
   page's :root. Shared by style.css (@import) and the standalone
   Darkroom pages (direct <link>).
   ============================================================ */

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

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

/* Pill label cursor — hidden by default */
.cursor-label {
  position: fixed;
  top: 0; left: 0;
  padding: 4px 14px;
  background: var(--accent);
  color: var(--bg);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 100px;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  opacity: 0;
  white-space: nowrap;
  transition: opacity 0.15s, background 0.2s, color 0.2s, border-color 0.2s;
  will-change: transform;
}

body.cursor-contrast .cursor-dot {
  background: var(--bg);
  box-shadow: 0 0 0 1px var(--accent);
}
body.cursor-contrast .cursor-label {
  background: var(--bg);
  color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

/* When hovering a link/button: hide dot, show label */
body.cursor-hover .cursor-dot {
  opacity: 0;
}
body.cursor-hover .cursor-label {
  opacity: 1;
}

/* Pen cursor — for editable note areas (line sheet textareas, etc.) */
.cursor-pen-icon {
  position: fixed;
  top: 0; left: 0;
  width: 22px;
  height: 22px;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  opacity: 0;
  color: var(--accent);
  transition: opacity 0.15s;
  will-change: transform;
}
.cursor-pen-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
body.cursor-pen .cursor-dot { opacity: 0; }
body.cursor-pen .cursor-label { opacity: 0; }
body.cursor-pen .cursor-pen-icon { opacity: 1; }
body.cursor-contrast .cursor-pen-icon {
  color: var(--bg);
  filter: drop-shadow(0 0 1px var(--accent));
}

/* While actively pressing the mouse: collapse to the plain dot, no label/pen */
body.cursor-clicking .cursor-label { opacity: 0; }
body.cursor-clicking .cursor-pen-icon { opacity: 0; }
body.cursor-clicking .cursor-dot { opacity: 1; }

/* Keep cursor visible on mobile (no hover) */
@media (hover: none) {
  *, *::before, *::after { cursor: auto !important; }
  .cursor-dot, .cursor-label, .cursor-pen-icon { display: none; }
}