/* Hero entrances start with the first paint, not a late JS fade-out. */
@media (prefers-reduced-motion: no-preference) {
  .marketing-page #main :is(
    .hero > .shell > h1,
    .hero-content > h1,
    .pricing-header > h1,
    .sampler-intro > h1,
    .contact-section h1,
    .legal-content > h1
  ) {
    /* Keep the title readable throughout: the page never opens on a blank hero. */
    animation: audixa-title-arrive 950ms cubic-bezier(.2, .65, .3, 1) backwards;
  }

  .marketing-page #main :is(
    .hero-lede,
    .hero-content > .hero-description,
    .pricing-header > .section-description,
    .sampler-lede,
    .contact-section .section-description,
    .legal-content > .last-updated
  ) {
    animation: audixa-content-arrive 900ms cubic-bezier(.2, .65, .3, 1) 240ms backwards;
  }

  .marketing-page #main :is(
    .hero-actions,
    .hero-content > .hero-buttons,
    .hero-content > .pseo-pills,
    .hero-content > .pseo-hub-page-count,
    .sampler-actions
  ) {
    animation: audixa-content-arrive 900ms cubic-bezier(.2, .65, .3, 1) 500ms backwards;
  }

  .marketing-page #main :is(
    .hero-note,
    .hero-content > .pseo-release-qualifier,
    .sampler-proof
  ) {
    animation: audixa-content-arrive 900ms cubic-bezier(.2, .65, .3, 1) 620ms backwards;
  }

  .marketing-page #main :is(
    .hero-showcase,
    .sampler-hero .audio-deck,
    .sampler-unavailable,
    .pricing-grid > .pricing-card,
    .contact-grid > *
  ) {
    animation: audixa-illustration-arrive 1100ms cubic-bezier(.2, .65, .3, 1) 820ms backwards;
  }

  .marketing-page #main .pricing-grid > .pricing-card:nth-child(2) { animation-delay: 960ms; }
  .marketing-page #main .pricing-grid > .pricing-card:nth-child(3) { animation-delay: 1100ms; }
  .marketing-page #main .pricing-grid > .pricing-card:nth-child(4) { animation-delay: 1240ms; }

  /* Keyboard focus immediately reveals controls, including during a delay. */
  .marketing-page #main :focus-within {
    animation: none !important;
  }
}

@keyframes audixa-title-arrive {
  from { translate: 0 12px; }
  to { translate: 0 0; }
}
@keyframes audixa-content-arrive {
  from { opacity: 0; translate: 0 12px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes audixa-illustration-arrive {
  from { opacity: 0; translate: 0 24px; }
  to { opacity: 1; translate: 0 0; }
}

.marketing-page[data-motion-static] #main * {
  animation: none !important;
}
@media print {
  .marketing-page * { animation: none !important; }
}