Как добавить переход CSS к маске ⇐ Javascript

[Anonymous]

Я пытаюсь добавить переход к эффекту маски, как в этом примере:
https://bricksforge.io/
Я добавил переход как на со- Pattern__overlay, где находится маска, и в :root, где находятся переменные CSS, обновляемые при перемещении мыши.
HTML

CSS
:root {
--mouse-x: 0px;
--mouse-y: 0px;
transition: --mouse-x 0.3s ease, --mouse-y 0.3s ease;
}
.co-pattern__overlay{
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
width: 100%;
height: 100%;
pointer-events: none;
background-color: #0f1218;
z-index: 1;
transition: all 0.5s ease;
}
.co-pattern__overlay{
mask: radial-gradient( circle at var(--mouse-x) var(--mouse-y), transparent 20px, black 350px );
-webkit-mask: radial-gradient( circle at var(--mouse-x) var(--mouse-y), transparent 20px, black 350px );
}

JS
const cursor = document.querySelector('.hero');
cursor.addEventListener('mousemove', (event) => {
const rect = cursor.getBoundingClientRect();
const mouseX = ((event.clientX - rect.left) / rect.width) * 100 + '%';
const mouseY = ((event.clientY - rect.top) / rect.height) * 100 + '%';

document.documentElement.style.setProperty('--mouse-x', mouseX);
document.documentElement.style.setProperty('--mouse-y', mouseY);
});


Подробнее здесь: https://stackoverflow.com/questions/793 ... on-to-mask