html,body{margin:0;width:100%;height:100%}body{overflow:hidden;background:#fff;color:#111;font-family:Helvetica Neue,Helvetica,Arial,sans-serif}#app{position:relative;width:100%;height:100%}canvas{position:absolute;inset:0;display:block;width:100%;height:100%}.text-layer{position:absolute;inset:0;overflow:hidden;contain:layout paint style}.text-word{position:absolute;top:0;left:0;white-space:pre;will-change:transform,color;contain:layout style paint}.footer-bar{position:absolute;right:0;bottom:0;left:0;display:flex;justify-content:center;padding:16px 20px 20px;pointer-events:none}.footer-link{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid rgba(17,17,17,.08);border-radius:999px;background:#ffffffd6;color:#111;font-size:13px;font-weight:600;letter-spacing:.02em;text-decoration:none;backdrop-filter:blur(12px);box-shadow:0 10px 30px #11111114;pointer-events:auto}.footer-link__icon{width:16px;height:16px;flex:0 0 auto}#hero-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;text-align:center;z-index:10;pointer-events:none;width:90%;max-width:1200px}#hero-text h1{font-size:clamp(70px,8vw,100px);font-weight:700;background:linear-gradient(to right,#3b82f6cc,#9ca3afcc);-webkit-background-clip:text;-webkit-text-fill-color:transparent;display:block;width:100%;text-align:center}#hero-text h2{font-size:clamp(40px,5vw,40px);margin:5px 0;background:linear-gradient(to right,#3b82f6,#9ca3af);-webkit-background-clip:text;-webkit-text-fill-color:transparent;display:block;width:100%;text-align:center}.paragraph-container{display:flex;justify-content:center;padding:0 clamp(16px,4vw,40px);margin-top:clamp(20px,5vw,60px)}.paragraph-card{text-align:center;width:100%;max-width:1200px;box-sizing:border-box;padding:clamp(16px,2.5vw,40px);background:linear-gradient(to right,#3b82f6cc,#9ca3afcc);border-radius:12px;text-align:left;color:#fff}.paragraph-card p{margin:0;font-size:clamp(14px,4vw,20px);line-height:1.6}} //-------------------------------- #hero-title,#hero-subtitle,#hero-paragraph{opacity:1;transition:opacity .6s ease-in-out,transform .6s ease-in-out}.fade-out{opacity:0;transform:translateY(8px)}function glitchSubtitle(el: HTMLElement | null,newText: string){if (!el) return el.classList.add("glitch-subtle") el.setAttribute("data-text",newText) setTimeout(() => {el.textContent = newText el.classList.remove("glitch-subtle")},160)}function updateHeroText(){const content = heroContents[heroIndex] // title & paragraph change normally if (titleEl) titleEl.textContent = content.title if (paragraphEl) paragraphEl.textContent = content.paragraph // subtitle glitches glitchSubtitle(subtitleEl,content.subtitle) heroIndex = (heroIndex + 1) % heroContents.length}setInterval(updateHeroText,4200){}