/* Site-wide custom cursor — a single amber dot with a fading trail.
   Forced everywhere via !important since dozens of rules across the
   codebase set `cursor: pointer` on individual elements. */

@media (prefers-reduced-motion: no-preference) {
  * { cursor: none !important; }
}

.cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  background-color: var(--color-amber);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  will-change: transform;
  transition: width 100ms ease-out, height 100ms ease-out, margin 100ms ease-out, background-color 100ms ease-out;
}

/* Glow via a radial-gradient pseudo-element instead of box-shadow — a
   box-shadow on a GPU-composited (will-change: transform) layer forces the
   browser to repaint that layer's shadow every frame; a gradient background
   composites cheaply instead. */
.cursor-dot::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200, 134, 10, 0.45) 0%, transparent 70%);
  pointer-events: none;
}

.cursor-dot.cursor-hover {
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  background-color: color-mix(in srgb, var(--color-ember) 55%, var(--color-amber) 45%);
}

.cursor-dot.cursor-hover::after {
  background: radial-gradient(circle, color-mix(in srgb, var(--color-ember) 45%, transparent) 0%, transparent 70%);
}

.cursor-trail-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 9997;
}

@media (pointer: coarse) {
  .cursor-dot, .cursor-trail-canvas { display: none; }
}