/* Custom cursor: a small solid dot that follows the pointer and turns red
   over anything clickable. Position and scale are written together as one
   `transform` string from JS (see cursor.js) -- the only thing CSS animates
   is that single property, plus color/opacity, so there is nothing here
   that can desync into two moving parts. */
.has-cursor, .has-cursor * { cursor: none !important; }

.cursor {
  position: fixed; top: 0; left: 0; z-index: 1000; pointer-events: none;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--ink);
  opacity: 0;
  transition: transform .15s ease-out, background .2s, opacity .2s;
}
.cursor.is-visible { opacity: 1; }
.cursor.is-locked { background: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .cursor { transition: background .2s, opacity .2s; }
}