/* Custom cursor, on every page, after kynejang.com (measured there in Chrome at 1440 x 900): a small
   near-white circle drawn with mix-blend-mode: exclusion, so it shows dark over light ground and
   light over dark, and as a colour negative over pictures. It trails the pointer and grows over
   anything clickable (cursor.js). It is only ever a circle.
   Switched on by cursor.js, which adds .has-cursor to <html> on devices with a fine pointer that
   can hover. To remove it: delete this file and cursor.js, and their <link> and <script> lines
   (marked "cursor") in each page. Nothing else depends on it. */

/* One 32px circle, scaled down at rest, so it stays crisp at every size */
.cursor {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 32px;
  height: 32px;
  margin: -16px 0 0 -16px;
  border-radius: 50%;
  background: rgb(246, 246, 246);
  mix-blend-mode: exclusion;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s;
  will-change: transform;
}

.cursor.is-visible {
  opacity: 1;
}

/* The native pointer gives way to the circle, except in text fields, which keep their text cursor
   (the circle steps aside there) */
.has-cursor,
.has-cursor * {
  cursor: none !important;
}

.has-cursor input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
.has-cursor textarea,
.has-cursor select,
.has-cursor [contenteditable] {
  cursor: auto !important;
}