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

/* ── JS-managed pencil cursor ── */
#hxl-cursor {
  position: fixed;
  width: 32px;
  height: 32px;
  background: url('../images/cursor-pencil.svg') no-repeat center / contain;
  pointer-events: none;
  z-index: 99999;
  /* tip is at ~(5,5) of the 32×32 SVG; offset so tip = mouse position */
  transform: translate(-5px, -5px);
  transition: opacity 0.15s, transform 0.08s;
  will-change: left, top;
  top: -100px;
  left: -100px;
}

#hxl-cursor.is-hovering {
  transform: translate(-5px, -5px) scale(1.2);
}

#hxl-cursor.is-clicking {
  transform: translate(-5px, -5px) scale(0.8) rotate(-15deg);
}

/* ── Trail dots ── */
.hxl-trail {
  position: fixed;
  width: 3px;
  height: 3px;
  background: var(--color-ink);
  pointer-events: none;
  z-index: 99996;
  transform: translate(-1.5px, -1.5px);
  opacity: 0.2;
  image-rendering: pixelated;
  transition: opacity 0.5s ease;
  top: -100px;
  left: -100px;
}

.hxl-trail.is-fading {
  opacity: 0;
}

/* ── Click burst pixels ── */
.hxl-burst {
  position: fixed;
  pointer-events: none;
  z-index: 99997;
  image-rendering: pixelated;
  will-change: left, top, opacity;
}