.hero { height: auto; }

/* Each bar has a different phrase length and phase. Only scaleY animates. */
.wave i { height: 20px; transform: scaleY(.45); animation: voice-phrase 1.13s infinite;
  animation-play-state: paused; }
.wave i:nth-child(2) { height: 20px; animation-duration: 1.47s; animation-delay: -.37s; }
.wave i:nth-child(3) { animation-duration: .97s; animation-delay: -.62s; }
.wave i:nth-child(4) { height: 20px; animation-duration: 1.31s; animation-delay: -.19s; }
.wave i:nth-child(5) { animation-duration: 1.67s; animation-delay: -.83s; }
.voice-active .wave i { animation-play-state: running; }
@keyframes voice-phrase {
  0%, 100% { transform: scaleY(.3); }
  13% { transform: scaleY(.72); }
  29% { transform: scaleY(.42); }
  43% { transform: scaleY(1); }
  57% { transform: scaleY(.55); }
  71% { transform: scaleY(.84); }
  88% { transform: scaleY(.24); }
}

/* The two slots reserve the entire playbook card throughout its transfer. */
.board-source-slot { display: none; }
.board-motion-ready .board-source-slot { display: block; }
.board-motion-ready .board-card-slot { height: var(--onboarding-height); margin-bottom: 7px; }
.board-motion-ready .onboarding-task { position: relative;
  transform: translate(var(--board-from-x), var(--board-from-y));
  transition: transform 700ms cubic-bezier(.22, .68, .25, 1); }
.board-motion-ready[data-board-stage="done"] .onboarding-task { transform: translate(0, 0); }
.board-done-slot.reveal-near .onboarding-task { will-change: transform; }
.board-motion-ready .progress-track i { transform-origin: left; transform: scaleX(.75);
  transition: transform 450ms ease-out; }
.board-motion-ready:not([data-board-stage="doing"]) .progress-track i { transform: scaleX(1); }
.board-motion-ready .stack-check { opacity: 0; transform: scale(.65);
  transition: opacity 250ms, transform 250ms; }
.board-motion-ready:is([data-board-stage="checked"], [data-board-stage="done"]) .stack-check {
  opacity: 1; transform: scale(1); }
.board-progress b { min-width: 65px; font-variant-numeric: tabular-nums; }
.board-labels span, [data-open-count] { font-variant-numeric: tabular-nums; }

@media (max-width: 760px) {
  .hero-copy { max-width: 29ch; }
  .hero .scroll-cue { padding-top: 28px; }
  .board-motion-ready .board-card-slot { margin-bottom: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .wave i { animation: none; }
  .wave i:nth-child(even) { transform: scaleY(.65); }
  .onboarding-task, .stack-check, .progress-track i { transition: none !important; }
}