/* 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