<!DOCTYPE html>
<html>
<head>
  <title>Sound!</title>
  <style>
    body {
      background-image: url('/background.png'); /* Replace with your image path */
      background-size: cover; /* Cover the entire area */
      background-position: center; /* Center the image */
      display: flex;
      flex-direction: column;
      align-items: center;
      min-height: 100vh;
      font-family: Cursive;
      cursor: none;
    }

    h1 {
      font-size: 2.5em;
      background: linear-gradient(135deg, #25909e, #e9a107);
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
      margin-top: 0.5em; /* Adjust top margin for spacing */
      position: relative; /* Key for positioning the pseudo-element */
    }

    h1::after {
      content: '';
      position: absolute;
      bottom: -2px; /* Closer to the text */
      left: 10%;
      width: 80%;
      height: 3px;
      background: linear-gradient(to right, #eb8b05, #057969);
    }

    .cursor-dot {
      position: absolute;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      pointer-events: none; /* Disable pointer events */
      z-index: 9998; /* Behind the text */
      transform: translate(-50%, -50%);
      animation: moveDot 1s linear infinite;
      transition: left 0.2s ease-out, top 0.2s ease-out;
    }

    /* Gradient animation for the dot */
    @keyframes moveDot {
      0%, 100% {
        background: radial-gradient(circle at center, #021118, #029be2);
      }
      50% {
        background: radial-gradient(circle at center, #021118, #d6a606);
      }
    }

    /*
    .cursor-circle {
      position: absolute;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: linear-gradient(135deg, #01272c, #029be2);
      pointer-events: none;
      opacity: 0.9;
      z-index: 9999;
      transform: translate(-50px, -50px) rotate(15deg);
      transition: left 0.4s ease-out, top 0.4s ease-out, transform 0.8s ease-out;
      animation: tumbleCircle 4s ease-in-out infinite;
    }
    */

    /*
    @keyframes tumbleCircle {
      0% { transform: translate(-50%, -50%) rotate(15deg); }
      25% { transform: translate(-50%, -50%) rotate(-5deg); }
      50% { transform: translate(-50%, -50%) rotate(10deg); }
      75% { transform: translate(-50%, -50%) rotate(-10deg); }
      100% { transform: translate(-50%, -50%) rotate(15deg); }
    }
    */

    /*
    .cursor-circle:hover {
      animation-play-state: paused;
    }
    */

    .circle {
      height: 40px;
      width: 40px;
      border-radius: 50%;
      background: linear-gradient(135deg, #01272c, #029be2);
      position: fixed;
      top: 0;
      left: 0;
      pointer-events: none;
      z-index: 9999; /* So that it stays on top of all other elements */
      opacity: 0.8;
    }

  </style>
</head>
<body>
  <div class="cursor-dot"></div>
  <!-- <div class="cursor-circle"></div> -->

  <!-- Create 6 additional circle elements for the trail effect -->
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>

  <h1>About Sound!</h1> 

  <script>
    const coords = { x: 0, y: 0 };
    const circles = document.querySelectorAll(".circle");

    circles.forEach(function (circle) {
      circle.x = 0;
      circle.y = 0;
    });

    window.addEventListener("mousemove", function(e) {
      coords.x = e.clientX;
      coords.y = e.clientY;

      // Move cursor-dot immediately
      const dot = document.querySelector(".cursor-dot");
      dot.style.left = e.pageX + "px";
      dot.style.top = e.pageY + "px";
    });

    function animateCircles() {
      let x = coords.x;
      let y = coords.y;

      circles.forEach(function (circle, index) {
        circle.style.left = x - 20 + "px";
        circle.style.top = y - 20 + "px";

        circle.style.scale = (circles.length - index) / circles.length;

        circle.x = x;
        circle.y = y;

        const nextCircle = circles[index + 1] || circles[0];
        x += (nextCircle.x - x) * 0.3;
        y += (nextCircle.y - y) * 0.3;
      });

      requestAnimationFrame(animateCircles);
    }

    animateCircles();

    document.addEventListener("mousemove", function(event) {
      const dot = document.querySelector(".cursor-dot");
      // const circle = document.querySelector(".cursor-circle");
      dot.style.left = event.pageX + "px";
      dot.style.top = event.pageY + "px";
      // Delay for the bigger circle to follow
      // setTimeout(function() {
       // circle.style.left = event.pageX + "px";
       // circle.style.top = event.pageY + "px";
      // }, 60); // 100ms delay (adjust as needed)
      // Circle Movement (longer delay)
    });
  </script>
</body>
</html>

first move the dot and move other circle