// profile area bg text animation
const container = document.getElementById('loop-container');
const text = container.querySelector('p');
for (let i = 0; i < 10; i++) {
    container.appendChild(text.cloneNode(true));
}
const clone = container.innerHTML;
container.innerHTML += clone;

// text-animation
const textElements = document.querySelectorAll('.text-animation');
textElements.forEach((element) => {
    const text = element.textContent.trim();
    const characters = text.split('');
    element.textContent = '';
    characters.forEach((char, index) => {
        const span = document.createElement('span');
        span.textContent = char;
        span.style.setProperty('--delay', index + 1);
        element.appendChild(span);
    });
});

// animation
(function ($) {
    $(function () {
        $(".ttl-animation").each(function () {
            const txt = $(this).text();
            $(this).attr("data-text", txt).html("");
            for (let i = 0; i < 3; i++) {
                $(this).append($("<span></span>").text(txt));
            }
        });
        setTimeout(() => {
            const observer = new IntersectionObserver((entries) => {
                entries.forEach((entry) => {
                    if (entry.isIntersecting) {
                        const el = entry.target;
                        const $el = $(el);
                        if ($el.hasClass("anime")) {
                            const index = $el.closest('section').find(".anime").index(el);
                            el.style.transitionDelay = `${index * 0.1}s`;
                            el.classList.add("anime-on");
                        }
                        else if ($el.hasClass("ttl-animation")) {
                            el.classList.add("is-active");
                            $el.find("span").each(function (i) {
                                $(this).css("transition-delay", `${i * 0.8}s`);
                            });
                        }
                        observer.unobserve(el);
                    }
                });
            }, {
                threshold: 0.1,
                rootMargin: "0px 0px -50px 0px"
            });
            $(".anime, .ttl-animation").each(function () {
                observer.observe(this);
            });
        }, 100);
    });
})(jQuery);
document.addEventListener("DOMContentLoaded", () => {
  const headers = document.querySelectorAll(".accordion-header");
  headers.forEach((header) => {
    header.parentElement.classList.add("is-open");
    header.addEventListener("click", () => {
      const item = header.parentElement;
      item.classList.toggle("is-open");
    });
  });
});