<script>
// gsp development
document.addEventListener('DOMContentLoaded', function() {
  // отключаем на тач-устройствах
  if (window.matchMedia('(hover: none)').matches) return;

  var maxLen = 18;          // длина шлейфа (5–40)
  var dotSize = 14;         // толщина, px (4–30)
  var color = '#ff5a3c';    // цвет шлейфа

  // создаём canvas поверх всей страницы
  var canvas = document.createElement('canvas');
  canvas.style.cssText = 'position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:99999;';
  document.body.appendChild(canvas);
  var ctx = canvas.getContext('2d');

  function resize() {
    canvas.width = window.innerWidth * window.devicePixelRatio;
    canvas.height = window.innerHeight * window.devicePixelRatio;
    ctx.setTransform(1, 0, 0, 1, 0, 0);
    ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
  }
  resize();
  window.addEventListener('resize', resize);

  var trail = [];
  var mouse = { x: -1000, y: -1000, active: false };

  document.addEventListener('mousemove', function(e) {
    mouse.x = e.clientX;
    mouse.y = e.clientY;
    mouse.active = true;
  });
  document.addEventListener('mouseleave', function() { mouse.active = false; });

  var m = color.replace('#', '');
  var rgb = [parseInt(m.slice(0,2),16), parseInt(m.slice(2,4),16), parseInt(m.slice(4,6),16)];

  function tick() {
    if (mouse.active) trail.push({ x: mouse.x, y: mouse.y });
    while (trail.length > maxLen) trail.shift();

    ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);
    for (var i = 0; i < trail.length; i++) {
      var t = i / trail.length;
      var size = dotSize * (0.3 + t * 0.7);
      ctx.beginPath();
      ctx.arc(trail[i].x, trail[i].y, size, 0, Math.PI * 2);
      ctx.fillStyle = 'rgba(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ',' + (t * 0.9) + ')';
      ctx.fill();
    }
    requestAnimationFrame(tick);
  }
  tick();
});
</script>