/* ==========================================================================
   Custom Circular Cursor
   White circle + mix-blend-mode: difference — the browser inverts the
   circle's color against whatever is directly underneath it, so it's
   always visible: dark over light backgrounds, light over dark ones,
   inverted-color over colored backgrounds/images. Reacts to anything
   on the page, not just the site's light/dark theme.
   ========================================================================== */

.custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #ffffff;
  mix-blend-mode: difference; /* auto-inverts against whatever is underneath */
  pointer-events: none;
  z-index: 999999;
  opacity: 0;
  transform: translate3d(-50%, -50%, 0);
  transition: opacity 0.2s ease, width 0.2s ease, height 0.2s ease;
  will-change: transform;
}

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

/* Grows slightly over links/buttons for a bit of feedback */
.custom-cursor.is-hovering {
  width: 36px;
  height: 36px;
}

/* Hide the native cursor only where our custom one is active (desktop, fine pointer) */
@media (hover: hover) and (pointer: fine) {
  html.has-custom-cursor,
  html.has-custom-cursor * {
    cursor: none !important;
  }
}

/* Never run on touch / coarse-pointer devices — leave native behavior alone */
@media (hover: none), (pointer: coarse) {
  .custom-cursor {
    display: none !important;
  }
}