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

document.addEventListener("DOMContentLoaded", function () {
  // Warte 2 Sekunden
  setTimeout(() => {
    const startCards = document.querySelectorAll('.flip-card[data-flip-id]');
    const endContainers = document.querySelectorAll('.flip-card-fin[data-flip-id]');

    // Map: data-flip-id => Ziel-Container
    const endMap = {};
    endContainers.forEach(el => {
      const id = el.getAttribute("data-flip-id");
      if (id) endMap[id] = el;
    });

    // Zustand vor dem Verschieben speichern
    const state = Flip.getState('.flip-card[data-flip-id]');

    // Elemente verschieben
    startCards.forEach(card => {
      const id = card.getAttribute("data-flip-id");
      const target = endMap[id];

      if (target && card !== target) {
        target.appendChild(card); // Verschiebe das Element physisch ins Ziel
      }
    });

    // Flip Animation starten
    Flip.from(state, {
      duration: 1,
      ease: "power2.inOut",
      absolute: true, // Für präzisere Bewegungen
      stagger: 0.05
    });

  }, 2000); // Verzögerung in ms
});