<!-- start Simple Custom CSS and JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/ScrollTrigger.min.js"></script>
<script src="https://unpkg.com/split-type"></script>

<script>
    document.addEventListener("DOMContentLoaded", () => {
        let animHeading1 = document.querySelectorAll('.hed-one');
        
        animHeading1.forEach((headingElement1, index) => {
            // Split the heading text into lines and words
            let deSplitHeading1 = new SplitType(headingElement1.querySelector("h1,h2,h3,h4,h5,h6,p"), { types: 'lines' });

            // GSAP animation for each line (line-by-line animation)
            gsap.from(deSplitHeading1.lines, {
                opacity: 0,
                y: 30, // Slide-up effect for lines
                duration: 1, // Duration for each line animation
                stagger: 0.5, // Delay between each line
                ease: "power3.out", // Smooth easing for typewriter effect
                scrollTrigger: {
                    trigger: headingElement1,
                    start: 'top 80%', // Trigger when top of the element reaches 80% of the viewport
                    end: 'bottom top',
                    scrub: false, // Smooth scroll animation
                    once: false, // Ensure it runs every time the element comes into view
                    toggleActions: "restart none none none", // Restart animation when scroll comes back up
                    onEnter: () => {
                        // After the first paragraph is completely visible, start the second paragraph animation
                        let paragraphs = headingElement1.querySelectorAll('p');
                        paragraphs.forEach((para, paraIndex) => {
                            let deSplitPara = new SplitType(para, { types: 'lines' });

                            // GSAP animation for each line of second paragraph (line-by-line animation for second paragraph)
                            gsap.from(deSplitPara.lines, {
                                opacity: 0,
                                y: 30, // Slide-up effect for lines of second paragraph
                                duration: 1, // Duration for each line animation
                                stagger: 0.5, // Delay between each line of the second paragraph
                                ease: "power3.out", // Smooth easing
                                scrollTrigger: {
                                    trigger: para,
                                    start: 'top 80%', // Start when the top of the paragraph reaches 80% of the viewport
                                    end: 'bottom top',
                                    scrub: false, // Smooth animation
                                    once: false, // Ensure it happens every time you scroll to the paragraph
                                    toggleActions: "restart none none none" // Restart animation when scrolling back up
                                }
                            });
                        });
                    }
                }
            });
        });
    });
</script>
<!-- end Simple Custom CSS and JS -->