/* Legenda da peça do hero (HeroField): o que a peça está montando. Cada texto novo entra digitado, com o passo e o
   cursor do rótulo das seções (.ds-type e as animações ds-type, ds-type-caret e ds-type-blink, em globals.css); ela
   some só pela opacidade. Sem movimento reduzido: com ele a cena nem monta, e a legenda não existe. */
.hero-legenda {
  opacity: 0;
  transition: opacity 0.3s var(--ease-out);
}

.hero-legenda[data-shown] {
  opacity: 1;
}

@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  .hero-legenda .ds-type {
    animation: ds-type calc(var(--n) * 32ms) steps(var(--n)) forwards;
  }

  .hero-legenda .ds-type::after {
    animation:
      ds-type-caret calc(var(--n) * 32ms) steps(var(--n)) forwards,
      ds-type-blink 0.9s steps(1) calc(var(--n) * 32ms) forwards;
  }
}