const marquee = document.getElementById("marquee");
let scrollX = 0;
let speed = 1; // px per frame

// Duplicate content initially to ensure seamless scroll
marquee.innerHTML += marquee.innerHTML;

function loopMarquee() {
  scrollX += speed;
  marquee.style.transform = `translateX(-${scrollX}px)`;

  // Reset logic: if first image completely out of view, move it to end
  const firstImg = marquee.children[0];
  const firstImgWidth = firstImg.offsetWidth + 48; // 48px = approx 3rem gap

  if (scrollX >= firstImgWidth) {
    marquee.appendChild(firstImg); // move first to end
    scrollX -= firstImgWidth;      // reset scrollX
    marquee.style.transform = `translateX(-${scrollX}px)`; // prevent jump
  }

  requestAnimationFrame(loopMarquee);
}

loopMarquee();