document.addEventListener('DOMContentLoaded', () => {
// Crear los elementos del cursor personalizado
const dot = document.createElement('div');
const circle = document.createElement('div');
dot.className = 'custom-cursor-dot';
circle.className = 'custom-cursor-circle';
document.body.appendChild(dot);
document.body.appendChild(circle);
// Posiciones del mouse y de los círculos
let mouseX = 0, mouseY = 0;
let circleX = 0, circleY = 0;
let dotX = 0, dotY = 0;
// Guardar la posición del mouse al moverse
document.addEventListener('mousemove', (e) => {
mouseX = e.clientX;
mouseY = e.clientY;
});
// Función de animación para el efecto suave
function animateCursor() {
// El punto del centro sigue al mouse de forma inmediata (o casi)
dotX += (mouseX - dotX) * 0.3;
dotY += (mouseY - dotY) * 0.3;
// El círculo de afuera sigue al mouse con más retraso (0.1) para el efecto elástico
circleX += (mouseX - circleX) * 0.1;
circleY += (mouseY - circleY) * 0.1;
// Aplicar las posiciones con transform para mejor rendimiento
dot.style.transform = `translate(${dotX}px, ${dotY}px)`;
circle.style.transform = `translate(${circleX}px, ${circleY}px)`;
requestAnimationFrame(animateCursor);
}
animateCursor();
// Efecto opcional: Hacer que el círculo crezca al hacer clic o pasar sobre un enlace
document.querySelectorAll('a, button, .et_pb_button').forEach(link => {
link.addEventListener('mouseenter', () => circle.classList.add('hovered'));
link.addEventListener('mouseleave', () => circle.classList.remove('hovered'));
});
});
