/* White base under PNG */
position: absolute; inset: 0; z-index: 1; pointer-events: none; /* above white base */
/* WARNING styles */
/* Sequence lines */
opacity: .3; transform: translateY(6px); /* start at 0.3 → animate to 1 */
/* ABSOLUTE marquees — free positioning */
width: 950px; /* your sizes */
opacity: 0; /* start hidden for timeline */
transform: translateY(20px); /* small drop-in */
// Build the three lines (robust split that truly returns words)
const words = (line.match(/\S+/g) || []); // split by non-space runs
// Prepare marquee content
// TIMELINE — sequence
// Start state
gsap.set('.sequence .word', { autoAlpha: 0.3, y: 6 }); // start at 0.3 opacity
// 1) After 0.5s, show big title dropping 50px & fading in
// 2) Word-by-word reveal — TOTAL text duration = 2s (continuous across all lines)
const totalTextDuration = 2; // seconds for ALL words
duration: 0.35, // each word’s fade/move
stagger: staggerTime, // spreads over 2s total
// 3) 0.5s later, show the boxes one after another
// 4) After everything finishes + 1s, slide preloader up & remove
// Optional: helper to dismiss early