/* Pointer effects. Mouse and trackpad only (html.has-cursor is set by cursor.js). */

/* The ribbon trail canvas sits behind the page content. */
.fx-trail {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* The blob: lime, stretches with speed (scale and rotation come from cursor.js). */
.cursor-blob {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  background: #dcef00;
  pointer-events: none;
  opacity: 0;
  will-change: transform;
  transition: opacity 0.3s ease, background-color 0.3s ease, filter 0.3s ease;
}
html.has-cursor.pointer-in .cursor-blob { opacity: 1; }
/* Over links and the pill: a white disc that inverts what it covers. */
html.has-cursor.cursor-link .cursor-blob { background: #fff; mix-blend-mode: difference; }
/* Over the hero photo: a large soft lens. */
html.has-cursor.cursor-big .cursor-blob { opacity: 0.3; filter: blur(5px); }

/* Hide the system pointer only where the custom one is drawn. */
html.has-cursor,
html.has-cursor a,
html.has-cursor button { cursor: none; }