/* Entradas guiadas pela opacidade, com movimento mínimo. */
@keyframes story-enter {
  from { opacity: 0; transform: translate3d(0, 12px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes story-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes letter-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.hero .hero-line { white-space: nowrap; }
.hero .hero-char {
  display: inline-block;
  animation: letter-fade 1.15s ease-in-out backwards;
  animation-delay: calc(.27s + var(--char-index) * .031s);
}

.hero .eyebrow,
.hero .hero-intro,
.hero .choice,
.hero-copy .eyebrow,
.hero-copy h1,
.hero-copy > p:not(.eyebrow),
.hero-copy > .button,
.hero-copy .hero-links,
.sidebar .eyebrow,
.sidebar h1,
.sidebar .intro,
.sidebar .side-foot,
.form-top .eyebrow,
.form-top h2,
.form-top .description,
.content > .eyebrow,
.content > h1,
.content > h1 + p {
  animation: story-enter 1.22s cubic-bezier(.36, 0, .24, 1) backwards;
  animation-delay: var(--story-delay, 0s);
}

.hero .eyebrow, .hero-copy .eyebrow, .sidebar .eyebrow, .form-top .eyebrow, .content > .eyebrow { --story-delay: .12s; }
.hero-copy h1, .sidebar h1, .form-top h2, .content > h1 { --story-delay: .25s; }
.hero .hero-intro, .hero-copy > p:not(.eyebrow), .sidebar .intro, .form-top .description, .content > h1 + p { --story-delay: .44s; }
.hero-copy > .button, .hero-copy .hero-links { --story-delay: .56s; }
.hero .choice:nth-child(1) { --story-delay: .62s; }
.hero .choice:nth-child(2) { --story-delay: .72s; }
.hero .choice:nth-child(3) { --story-delay: .82s; }
.sidebar .side-foot { --story-delay: .62s; }

@media (prefers-reduced-motion: reduce) {
  .hero .eyebrow,
  .hero .hero-intro,
  .hero .choice,
  .hero-copy .eyebrow,
  .hero-copy h1,
  .hero-copy > p:not(.eyebrow),
  .hero-copy > .button,
  .hero-copy .hero-links,
  .sidebar .eyebrow,
  .sidebar h1,
  .sidebar .intro,
  .sidebar .side-foot,
  .form-top .eyebrow,
  .form-top h2,
  .form-top .description,
  .content > .eyebrow,
  .content > h1,
  .content > h1 + p { animation-name: story-fade; animation-duration: .8s; }
  .hero .hero-char { animation-duration: .7s; animation-delay: calc(.16s + var(--char-index) * .016s); }
}