:root {
  --motion-enter: 640ms;
  --motion-fast: 260ms;
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
  --motion-distance: 18px;
}

.reveal,
.motion-item {
  animation: none;
  opacity: 0;
  transform: translate3d(0, var(--motion-distance), 0);
  transition:
    opacity var(--motion-enter) var(--motion-ease),
    transform var(--motion-enter) var(--motion-ease);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: transform, opacity;
}

.reveal.is-visible,
.motion-item.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.audience-card.motion-item,
.path-flow article.motion-item,
.build-steps li.motion-item {
  transform: translate3d(0, 14px, 0);
}

.audience-card.motion-item.is-visible,
.path-flow article.motion-item.is-visible,
.build-steps li.motion-item.is-visible {
  transform: translate3d(0, 0, 0);
}

.choice-list button,
.audience-card,
.button,
.header-cta {
  transition-property: transform, background, border-color, box-shadow, color;
  transition-duration: var(--motion-fast);
  transition-timing-function: var(--motion-ease);
}

.honeypot { display: none; }
.button:disabled { cursor: wait; opacity: .72; transform: none; }

.mockup-shell {
  animation: card-settle 900ms var(--motion-ease) both;
}

.orb {
  animation: orb-drift 7s ease-in-out infinite alternate;
}

@keyframes card-settle {
  from { opacity: 0; transform: translate3d(0, 16px, 0) scale(.985); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes orb-drift {
  from { transform: translate3d(-6px, -4px, 0) scale(.985); }
  to { transform: translate3d(8px, 6px, 0) scale(1.015); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }

  .reveal,
  .motion-item,
  .reveal.is-visible,
  .motion-item.is-visible {
    opacity: 1;
    transform: none;
    transition: opacity 150ms linear;
  }
}