<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script>

<style>
.btn-sonneto-blur .tn-atom {
display: block;
white-space: normal;
word-break: break-word;
}

.btn-sonneto-blur .tn-atom span {
display: inline-block; /* Чтобы сохранялся перенос */
white-space: inherit;
}
</style>

<script>
document.addEventListener("DOMContentLoaded", function () {
gsap.registerPlugin(ScrollTrigger);

document.querySelectorAll(".btn-sonneto-blur .tn-atom").forEach((Ttext) => {
const originalHTML = Ttext.innerHTML;
Ttext.innerHTML = "";

function wrapNodes(node) {
if (node.nodeType === Node.TEXT_NODE) {
return node.nodeValue.split(/(\s+)/).map(word => {
if (word.trim() === "") return document.createTextNode(word); // Сохраняем пробелы

const wordSpan = document.createElement("span");
wordSpan.style.display = "inline-block"; // Оставляем переносы

word.split("").forEach(char => {
const charSpan = document.createElement("span");
charSpan.textContent = char;
wordSpan.appendChild(charSpan);
});

return wordSpan;
});
} else if (node.nodeType === Node.ELEMENT_NODE && node.tagName !== "BR") {
const newElement = document.createElement(node.tagName);
Array.from(node.attributes).forEach(attr => newElement.setAttribute(attr.name, attr.value));
node.childNodes.forEach(child => wrapNodes(child).forEach(span => newElement.appendChild(span)));
return [newElement];
} else if (node.tagName === "BR") {
return [document.createElement("br")];
}
return [];
}

const tempDiv = document.createElement("div");
tempDiv.innerHTML = originalHTML;
tempDiv.childNodes.forEach(node => wrapNodes(node).forEach(span => Ttext.appendChild(span)));

const Tletters = Ttext.querySelectorAll("span span");

gsap.from(Tletters, {
filter: "blur(0.15em)",
stagger: { from: "left", each: 0.05 }, // Анимация по буквам
duration: 1.25,
ease: "power2.inOut",
scrollTrigger: {
trigger: Ttext,
start: "top 80%",
toggleActions: "play none none none"
}
});

gsap.from(Tletters, {
xPercent: 10,
opacity: 0,
stagger: { from: "left", each: 0.05 },
duration: 1,
ease: "power2.out",
scrollTrigger: {
trigger: Ttext,
start: "top 80%",
toggleActions: "play none none none"
}
});
});
});

</script>