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, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.84);
  color: #111;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 30px rgba(17, 17, 17, 0.08);
  pointer-events: auto;
}

.footer-link__icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

/* Hero text layer------------------------------ */
#hero-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: white;
  z-index: 10;
  pointer-events: none;
  width: 90%;       /* optional, keeps text wrapped */
  max-width: 1200px;
}

#hero-text h1 {
  font-size: 100px;
  font-weight: bold;
  background: linear-gradient(to right, #3b82f6, #9ca3af);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#hero-text h2 {
  font-size: 40px; /* make it bigger */
  margin: 10px 0;
  background: linear-gradient(to right, #3b82f6, #9ca3af);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}


#hero-text p {
  font-size: 20px;
  margin: 10px 0 0 0;
  color: white;                /* plain white text */
  //-webkit-background-clip: unset;
  -webkit-text-fill-color: unset;
}

.paragraph-card {
  display: block;
  width: 95%;              /* almost full width */
  max-width: 1200px;       /* optional max width for large screens */
  padding: 25px 40px;      /* more padding for bigger look */
  background: linear-gradient(to right, rgba(59,130,246,0.8), rgba(156,163,175,0.8)); /* lower opacity */
//background: linear-gradient(to right, #3b82f6, #9ca3af);
  border-radius: 12px;
  margin: 20px auto 0 auto; /* center horizontally */
  text-align: left;
}

.paragraph-card p {
  margin: 0;
  font-size: 24px;          /* slightly bigger text */
  color: white;
  line-height: 1.6;
  word-wrap: break-word;
}
#hero-title, #hero-subtitle, #hero-paragraph {
  transition: opacity 0.6s ease-in-out;
  opacity: 1;
}
.hidden {
  opacity: 0;
}
//--------------------------------

#hero-title,
#hero-subtitle,
#hero-paragraph {
  opacity: 1;
  transition: opacity 0.6s ease-in-out, transform 0.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)