// Wait until DOM is ready
document.addEventListener("DOMContentLoaded", () => {
  // If SplitType is needed — register and split into lines
  document
    .querySelectorAll("[data-headline-split-appear-hero]")
    .forEach((el) => {
      new SplitType(el, {
        types: "lines",
        lineClass: "line",
      });
    });

  // Collect all element groups
  const firstElsHero = document.querySelectorAll("[data-first-el-appear-hero]");
  const opacityElsHero = document.querySelectorAll(
    "[data-opacity-el-appear-hero]"
  );
  const linesHero = document.querySelectorAll(
    "[data-headline-split-appear-hero] .line"
  );
  const secondElsHero = document.querySelectorAll(
    "[data-second-el-appear-hero]"
  );

  // If nothing exists — exit
  if (!firstElsHero.length && !linesHero.length && !secondElsHero.length)
    return;

  // Create GSAP timeline
  const tlHero = gsap.timeline();

  // 1) First elements: opacity 0 → 1
  if (firstElsHero.length) {
    tlHero.to(firstElsHero, {
      opacity: 1,
      duration: 1,
      ease: "power2.out",
    });
  }

  // 1.1) Opacity group: opacity 0 → 1 instantly
  if (opacityElsHero.length) {
    tlHero.to(
      opacityElsHero,
      {
        opacity: 1,
        duration: 0,
        ease: "power2.out",
      },
      0
    );
  }

  // 2) Headline lines: y=20 → 0, opacity 0 → 1 with stagger, start at 0.1s
  if (linesHero.length) {
    tlHero.to(
      linesHero,
      {
        y: 0,
        opacity: 1,
        duration: 1,
        ease: "power2.out",
        stagger: 0.2,
      },
      0.1
    );
  }

  // 3) Second elements: y=20 → 0, opacity 0 → 1 with stagger, start at 0.4s
  if (secondElsHero.length) {
    tlHero.to(
      secondElsHero,
      {
        y: 0,
        opacity: 1,
        duration: 1,
        ease: "power2.out",
        stagger: 0.1,
      },
      0.4
    );
  }
});

/*Animation under globus Start*/

document.addEventListener("DOMContentLoaded", () => {
  const wrapper = document.querySelector(".animation-under-spline-wrapper");
  if (!wrapper) return;

  const images = gsap.utils.toArray(".paymant-img-anime");
  const appear = 0.4; // per design: 0.4s
  const visible = 4; // visible on screen: 4s
  const disappear = 0.3; // fade-out: 0.3s

  const cycle = appear + visible + disappear; // ≈4.7s
  const initialDelay = 1.9;

  // Initial state for all images
  gsap.set(images, { opacity: 0, y: 20 });

  // Create timeline
  const tl = gsap.timeline({
    repeat: -1,
    delay: initialDelay,
  });

  images.forEach((img, i) => {
    const t0 = i * cycle;

    // appearance
    tl.to(
      img,
      {
        opacity: 1,
        y: 0,
        duration: appear,
      },
      t0
    );

    // hold
    tl.to(
      img,
      {
        opacity: 1,
        duration: visible,
      },
      t0 + appear
    );

    // disappearance
    tl.to(
      img,
      {
        opacity: 0,
        y: 20,
        duration: disappear,
      },
      t0 + appear + visible
    );
  });
});
/*Animation under globus End*/