.hero-word {
  display: inline-block;
  white-space: nowrap;
  overflow: clip;
  vertical-align: baseline;
  padding: .16em .045em .2em;
  margin: -.16em -.045em -.2em;
}

.hero-char {
  display: inline-block;
  transform-origin: 50% 90%;
}

.hero-title-prepared .hero-char {
  opacity: 0;
  transform: translateY(1.15em) rotate(11deg) scale(.82);
}

.hero-title-playing .hero-char {
  animation: hero-letter-rise 1.15s cubic-bezier(.22, 1, .36, 1) var(--char-delay) both;
}

@keyframes hero-letter-rise {
  from { opacity: 0; transform: translateY(1.15em) rotate(11deg) scale(.82); }
  to { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
}

.hero-highlight > svg { overflow: visible; pointer-events: none; }

.hero-title-prepared .hero-scribble {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.hero-title-playing .hero-scribble {
  animation: hero-pen-stroke 1s cubic-bezier(.33, 0, .2, 1) var(--scribble-delay) both;
}

.hero-title-playing .hero-scribble + .hero-scribble {
  animation-delay: calc(var(--scribble-delay) + 180ms);
}

@keyframes hero-pen-stroke { to { stroke-dashoffset: 0; } }

.inline-pet { animation: hero-pet-turn 36s linear infinite; }
@keyframes hero-pet-turn {
  from { transform: rotate(8deg); }
  to { transform: rotate(368deg); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-title-prepared .hero-char,
  .hero-title-playing .hero-char { animation: none; opacity: 1; transform: none; }
  .hero-title-prepared .hero-scribble,
  .hero-title-playing .hero-scribble { animation: none; stroke-dashoffset: 0; }
  .inline-pet { animation: none; transform: rotate(8deg); }
}