html, body, * {
  cursor: none !important;
}
 
 /* negative cursor */
  .neg-cursor {
    position: fixed;
    left: 0;
    top: 0;
    width: 64px;
    height: 64px;
    pointer-events: none;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    transition: transform 0.35s ease-out;
    will-change: transform;
    display: block;
    

    /* The trick: white filled circle + difference blend inverts underlying colors */
    background: white;
    mix-blend-mode: difference;
    z-index: +99999;
    box-shadow: 0 6px 20px rgba(0,0,0,0.15); /* optional */
  }

  /* smaller cursor size on mobile or very small screens */
  @media (max-width: 480px) {
    .neg-cursor { width: 40px; height: 40px; }
  }

  /* optional: enlarge on hover for elements that should react */
  .hoverable { display: inline-block; }
  .hoverable:hover ~ .neg-cursor, .neg-cursor.hovering {
    transform: translate(-50%, -50%) scale(0.8);
  }
  
  .neg-cursor.moving {
  transform: translate(-50%, -50%) scale(0.4);
}

.neg-cursor.hovering {
  transform: translate(-50%, -50%) scale(0.8);
}