
function customRevealTextOnClass(element) {
    if (element.classList.contains('show') && !element.classList.contains('animated')) {
        const text = element.innerText;
        const lines = text.split('\n');

        element.innerHTML = '';

        const childLines = [];

        lines.forEach(line => {
            const parent = document.createElement('div');
            parent.classList.add('split-parent');
            parent.style.display = 'block';
            // parent.style.textAlign = 'start';
            parent.style.position = 'relative';

            const child = document.createElement('div');
            child.classList.add('split-child');
            child.style.display = 'block';
            // child.style.textAlign = 'start';
            child.style.position = 'relative';
            child.style.transform = 'translate(0px, 0px)';

            const words = line.split(' ');
            words.forEach((word, wordIndex) => {
                const wordContainer = document.createElement('div');
                wordContainer.style.position = 'relative';
                wordContainer.style.display = 'inline-block';
                [...word].forEach(letter => {
                    const letterContainer = document.createElement('div');
                    letterContainer.style.position = 'relative';
                    letterContainer.style.display = 'inline-block';
                    letterContainer.textContent = letter;
                    wordContainer.appendChild(letterContainer);
                });
                child.appendChild(wordContainer);

                if (wordIndex !== words.length - 1) {
                    const space = document.createTextNode(' ');
                    child.appendChild(space);
                }
            });
            parent.appendChild(child);
            element.appendChild(parent);
            childLines.push(child); 
        });

        // GSAP animation
        gsap.from(childLines, {
            duration: 2.5,
            yPercent: 200,
            ease: "power2",
            stagger: 0.1
        });

        // Mark the element as animated by adding 'animated' class
        element.classList.add('animated');
    }
}

const observer = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            const element = entry.target;
            element.classList.add('show');
            customRevealTextOnClass(element);
            observer.unobserve(element);
        }
    });
}, { threshold: 0.5 });

// Observe all elements with the class 'text-animation'
document.querySelectorAll('.text-animation').forEach(element => {
    observer.observe(element);
});

