/* Typewriter headline band */
.intro-teletype {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  padding: 1.25rem 1.5rem 1.75rem;
  background:
    linear-gradient(transparent, rgba(0, 0, 0, 0.92) 28%),
    repeating-linear-gradient(
      0deg,
      transparent 0 3px,
      rgba(255, 255, 255, 0.03) 3px 4px
    );
  border-top: 4px solid #f0e100;
  min-height: 28vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.75rem;
}

.intro-kicker {
  font-family: var(--font-meta), monospace;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #c4122f;
}

.intro-kicker::before {
  content: "● ";
  color: #c4122f;
  animation: stamp-pulse 0.5s steps(2) infinite;
}

.intro-headline {
  font-family: var(--font-ransom), monospace;
  font-size: clamp(1.5rem, 5.5vw, 3.2rem);
  line-height: 1.1;
  text-transform: uppercase;
  color: #f5f0e4;
  min-height: 1.3em;
  text-shadow:
    -2px 0 rgba(0, 229, 255, 0.55),
    2px 0 rgba(255, 42, 109, 0.55);
  word-break: break-word;
}

.intro-headline .caret {
  display: inline-block;
  width: 0.55ch;
  height: 0.95em;
  margin-left: 2px;
  background: #f0e100;
  vertical-align: text-bottom;
  animation: caret-blink 0.45s steps(1) infinite;
}

@keyframes caret-blink {
  0%, 45% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.intro-headline.is-glitching {
  animation: rgb-split 0.35s steps(2) infinite;
}

.intro-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 4px;
  background: #c4122f;
  width: 0%;
  box-shadow: 0 0 12px #c4122f;
  transition: width 0.15s linear;
}

.intro-flash {
  position: absolute;
  inset: 0;
  z-index: 25;
  background: #fff;
  opacity: 0;
  pointer-events: none;
}

.intro-flash.bang {
  animation: white-bang 0.12s steps(2);
}

@keyframes white-bang {
  0% { opacity: 0.95; }
  100% { opacity: 0; }
}

.intro-noise {
  position: absolute;
  inset: 0;
  z-index: 15;
  pointer-events: none;
  opacity: 0.12;
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: film-jitter 0.2s steps(2) infinite;
}

@media (max-width: 640px) {
  .intro-teletype {
    min-height: 34vh;
    padding: 1rem;
  }
  .scene-frame {
    height: 48vh;
  }
}