:root {
    --cursor-flashlight-speed: .2s; /* Adjust the cursor effect speed here */
    --cursor-flashlight-timing: linear;
}

/* ! Do Not Edit Below! */

:root {
    --mouse-x: unset;
    --mouse-y: unset;
    transition: --mouse-x var(--cursor-flashlight-speed) var(--cursor-flashlight-timing),
                --mouse-y var(--cursor-flashlight-speed) var(--cursor-flashlight-timing);
}


@property --mouse-x {
    syntax: "<percentage> | <length>";
    inherits: true;
    initial-value: 0px;
}

@property --mouse-y {
    syntax: "<percentage> | <length>";
    inherits: true;
    initial-value: 0px;
}

.cursor-flashlight {
    position: relative;
    overflow: hidden;
}

.cursor-flashlight:before {
    mask: radial-gradient( circle at var(--mouse-x) var(--mouse-y), transparent 20px, currentColor 200px );
    -webkit-mask: radial-gradient( circle at var(--mouse-x) var(--mouse-y), transparent 20px, currentColor 200px );
}

.cursor-flashlight:after {
    content:"";
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    bottom:0;
    right:0;
    z-index:-1;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

document.addEventListener('DOMContentLoaded', function () {
    let cursor;
    
    if (document.querySelectorAll('.cursor-flashlight')) {
        cursor = document.querySelector('.cursor-flashlight');
    }
    
    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);
    });
});