<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>

<style>
  .trail-image {. /*השנו לקלאס של התמונות*/
    pointer-events: none;
    z-index: 9999;
    left:0;
    top:0;
  }
</style>


<script>
const images = document.querySelectorAll(".trail-image");  //שנו לקלאס של התמונות
const container = document.querySelector(".trail-wrapper"); // שנו לקלאס של הקונטיינר

let mouseX = 0, mouseY = 0;
let isInside = false;

container.addEventListener("mouseenter", () => {
  isInside = true;
  images.forEach(img => img.style.position = "fixed"); 
});

container.addEventListener("mouseleave", () => {
  isInside = false;
  images.forEach(img => img.style.position = "relative"); 
});

container.addEventListener("mousemove", (e) => {
  if (!isInside) return;
  mouseX = e.clientX;
  mouseY = e.clientY;
});

images.forEach((img, i) => {
  let posX = 0, posY = 0;
  const speed = 0.15 - i * 0.02;

  gsap.ticker.add(() => {
    if (!isInside) return;
    posX += (mouseX - posX) * speed;
    posY += (mouseY - posY) * speed;
    gsap.set(img, { x: posX, y: posY });
  });
});


</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>

<style>
  .trail-image {  /*השנו לקלאס של התמונות*/
    pointer-events: none;
    z-index: 9999;
    left: 0;
    top: 0;
    position: fixed; 
  }
</style>

<script>
const images = document.querySelectorAll(".trail-image");  //שנו לקלאס של התמונות

let mouseX = 0, mouseY = 0;

document.addEventListener("mousemove", (e) => {
  mouseX = e.clientX;
  mouseY = e.clientY;
});

images.forEach((img, i) => {
  let posX = 0, posY = 0;
  const speed = 0.15 - i * 0.02;

  gsap.ticker.add(() => {
    posX += (mouseX - posX) * speed;
    posY += (mouseY - posY) * speed;
    gsap.set(img, { x: posX, y: posY });
  });
});
</script>

<style>
  .follower {. /*השנו לקלאס של האייקון*/
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 9999;

  }

</style>

<script>
document.addEventListener("DOMContentLoaded", () => {
  const follower = document.querySelector(".follower"); //השנו לקלאס של האייקון
const targets = document.querySelectorAll("a, button");// הוסיפו קלאסים של אלמנטים לחיצים נוספים אם יש צורך


  let mouseX = 0, mouseY = 0;
  let posX = 0, posY = 0;

  document.addEventListener("mousemove", (e) => {
    mouseX = e.clientX;
    mouseY = e.clientY;
  });

  gsap.ticker.add(() => {
    posX += (mouseX - posX) * 0.2;
    posY += (mouseY - posY) * 0.2;
    gsap.set(follower, { x: posX - 10, y: posY - 10 }); //  כדי לקבוע איפה העיגול ביחס לסמן
  });

targets.forEach(btn => {
  btn.addEventListener("mouseenter", () => {
    gsap.to(follower, {
      scale: 2,  //להגדיל את העיגול במעבר על אלמנט לחיץ
      opacity: 0.5, //הופך את העיגול לשקיפות של 50% במעבר ע אלמנט לחיץ
      duration: 0.3,
      ease: "power2.out"
    });
  });

  btn.addEventListener("mouseleave", () => {
    gsap.to(follower, {
      scale: 1,
      opacity: 1,
      borderColor: "transparent",
      duration: 0.3,
      ease: "power2.out"
    });
  });
});
});
</script>