.onboarding-demo {
  --onboard-ease: cubic-bezier(.2, .82, .2, 1);
}
.onboarding-demo .onboard-art,
.onboarding-demo footer h1,
.onboarding-demo footer p,
.onboarding-demo .pager,
.onboarding-demo .next-pill {
  animation-duration: 420ms;
  animation-fill-mode: both;
  animation-timing-function: var(--onboard-ease);
  will-change: transform, opacity;
}
.onboard-enter-forward .onboard-art {
  animation-name: onboard-art-in;
}
.onboard-enter-forward footer h1 {
  animation-name: onboard-copy-in;
  animation-delay: 55ms;
}
.onboard-enter-forward footer p {
  animation-name: onboard-copy-in;
  animation-delay: 95ms;
}
.onboard-enter-forward .pager,
.onboard-enter-forward .next-pill {
  animation-name: onboard-controls-in;
  animation-delay: 140ms;
}
.onboard-exit-forward .onboard-art,
.onboard-exit-forward footer h1,
.onboard-exit-forward footer p,
.onboard-exit-forward .pager,
.onboard-exit-forward .next-pill {
  animation-name: onboard-out;
  animation-duration: 220ms;
  animation-delay: 0ms;
  pointer-events: none;
}
.onboarding-demo .next-pill:active {
  transform: scale(.96);
}
#interactive .onboarding-demo .next-pill {
  background: #1570ef !important;
  box-shadow: 0 12px 26px rgba(21, 112, 239, .24), inset 0 -1px 2px rgba(16, 42, 86, .22) !important;
}
.onboarding-demo .pager i {
  transition: width 260ms var(--onboard-ease), background-color 260ms var(--onboard-ease), transform 260ms var(--onboard-ease);
}
.onboarding-demo .pager i.on {
  transform: scaleX(1.08);
}
.onboard-art [data-onboard-lottie] svg {
  animation: onboard-lottie-breathe 2.6s ease-in-out infinite alternate;
  transform-origin: 50% 58%;
}
@keyframes onboard-art-in {
  from { opacity: 0; transform: translateX(34px) scale(.985); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes onboard-copy-in {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes onboard-controls-in {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes onboard-out {
  from { opacity: 1; transform: translateX(0) scale(1); }
  to { opacity: 0; transform: translateX(-28px) scale(.985); }
}
@keyframes onboard-lottie-breathe {
  from { transform: translateY(0) scale(1); }
  to { transform: translateY(-5px) scale(1.015); }
}
@media (prefers-reduced-motion: reduce) {
  .onboarding-demo .onboard-art,
  .onboarding-demo footer h1,
  .onboarding-demo footer p,
  .onboarding-demo .pager,
  .onboarding-demo .next-pill,
  .onboard-art [data-onboard-lottie] svg {
    animation: none !important;
    transition: none !important;
  }
}

#interactive .onboarding-demo .pager {
  display: none !important;
}
#interactive .onboarding-demo .next-pill {
  background: #2f83f6 !important;
  box-shadow: none !important;
}