.hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 48px;
}

.hero h1 {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-variation-settings: "opsz" 72;
  line-height: 0.96;
  font-size: clamp(40px, 11vw, 57px);
}

@media (min-width: 640px) {
  .hero h1 {
    font-size: clamp(54px, 9vw, 112px);
  }
}

.hero .eyebrow {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0;
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: clamp(12px, 1.4vw, 13px);
  letter-spacing: 0.32em;
  color: var(--fg-secondary);
}

.eyebrow .sep {
  margin-inline: 12px;
  color: var(--accent-deep);
}

/* one-shot per-character glitch, retriggered on a timer by script.js */
.glitch {
  display: inline-block;
}

.glitch-accent {
  color: var(--accent-deep);
}

.glitch.is-glitching {
  animation: glitch 0.4s steps(1, end);
}

@keyframes glitch {
  0%,
  100% {
    transform: translate(0);
    text-shadow: none;
  }
  18% {
    transform: translate(-2px, -1px);
    text-shadow:
      2px 0 var(--accent),
      -2px 0 var(--glitch-2);
  }
  34% {
    transform: translate(2px, 1px);
    text-shadow:
      -2px 0 var(--glitch-2),
      2px 0 var(--accent);
  }
  50% {
    transform: translate(-1px, 0);
    opacity: 0.75;
  }
  66% {
    transform: translate(2px, -1px);
    text-shadow:
      -2px 0 var(--accent),
      2px 0 var(--glitch-2);
  }
  82% {
    transform: translate(-1px, 1px);
    text-shadow:
      1px 0 var(--accent),
      -1px 0 var(--glitch-2);
  }
}