/* hero.css — Phase 1 */
.hero {
  position: relative;
  min-height: 100vh;
  height: 100vh;
  align-items: center;
  text-align: center;
  overflow: hidden;
}

.hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1rem, 3vh, 2.2rem);
}

.hero__wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-4);
  letter-spacing: 0.04em;
  line-height: 0.9;
  /* Crisp gradient type floating inside the galaxy's ring of light.
     Layered shadows render the text's silhouette as a soft aura behind
     the clipped gradient fill; the oversized gradient drifts slowly so
     light appears to travel through the letters. */
  background: linear-gradient(105deg,
    #ffffff 0%, #e8ecff 22%, #b39aff 45%, var(--purple) 62%,
    var(--cyan) 82%, #eaf9ff 100%);
  background-size: 220% 100%;
  animation: wordmarkSheen 14s var(--ease-in-out-cubic) infinite;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow:
    0 0 26px rgba(140, 234, 255, 0.18),
    0 0 90px rgba(123, 47, 255, 0.38),
    0 0 200px rgba(0, 245, 255, 0.14);
  opacity: 0;
  transform: translateY(20px);
}
.webgl-active .hero__wordmark { opacity: 1; }
.no-webgl .hero__wordmark { opacity: 1 !important; transform: none; }

@keyframes wordmarkSheen {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.hero__tagline {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-1);
  min-height: 1.4em;
  color: var(--white);
}
.hero__tagline .caret {
  display: inline-block;
  width: 3px; height: 1em;
  margin-left: 4px;
  background: var(--cyan);
  vertical-align: text-bottom;
  animation: caretBlink 1s steps(1) infinite;
  box-shadow: 0 0 8px var(--cyan);
}
@keyframes caretBlink { 50% { opacity: 0; } }

.hero__subtagline {
  font-size: var(--step-0);
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.02em;
  max-width: 40ch;
  opacity: 0;
}

/* Scroll indicator */
.scroll-indicator {
  position: absolute;
  bottom: clamp(2rem, 6vh, 4rem);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  z-index: 3;
  transition: opacity 0.6s;
}
.scroll-indicator.is-gone { opacity: 0; pointer-events: none; }
.scroll-indicator__chevron {
  width: 14px; height: 14px;
  border-right: 2px solid var(--cyan);
  border-bottom: 2px solid var(--cyan);
  transform: rotate(45deg);
  opacity: 0.4;
  animation: chevronBounce 1.8s var(--ease-in-out-cubic) infinite;
}
.scroll-indicator__chevron:nth-child(2) { animation-delay: 0.18s; }
@keyframes chevronBounce {
  0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: 0.2; }
  50% { transform: rotate(45deg) translate(4px, 4px); opacity: 0.9; }
}

/* Wormhole scroll zone — tall, transparent, drives the warp shader */
.wormhole-zone {
  height: 160vh;
  pointer-events: none;
}