/* ============================================================
   Custom cursor — a small solid dot at the real pointer position,
   plus a larger ring that trails it with a slight lag (cursor.js
   eases the ring toward the dot the same way engine.js eases scroll —
   the same "ease," just applied to the mouse instead of scrollY).

   Both are centred on their own (0,0) via a fixed negative margin
   (half their own width/height) rather than a transform:translate
   percentage — cursor.js only ever has to set one translate3d(x,y,0)
   per frame, no second transform to chain onto it.

   (pointer:fine) only — never on touch. There is no pointer to
   replace on a touchscreen, and the real cursor is never hidden there
   since the media query (and cursor.js's own guard) simply never
   matches.
   ============================================================ */
@media (pointer:fine){
  body{ cursor:none; }
  a, button, [role="button"]{ cursor:none; }
}

.cursor-dot, .cursor-ring{
  position:fixed; top:0; left:0; z-index:var(--z-cursor);
  pointer-events:none; border-radius:50%;
  will-change:transform;
   mix-blend-mode: difference;
}
.cursor-dot{ width:8px; height:8px; margin:-4px 0 0 -4px; background:var(--w-00); }
.cursor-ring{
  width:40px; height:40px; margin:-20px 0 0 -20px;
  border:1px solid var(--w-00);
  transition:width var(--dur-3) var(--ease-move), height var(--dur-3) var(--ease-move),
             margin var(--dur-3) var(--ease-move), opacity var(--dur-2) var(--ease-move);
}
/* Owner request: the ring grows and softens over anything clickable —
   the one bit of feedback a hidden native cursor still needs to give. */
.cursor-ring.is-active{ width:64px; height:64px; margin:-32px 0 0 -32px; opacity:.6; }

@media (prefers-reduced-motion:reduce){
  .cursor-ring{ transition:none; }
}