Estoy usando un script para tener un efecto de foco. En la versión web sigue al cursor, en la versión móvil debería permanecer estático en el centro de la página pero cuando trato de arreglarlo pasa algo extraño y parece que va debajo de algo y solo se ve en la parte superior del sitio web

www.civitonia.com

CSS:

 .spotlight { position: absolute; width: 100%; height: 100%; pointer-events: none; background-image: radial-gradient(circle at 50% 50%, transparent 160px, rgba(0, 0, 0, 0.85) 200px); } @media only screen and (min-width: 800px) { .spotlight { position: fixed; background-image: radial-gradient(circle at 50% 50%, transparent 160px, rgba(0, 0, 0, 0) 200px); } }

Guion:

 <script> window.addEventListener("DOMContentLoaded", ()=>{ const spotlight = document.querySelector('.spotlight'); let spotlightSize = 'transparent 160px, rgba(0, 0, 0, 0.85) 200px)'; //attach mousemove event listener if media query matches. if (matchMedia('only screen and (min-width: 800px)').matches) { window.addEventListener('mousemove', updateSpotlight); function updateSpotlight(e) { spotlight.style.backgroundImage = `radial-gradient(circle at ${e.pageX / window.innerWidth * 100}% ${e.pageY / window.innerHeight * 100}%, ${spotlightSize}`; } } else { spotlight.style.backgroundImage = `radial-gradient(circle at ${window.innerWidth/2}px ${window.innerHeight/2}px, ${spotlightSize}`; } }); </script>

HTML:

 <div class="spotlight" style="background-image: radial-gradient(circle at 98.3559% 72.549%, transparent 160px, rgba(0, 0, 0, 0.85) 200px);"></div>

¿Alguien podría ayudarme a mantener el foco fijo (solo en la versión móvil) en el centro de la página? el foco debe permanecer igual en la versión web (sigue siguiendo el cursor como lo hace ahora)