<style>
  /* Скрываем системный курсор */
  * {
    cursor: none !important;
  }

  /* --- Кастомный курсор — неоновый зеленый шарик --- */
  .custom-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 16px;
    height: 16px;
    background-color: #2fc118; /* зеленый для светлой темы */
    border-radius: 50%;
    pointer-events: none;
    z-index: 99999999;
    transform: translate(-50%, -50%);
    box-shadow:
      0 0 5px #2fc118,
      0 0 15px #2fc118,
      0 0 30px #2fc118,
      0 0 40px #2fc118;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
  }

  /* --- Контейнер для следов (трейлов) --- */
  .cursor-trail {
    position: fixed;
    width: 14px;
    height: 14px;
    background-color: #2fc118; /* зеленый для светлой темы */
    border-radius: 50%;
    pointer-events: none;
    z-index: 99999997;
    opacity: 0.5;
    box-shadow:
      0 0 6px #2fc118,
      0 0 12px #2fc118,
      0 0 20px #2fc118;
    transform: translate(-50%, -50%);
    transition: opacity 0.5s ease-out;
  }

  /* --- Стили для тёмной темы — более тёмный зеленый --- */
  @media (prefers-color-scheme: dark) {
    .custom-cursor {
      background-color: #1d850e;
      box-shadow:
        0 0 5px #1d850e,
        0 0 15px #1d850e,
        0 0 30px #1d850e,
        0 0 40px #1d850e;
    }

    .cursor-trail {
      background-color: #1d850e;
      box-shadow:
        0 0 6px #1d850e,
        0 0 12px #1d850e,
        0 0 20px #1d850e;
    }
  }

  /* --- Отключаем кастомный курсор и следы на мобильных устройствах --- */
  @media (max-width: 768px) {
    .custom-cursor,
    .cursor-trail {
      display: none !important;
    }
  }
</style>

<script>
  document.addEventListener("DOMContentLoaded", () => {
    // Создаем кастомный курсор
    const cursor = document.createElement("div");
    cursor.classList.add("custom-cursor");
    document.body.appendChild(cursor);

    // Массив для хранения следов курсора (трейлов)
    const trails = [];
    const maxTrails = 15; // Максимальное количество одновременно отображаемых следов

    // Изначальная позиция курсора — центр экрана
    let mouseX = window.innerWidth / 2;
    let mouseY = window.innerHeight / 2;

    // Обновление позиции кастомного курсора
    function updateCursorPosition() {
      cursor.style.transform = `translate(${mouseX}px, ${mouseY}px) translate(-50%, -50%)`;
    }

    // Создаем след (трейл) в точке (x, y)
    function createTrail(x, y) {
      const trail = document.createElement("div");
      trail.classList.add("cursor-trail");
      trail.style.left = `${x}px`;
      trail.style.top = `${y}px`;

      document.body.appendChild(trail);
      trails.push(trail);

      // Запускаем плавное исчезновение
      setTimeout(() => {
        trail.style.opacity = '0';
      }, 20);

      // Удаляем элемент после анимации исчезновения (около 500ms)
      setTimeout(() => {
        trail.remove();
        const index = trails.indexOf(trail);
        if (index > -1) trails.splice(index, 1);
      }, 520);

      // Если следов стало слишком много — удаляем самый старый
      if (trails.length > maxTrails) {
        const oldTrail = trails.shift();
        oldTrail.remove();
      }
    }

    // Обработчик движения мыши — обновляем позицию и создаем след
    document.addEventListener("mousemove", e => {
      mouseX = e.clientX;
      mouseY = e.clientY;
      updateCursorPosition();
      createTrail(mouseX, mouseY);
    });

    // Начальная установка позиции курсора при загрузке страницы
    updateCursorPosition();
  });
</script>