addEventListener("DOMContentLoaded", (e) => {

  // SplitText.create(["#title1", "#title2", "#title3", "#title4"],{
  //   type: "words, chars, lines",
  //   onSplit(self) {
  //     gsap.from(self.chars, {
  //       y: 100,
  //       duration: 0.5,
  //       stagger: 0.01,
  //       ease: "back.out",
  //       opacity: 0
  //     });
  //   }
  // });

// const words = ["Marketing", "Branding", "Webdesign"];

// let masterTl = gsap.timeline({
//   delay: 0.5
// });

// // Flag, um zu prüfen, ob es das letzte Wort ist
// words.forEach((word, index) => {
//   let tl;

//   if (index === words.length - 1) {
//     // Letztes Wort → keine yoyo-Animation
//     tl = gsap.timeline();
//     tl.to('#title4', {
//       duration: 1,
//       text: word,
//       onComplete: () => {
//         masterTl.pause(); // hier pausierst du die gesamte Timeline
//       }
//     });
//   } else {
//     // Alle anderen Wörter → yoyo
//     tl = gsap.timeline({
//       repeat: 1,
//       yoyo: true,
//       repeatDelay: 1.5
//     });

//     tl.to('#title4', {
//       duration: 1,
//       text: word
//     });
//   }

//   masterTl.add(tl);
// });

const words = ["Marketing", "Branding", "Webdesign"];

let masterTl = gsap.timeline({
  delay: 0.5
});

words.forEach((word, index) => {
  const isLast = index === words.length - 1;

  let tl = gsap.timeline();

  // 1. Text setzen, Clip-Path auf komplett verdeckt (von rechts)
  tl.set("#title4", {
    text: word,
    clipPath: "inset(0 100% 0 0)"
  });

  // 2. Clip-Path animieren → reveal von links nach rechts
  tl.to("#title4", {
    duration: 0.7,
    clipPath: "inset(0 0% 0 0)",
    ease: "sine.inOut"
  });

  if (!isLast) {
    // Nach kurzer Zeit Balken wieder schließen
    tl.to("#title4", {
      duration: 0.7,
      clipPath: "inset(0 100% 0 0)",
      ease: "sine.inOut"
    }, "+=1.5");
  } else {
    // Beim letzten Wort Timeline anhalten
    tl.to({}, { duration: 0, onComplete: () => masterTl.pause() });
  }

  masterTl.add(tl);
});

// Timeline definieren
const tlHand = gsap.timeline({
  scrollTrigger: {
    trigger: ".hand",
    start: "center 35%", // Mitte der Hand trifft Mitte des Viewports
    toggleActions: "restart none none restart",
    markers: false
  },
  repeat: 0,
  repeatDelay: 3
});

tlHand
  .to(".hand", { rotate: 20, duration: 0.15, ease: "power1.inOut" })
  .to(".hand", { rotate: -20, duration: 0.15, ease: "power1.inOut" })
  .to(".hand", { rotate: 20, duration: 0.15, ease: "power1.inOut" })
  .to(".hand", { rotate: -20, duration: 0.15, ease: "power1.inOut" })
  .to(".hand", { rotate: 20, duration: 0.15, ease: "power1.inOut" })
  .to(".hand", { rotate: 0, duration: 0.15, ease: "power1.inOut" });

  //Drag interaction

// Drag-Verhalten mit Trägheit
Draggable.create(["#drag-image-1", "#drag-image-2", "#drag-image-3"], {
  bounds: "#container-intro",
  inertia: true,
  type: "x,y",
  edgeResistance: 0.65,
  throwResistance: 1000,
  zIndexBoost: false
});

const dragElements = document.querySelectorAll("#drag-image-1, #drag-image-2, #drag-image-3");
const container = document.getElementById("container-intro");

window.addEventListener("scroll", () => {
  const rect = container.getBoundingClientRect();

  if (rect.bottom < 0) {
    dragElements.forEach(el => {
      gsap.to(el, {
        x: 0,
        y: 0,
        duration: 0.6,
        ease: "power3.out"
      });
    });
  }
});

const timelineImage = gsap.timeline({
  scrollTrigger: {
    trigger: "#drag-image-1",
    start: "top 60%", // z. B. wenn die Sektion zu 60% sichtbar ist
    toggleActions: "play none none none", // spielt beim Scroll rein, reverset beim Scroll raus
    markers: false
  }
});

timelineImage
  .to("#drag-image-1", { rotation: -5, x: 0, y: 0, scale: 0.98, duration: 0.4 }, 0)
  .to("#drag-image-2", { rotation: 0, x: 0, y: 0, scale: 1, duration: 0.4 }, 0)
  .to("#drag-image-3", { rotation: 5, x: 0, y: 0, scale: 0.98, duration: 0.4 }, 0);
 });