CSS mix-blend-mode - I try to achive white / black text blend mode on red background

Question

I try to achieve interesting css view of web page. I have a red background and some text, which i want to be white. Then I have white circle (which follow cursor). What I want is that when the circle overlap the white text, the text inside the circle change color to black. (viz. images).

Now: image1

What I want to achieve: image2

I tried this with mix-blend-mode: difference, but when I applied this to text element, the text color is blue on the red background.

working exapmple here: https://jsfiddle.net/BonoAnimo/5chtw2y9/50/

<div class="red-bg">
  <div class="circle"></div>
  <div class="text">
    Some text
  </div>
</div>

.red-bg{
  background-color: red;
  height:100%;
  height:100vh;
  position:relative;
}

.circle{
  border-radius: 50%;
  background-color: white;
  position: absolute;
  z-index: 1;
  top: 100px;
  left: 100px;
  width: 300px;
  height: 300px;
  
}

.text{
  pointer-events: none;
  z-index:2;
  color:white;
  position:absolute;
  font-size: 3rem;
  top: 150px;
  left: 320px;
  mix-blend-mode:difference;
  
}

const cursor = document.querySelector(".circle");

const editCursor = (e) => {
    const { clientX: x, clientY: y } = e;
    cursor.style.left = x - 150 + 'px';
    cursor.style.top = y - 150 + 'px';
  };

console.log(cursor)

cursor.addEventListener('mousemove',(e) => editCursor(e));