/* The final headline reserves the same space throughout the one-time intro. */
.hero .hero-copy { container-type:inline-size; width:100%; }
.hero .hero-copy .hero-narrative {
  position:relative;
  width:100%;
  font-size:clamp(32px,5vw,138px);
  font-size:clamp(32px,13.4cqi,138px);
  line-height:.99;
}
.hero-narrative-final {
  position:relative;
  display:block;
  opacity:1;
  transform:none;
}
.hero-narrative-line { display:block; white-space:nowrap; }
.hero-narrative-last { display:inline-flex; align-items:center; gap:.22em; white-space:nowrap; }
.hero-narrative-heart {
  display:block;
  flex:0 0 auto;
  width:.88em;
  height:.88em;
}
.hero-narrative-mark {
  display:block;
  width:100%;
  height:100%;
  background:var(--accent);
  -webkit-mask:url('assets/icon-led.png') center/contain no-repeat;
  mask:url('assets/icon-led.png') center/contain no-repeat;
  filter:drop-shadow(0 0 8px #5ccbef45);
}
.hero-narrative-intro {
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  visibility:hidden;
  pointer-events:none;
}
.hero-narrative-intro-line { display:block; white-space:nowrap; }
.hero-narrative-character { display:inline-block; white-space:pre; }
.narrative-playing .hero-narrative-final { opacity:0; }
.narrative-playing .hero-narrative-intro { visibility:visible; }
.narrative-playing.narrative-final-typing .hero-narrative-final { opacity:1; }
.narrative-final-typing .hero-narrative-intro { visibility:hidden; }
.narrative-playing .hero-narrative-heart { opacity:0; }
.narrative-playing.narrative-resolving .hero-narrative-heart { opacity:1; }
.narrative-resolving .hero-narrative-mark { animation:hero-heart-welcome 1s cubic-bezier(.22,1,.36,1) both; }
.narrative-paused .hero-narrative-mark { animation-play-state:paused; }
@keyframes hero-heart-welcome {
  0% { opacity:0; transform:scale(.94); }
  40% { opacity:1; transform:scale(1); }
  66% { opacity:1; transform:scale(1.055); }
  100% { opacity:1; transform:scale(1); }
}
@media(max-width:540px) {
  .hero .hero-copy .hero-narrative {
    font-size:clamp(40px,14.5vw,88px);
    font-size:clamp(40px,16.5cqi,88px);
  }
  .hero-narrative-last { justify-content:center; }
}
@media(prefers-reduced-motion:reduce) {
  .hero-narrative-final { transition:none; }
  .hero-narrative-mark { animation:none; }
}