/* Mouse follower by avijit
   - Center dot snaps to cursor
   - 40px outline ring lags behind (JS-controlled)
   Customize via CSS variables below in your theme if you like.
*/

:root {
  --nf-dot-size: 6px;
  --nf-ring-size: 40px;
  --nf-ring-border: 2px;
  --nf-color: #f7991e;
  --nf-z: 2147483647; /* stay on top */
}

/* Do not display on touch/coarse pointers */
@media (pointer: coarse) {
  .nf-cursor { display: none !important; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .nf-cursor { display: none !important; }
  body.nf-active * { cursor: auto !important; }
}

/* Hide native cursor when active, unless we need it for inputs, etc. */
@media (pointer: fine) {
  body.nf-active:not(.nf-native) * { cursor: none !important; }
}

.nf-cursor {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  will-change: transform;
  opacity: 0;
  transition: opacity .2s ease;
  z-index: var(--nf-z);
}

/* Centering via negative margins so JS only sets translate(x,y) */
.nf-cursor-dot {
  width: var(--nf-dot-size);
  height: var(--nf-dot-size);
  margin-left: calc(-1 * var(--nf-dot-size) / 2);
  margin-top: calc(-1 * var(--nf-dot-size) / 2);
  background: var(--nf-color);
  border-radius: 50%;
}

.nf-cursor-ring {
  width: var(--nf-ring-size);
  height: var(--nf-ring-size);
  margin-left: calc(-1 * var(--nf-ring-size) / 2);
  margin-top: calc(-1 * var(--nf-ring-size) / 2);
  border: var(--nf-ring-border) solid var(--nf-color);
  border-radius: 50%;
  background: transparent;
  transition: opacity .2s ease, border-width .06s ease;
}

/* Slight feedback on press */
.nf-cursor-ring.nf-press {
  border-width: calc(var(--nf-ring-border) + 1px);
}