document.addEventListener("DOMContentLoaded", (event) => {
    gsap.registerPlugin(MotionPathPlugin);
  
    // Start Animation infini 
    const images = [
      document.querySelector(".onramp-img-1"), // dollar
      document.querySelector(".onramp-dot-1"), // dot
      document.querySelector(".onramp-img-2"), // bitcoin
      document.querySelector(".onramp-dot-2"), // dot
      document.querySelector(".onramp-img-3"), // euro
      document.querySelector(".onramp-dot-3"), // dot
      document.querySelector(".onramp-img-4"), // ether
      document.querySelector(".onramp-dot-4"), // dot
      document.querySelector(".onramp-img-5"), // pound
      document.querySelector(".onramp-dot-5"), // dot
      document.querySelector(".onramp-img-6"),  // usdt
      document.querySelector(".onramp-dot-6"), // dot
    ];
  
    const numImages = images.length;
    const duration = 25; // Duration of one complete cycle
  
    images.forEach((image, index) => {
      const startOffset = index / numImages;
  
      gsap.to(image, {
        duration: duration,
        repeat: -1,
        ease: "linear",
        motionPath: {
          path: "#path-infinity",
          align: "#path-infinity",
          alignOrigin: [0.5, 0.5],
          autoRotate: false,
          start: startOffset,
          end: startOffset + 1
        },
      });
    });
    // End Animation infini 

    // Start animation X
    const xTl = gsap.timeline({repeat: -1, repeatDelay: 0});

    gsap.set(".x-dot-lvl-1", {opacity: 1});
    gsap.set(".x-dot-lvl-2", {opacity: 0.62});
    gsap.set(".x-dot-lvl-3", {opacity: 0.24});

    xTl.to(".x-dot-lvl-1", {opacity: 0.24, duration: 0.75}, 0)
       .to(".x-dot-lvl-2", {opacity: 1, duration: 0.75}, 0)
       .to(".x-dot-lvl-3", {opacity: 0.62, duration: 0.75}, 0)

       .to(".x-dot-lvl-1", {opacity: 0.62, duration: 0.75}, 0.75)
       .to(".x-dot-lvl-2", {opacity: 0.24, duration: 0.75}, 0.75)
       .to(".x-dot-lvl-3", {opacity: 0.62, duration: 0.75}, 0.75)

       .to(".x-dot-lvl-1", {opacity: 0.1, duration: 0.75}, 1.5)
       .to(".x-dot-lvl-2", {opacity: 0.62, duration: 0.75}, 1.5)
       .to(".x-dot-lvl-3", {opacity: 0.24, duration: 0.75}, 1.5);
    // End animation X

    // Start animation Pay-in Pay-out
    const payPath = document.querySelectorAll(".pay-item-svg .pay-path");

    const payTl = gsap.timeline({
      repeat: -1, 
      repeatDelay: 0
    });

    gsap.set(payPath, {opacity: 0});

    payTl.to(payPath, {
      opacity: 1, 
      duration: 0.25, 
      stagger: {
        each: 0.05,
      }
    });
    payTl.to(payPath, {
      opacity: 0, 
      duration: 0.25, 
      stagger: {
        each: 0.05,
      }
    });

    const payDot1 = document.querySelector(".pay-dot.is-1");
    const payDot2 = document.querySelector(".pay-dot.is-2");
    const payDot3 = document.querySelector(".pay-dot.is-3");
    const payDot4 = document.querySelector(".pay-dot.is-4");
    const payDot5 = document.querySelector(".pay-dot.is-5");
    const payDot6 = document.querySelector(".pay-dot.is-6");
    const payDot7 = document.querySelector(".pay-dot.is-7");
    const payDot8 = document.querySelector(".pay-dot.is-8");

    const payDotTl = gsap.timeline({
      repeat: -1,
      repeatDelay: 0
    });

    payDotTl.to(payDot1, {
      ease: "linear",
      duration: 5,
      motionPath: {
        path: "#pay-line-1",
        align: "#pay-line-1",
        alignOrigin: [0.5, 0.5],
        autoRotate: false,
      },
    }, 0);
    payDotTl.to(payDot2, {
      ease: "linear",
      duration: 5,
      motionPath: {
        path: "#pay-line-2",
        align: "#pay-line-2",
        alignOrigin: [0.5, 0.5],
        autoRotate: false,
      },
    }, 0);
    payDotTl.to(payDot3, {
      ease: "linear",
      duration: 5,
      motionPath: {
        path: "#pay-line-3",
        align: "#pay-line-3",
        alignOrigin: [0.5, 0.5],
        autoRotate: false,
      },
    }, 0);

    payDotTl.to(payDot4, {
      ease: "linear",
      duration: 5,
      motionPath: {
        path: "#pay-line-4",
        align: "#pay-line-4",
        alignOrigin: [0.5, 0.5],
        autoRotate: false,
        start: 1,
        end: 0,
      },
    }, 4);
    payDotTl.to(payDot5, {
      ease: "linear",
      duration: 5,
      motionPath: {
        path: "#pay-line-5",
        align: "#pay-line-5",
        alignOrigin: [0.5, 0.5],
        autoRotate: false,
        start: 1,
        end: 0,
      },
    }, 4);
    payDotTl.to(payDot6, {
      ease: "linear",
      duration: 5,
      motionPath: {
        path: "#pay-line-6",
        align: "#pay-line-6",
        alignOrigin: [0.5, 0.5],
        autoRotate: false,
      },
    }, 4);
    payDotTl.to(payDot7, {
      ease: "linear",
      duration: 5,
      motionPath: {
        path: "#pay-line-7",
        align: "#pay-line-7",
        alignOrigin: [0.5, 0.5],
        autoRotate: false,
        start: 1,
        end: 0,
      },
    }, 4);
    payDotTl.to(payDot8, {
      ease: "linear",
      duration: 5,
      motionPath: {
        path: "#pay-line-8",
        align: "#pay-line-8",
        alignOrigin: [0.5, 0.5],
        autoRotate: false,
        start: 1,
        end: 0,
      },
    }, 4);
    // End animation Pay-in Pay-out


    
});