document.addEventListener("DOMContentLoaded", () => {
const words = document.querySelectorAll(".wolt-words .word");
if (!words.length) return;
const interval = 2600; // how long each word stays
const letterDelay = 70; // staggered fade per letter
// wrap each letter in a span
words.forEach(word => {
const letters = word.textContent.split("").map(l => {
const span = document.createElement("span");
span.classList.add("letter");
span.textContent = l;
return span;
});
word.textContent = "";
letters.forEach(l => word.appendChild(l));
});
let index = 0;
words[index].classList.add("active");
revealLetters(words[index]);
function revealLetters(wordEl) {
const letters = wordEl.querySelectorAll(".letter");
letters.forEach((l, i) =>
setTimeout(() => l.classList.add("visible"), i * letterDelay)
);
}
function hideLetters(wordEl) {
const letters = wordEl.querySelectorAll(".letter");
letters.forEach((l, i) =>
setTimeout(() => l.classList.remove("visible"), i * letterDelay)
);
}
setInterval(() => {
const current = words[index];
const next = words[(index + 1) % words.length];
hideLetters(current);
setTimeout(() => {
current.classList.remove("active");
current.classList.add("exit");
next.classList.remove("exit");
next.classList.add("active");
revealLetters(next);
index = (index + 1) % words.length;
}, letters.length * letterDelay);
}, interval);
});
