window.addEventListener('DOMContentLoaded', function() {
if( window.innerWidth >= 1024 ){
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');

    function resizeCanvas() {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
    }

    resizeCanvas();

    const maxTrailLength = 500;
    let points = [];
    let mousePos = { x: window.innerWidth / 2, y: window.innerHeight / 2 };
    let smoothMousePos = { x: window.innerWidth / 2, y: window.innerHeight / 2 };

    const smoothFactor = 0.5;

    window.addEventListener('mousemove', (e) => {
        mousePos.x = e.clientX;
        mousePos.y = e.clientY;
    });

    function drawTrail() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        smoothMousePos.x += (mousePos.x - smoothMousePos.x) * smoothFactor;
        smoothMousePos.y += (mousePos.y - smoothMousePos.y) * smoothFactor;

        points.push({ x: smoothMousePos.x, y: smoothMousePos.y });

        let totalLength = 0;
        for (let i = points.length - 1; i > 0; i--) {
            const dx = points[i].x - points[i - 1].x;
            const dy = points[i].y - points[i - 1].y;
            totalLength += Math.sqrt(dx * dx + dy * dy);

            if (totalLength > maxTrailLength) {
                points = points.slice(i);
                break;
            }
        }

        ctx.beginPath();
        for (let i = 0; i < points.length - 1; i++) {
            ctx.moveTo(points[i].x, points[i].y);
            ctx.lineTo(points[i + 1].x, points[i + 1].y);
        }
        ctx.strokeStyle = '#ffffff';
        ctx.lineWidth = 2;
        ctx.stroke();

        requestAnimationFrame(drawTrail);
    }

    drawTrail();

    window.addEventListener('resize', resizeCanvas);
}
}