/* Cursor Blend / Invert — anillo blanco + hotspot, ambos con mix-blend-mode. */

body.pro-cursor-blend .pe-cur-ring,
body.pro-cursor-blend .pe-cur-hotspot {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 2147483646;
  border-radius: 50%;
  background: #fff;                                  /* blanco fijo: el blend invierte respecto a blanco */
  mix-blend-mode: var(--pe-cur-blend, difference);   /* control Modo: difference | exclusion */
  will-change: transform;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity .2s;
}

/* Solo visibles cuando el cursor está activo (mouse dentro del viewport). */
body.pro-cursor-visible .pe-cur-ring,
body.pro-cursor-visible .pe-cur-hotspot {
  opacity: 1;
}

/* Anillo: disco blanco. Las CSS vars se inyectan SIN unidad → calc(... * 1px). */
body.pro-cursor-blend .pe-cur-ring {
  width: calc(var(--pe-cur-size, 44) * 1px);
  height: calc(var(--pe-cur-size, 44) * 1px);
}

/* Hotspot: punto sólido de 7px, 1:1 con el puntero. */
body.pro-cursor-blend .pe-cur-hotspot {
  width: 7px;
  height: 7px;
}

/* Ocultar el puntero nativo del SO cuando el runtime lo pide. */
body.pro-cursor-hide-native,
body.pro-cursor-hide-native * {
  cursor: none;
}