/* Typed narration box: lines of serif text + a softly pulsing "tap to continue" prompt. */

.flavor-text {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: var(--space-4);
  text-align: left;
  border: var(--border-width) solid var(--accent);
  background: var(--color-bg-raised);
  box-shadow:
    var(--shadow-pixel),
    0 0 30px color-mix(in srgb, var(--accent) var(--glow-alpha), transparent);
  cursor: pointer;
}

/* A paragraph gap is a blank line of the same size, so they share a rule. */
.flavor-text__line,
.flavor-text__gap {
  font-family: var(--font-text);
  font-weight: var(--font-text-weight);
  font-size: calc(clamp(18px, 4.8vw, 23px) * var(--font-text-scale));
  line-height: var(--font-text-lh);
}

.flavor-text__line {
  color: var(--color-text);
}

.flavor-text__gap {
  height: calc(var(--font-text-lh) * 1em);
}

.flavor-text__prompt {
  margin-top: var(--space-3);
  text-align: right;
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--accent);
  animation: flavor-text-pulse 1800ms ease-in-out infinite;
}

.flavor-text__prompt[hidden] {
  display: none;
}

@keyframes flavor-text-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}