<style>
* {
cursor: none !important;
}

.cursor-blur {
position: fixed;
pointer-events: none;
z-index: 99999;
width: 24px;
height: 24px;
border-radius: 50%;

background: radial-gradient(circle at center, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.02) 70%, transparent 100%);
backdrop-filter: blur(3px) saturate(0.9);
-webkit-backdrop-filter: blur(3px) saturate(0.9);
transform: translate(-50%, -50%);
transition: width 0.3s ease, height 0.3s ease, backdrop-filter 0.3s ease, background 0.3s ease;
will-change: transform, width, height;

box-shadow: 0 0 40px rgba(0, 0, 0, 0.06), 0 0 80px rgba(0, 0, 0, 0.03);
}

.cursor-blur.hover {
width: 42px;
height: 42px;
backdrop-filter: blur(6px) saturate(0.85);
-webkit-backdrop-filter: blur(6px) saturate(0.85);
background: radial-gradient(circle at center, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.04) 70%, transparent 100%);
box-shadow: 0 0 60px rgba(0, 0, 0, 0.10), 0 0 120px rgba(0, 0, 0, 0.04);
}
</style>

<div class="cursor-blur" id="cursorBlur"></div>

<script>
(function() {
const blurEl = document.getElementById('cursorBlur');
let mouseX = 0, mouseY = 0;
let blurX = 0, blurY = 0;

document.addEventListener('mousemove', (e) => {
mouseX = e.clientX;
mouseY = e.clientY;
});

function animate() {
blurX += (mouseX - blurX) * 0.12;
blurY += (mouseY - blurY) * 0.12;
blurEl.style.left = blurX + 'px';
blurEl.style.top = blurY + 'px';
requestAnimationFrame(animate);
}
animate();

const targets = document.querySelectorAll('a, button, .t-btn, .t-link, input, .t-submit, [role="button"]');
targets.forEach(el => {
el.addEventListener('mouseenter', () => blurEl.classList.add('hover'));
el.addEventListener('mouseleave', () => blurEl.classList.remove('hover'));
});
})();
</script>