Circular cursor covers the text - html

Question

I'm creating a circular cursor, and when it overlaps with the text, I want it to have the white background, but to leave the text. Now, however, it covers the text. I tried using z-index but nothing happened.
my html:
<div class="cursor">
</div>
<section class="hero-text">
<div class="hero-text-content">
<h1 class="cursor-scale">Привет!</h1>
<h2 id="hi">That's how we say 'Hi' in Russian</h2>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script>
<script src="static/js/main.js"></script>
my css:
.hero-text {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-family: 'Poppins', sans-serif;
cursor: none;
}
.hero-text h1 {
font-size: 8vw;
line-height: 1;
font-weight: 700;
background-image: linear-gradient(132deg,
#3ff4af 0%, #d8e614 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
z-index: 9999;
}
.hero-text h2 {
font-size: 5vw;
color: black;
display: inline-flex;
z-index: 9999;
}
.cursor {
position: fixed;
width: 40px;
height: 40px;
border: 2px solid pink;
border-radius: 50%;
margin-left: -20px;
margin-top: -20px;
transition: transform .3s ease;
pointer-events: none;
transform-origin: center center;
}
.grow {
transform: scale(10);
background: white;
/*mix-blend-mode: difference;*/
border: none;
}
my js:
function elementsOverlap(el1, el2) {
const domRect1 = el1.getBoundingClientRect();
const domRect2 = el2.getBoundingClientRect();
return !(
domRect1.top > domRect2.bottom ||
domRect1.right < domRect2.left ||
domRect1.bottom < domRect2.top ||
domRect1.left > domRect2.right
);
}
var cursor = document.querySelector('.cursor'),
cursorScale = document.querySelectorAll('.cursor-scale'),
hi = this.document.querySelector('#hi'),
mouseX = 0,
mouseY = 0
gsap.to({}, 0.016, {
repeat: -1,
onRepeat: function() {
gsap.set(cursor, {
css: {
left: mouseX,
top: mouseY
}
})
}
})
window.addEventListener('mousemove', function (e) {
mouseX = e.clientX
mouseY = e.clientY
})
cursorScale.forEach(link => {
link.addEventListener('mouseleave', () => {
cursor.classList.remove('grow');
cursor.classList.remove('grow-small')
});
link.addEventListener('mousemove', () => {
cursor.classList.add('grow');
if (link.classList.contains('small')) {
cursor.classList.remove('grow');
cursor.classList.add('grow-small')
}
})
})
my result:
I'm doing it from the tutorial, and there they use mix-blend-mode: difference, but what I need is that when the cursor is white, it reveals the black text (<h2>), but when the mix-blend-mode is used, the text is white, so I decided to delete this property, but now the cursor is overlapped.
Thanks for any help!

Answer 1

mix-blend-mode: difference; makes sense over here.
Is this not what you require? Please specify what you're looking for.
From what I understood from the description, you want the h2 text to only be visible within the large cursor.
In that case, clip-path might help.
Alternatively, adding invert filter with mix-blend-mode gives this result.
.hero-text h2 {
color: white;
filter: invert(100%);
}
.grow {
background: white;
mix-blend-mode: difference;
}