Backdrop Filter not working on Custom Cursor

Design help Custom code
1

Posted this earlier but the read-only was wrong

I’m trying to get a Backdrop Filter Blur working on my custom cursor circle when it hovers over the nav links on the left but nothing seems to be working. The current custom code is…

.cursor-background {
-webkit-backdrop-filter: blur(10px) brightness(100%); 
backdrop-filter: blur(10px) brightness(100%);}

I am stumped. Please help.

Here is my site Read-Only: https://preview.webflow.com/preview/loveiswar?utm_medium=preview_link&utm_source=designer&utm_content=loveiswar&preview=4292d68f407115566426910e84312e49&pageId=60d1a3acb36934acfea7f884&workflow=preview

2

The below page says the backdrop filter has no effect unless there are "2 elements stacked on top of each other along the z-axis, from either nested elements or from absolute positioning.

Do you have any research that demonstrates that the backdrop filter works when applied to the cursor which is not “an element on the page”?