// Features Scroll Animation
document.addEventListener("DOMContentLoaded", function () {
    const featureContainer = document.querySelector(".features_animation");
    
    if (featureContainer) {
      const cards = document.querySelectorAll(".features_animation .feature_item_inner");
  
      // Set initial top positions like jQuery did
      cards.forEach((card, index) => {
        card.style.top = `${50 + index * 15}px`;
      });
  
      // Convert NodeList to an array for GSAP utilities
      const cardArray = Array.from(cards);
  
      cardArray.forEach((card, index) => {
        gsap.to(card, {
          scrollTrigger: {
            trigger: card,
            start: "top bottom-=100",
            end: "top top+=40",
            scrub: true,
            markers: false,
            invalidateOnRefresh: true,
          },
          ease: "none",
          scale: () => 1 - (cardArray.length - index) * 0.025,
        });
  
        ScrollTrigger.create({
          trigger: card,
          start: "top top",
          pin: true,
          pinSpacing: false,
          markers: false,
          id: "pin",
          end: "max",
          invalidateOnRefresh: true,
        });
      });
    }
  });