See through an absolute div on mouse move

I'm trying to create some kind of flashlight effect. I have a div (fixed, radiant background, height and width 100%) masking the entire screen. On mouse move, I'd like to reveal what is behind the div in a flashlight way.

I don't find a way to make a portion of this div transparent (opacity: 0). See example attached:

The "Pré-inscription" button appears on mouse over, the gradiant remains around the mouse cursor (the circle is too small on the screenshot, I will make it bigger)

EDIT: for a better understanding, I created a Codepen. As you can see, the fixed radiant gradiant. The red circle should allow to see through the gradiant.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

let magnifier = document.getElementById('magnifier')
let size = magnifier.offsetWidth

window.addEventListener('mousemove', (e) => {
  magnifier.style.top = e.clientY - (size / 2)+'px'
  magnifier.style.left = e.clientX - (size / 2)+'px'
  
})

<!-- language: lang-css -->

#overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: rgb(255,215,108);
  background: radial-gradient(circle, rgba(251, 92, 3, 1) 0%, rgba(255,215,108,1) 100%);
}

#magnifier {
  position: absolute;
  background: red;
  width: 7rem;
  height: 7rem;
  border-radius: 100%;
  top: -20rem;
  left: -20rem;
}

<!-- language: lang-html -->

<h1 class="text-7xl">Coming soon</h1>

<div id="overlay">
  <div id="magnifier"></div>
</div>

<!-- end snippet -->

Any idea?
Thanks

Axel

You could try something with an overlay with an inset shadow which tracks the mouse location.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

document.onmousemove = handleMouseMove;
function handleMouseMove(event) {
  var eventDoc, doc, body;

  eventDoc = (event.target && event.target.ownerDocument) || document;
  doc = eventDoc.documentElement;
  body = eventDoc.body;

  event.pageX = event.clientX +
    (doc && doc.scrollLeft || body && body.scrollLeft || 0) -
    (doc && doc.clientLeft || body && body.clientLeft || 0);
  event.pageY = event.clientY +
    (doc && doc.scrollTop  || body && body.scrollTop  || 0) -
    (doc && doc.clientTop  || body && body.clientTop  || 0 );

  const spotlight = document.getElementById("spotlight");
  const boundingRect = spotlight.getBoundingClientRect();
  spotlight.style.left = `${event.pageX - boundingRect.width/2}px`
  spotlight.style.top = `${event.pageY - boundingRect.height/2}px`
}

<!-- language: lang-css -->

html, body {
  margin: 0;
}

.bigoverlay {
  width: 100dvw;
  height: 100dvh;
  overflow: hidden;
  position: relative;
}

.spotlight {
  border-radius: 50%;
  width: 250vmax;
  height: 250vmax;
  box-shadow: 0 0 5vmax 110vmax inset black;
  position: absolute;
  z-index: -1;
  left: -75vmax;
  top: -75vmax;
}

<!-- language: lang-html -->
<div class="bigoverlay" id="bigoverlay">
<h1>Some hidden text</h1>
<div class="spotlight" id="spotlight"></div>
</div>

<!-- end snippet -->