<style>

.custom-cursor {
position: fixed;
pointer-events: none;
z-index: 99999;
width: 12px;
height: 12px;
background: #000;
border-radius: 0;
transform: translate(-50%, -50%);
transition: width 0.25s ease, height 0.25s ease, border-radius 0.25s ease, background 0.25s ease;
will-change: transform, width, height, border-radius;
}

/* Состояние при наведении на интерактивные элементы */
.custom-cursor.hover {
width: 30px;
height: 30px;
border-radius: 50%;
background: #111;
}
</style>

<div class="custom-cursor" id="cursor"></div>

<script>
(function() {
const cursor = document.getElementById('cursor');
let mouseX = 0, mouseY = 0;
let cursorX = 0, cursorY = 0;

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

function animate() {
cursorX += (mouseX - cursorX) * 0.15;
cursorY += (mouseY - cursorY) * 0.15;
cursor.style.left = cursorX + 'px';
cursor.style.top = cursorY + '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', () => cursor.classList.add('hover'));
el.addEventListener('mouseleave', () => cursor.classList.remove('hover'));
});
})();
</script>