/* Focus motion on headings and one illustration; body content stays visible. */
.ticker > div { animation: none; }
.motion-line,
.motion-pop-line { display: block; }
.motion-line { overflow: hidden; padding: 0 .12em; margin: 0 -.12em; }
.motion-line-inner { display: block; }
.motion-pop-inner { display: inline; }
.motion-character { display: inline-block; transform-origin: 50% 72%; }
.proof-number > b { white-space: nowrap; flex-shrink: 0; }

.motion-ready:not(.motion-reduced) .motion-heading .motion-line-inner {
  transform: translateY(110%);
  transition: transform .8s cubic-bezier(.2,.9,.2,1);
  transition-delay: calc(var(--motion-line, 0) * 90ms);
}
.motion-ready:not(.motion-reduced) .hero h1.motion-heading .motion-line-inner {
  transition-delay: calc(var(--motion-line, 0) * 120ms + 80ms);
}
.motion-ready:not(.motion-reduced) .motion-heading.motion-is-in .motion-line-inner { transform: translateY(0); }

.motion-ready:not(.motion-reduced) .motion-fade {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .8s cubic-bezier(.2,1,.3,1);
  transition-delay: var(--motion-delay, 0ms);
}
.motion-ready:not(.motion-reduced) .motion-fade.motion-is-in { opacity: 1; transform: none; }
.hero-art { mix-blend-mode: darken; }
.motion-ready:not(.motion-reduced) .hero-art.motion-fade:not(.motion-is-in) { transform: translateX(24px); }

/* Preserve the existing underline gradient while revealing the marked word. */
.motion-ready:not(.motion-reduced) .motion-wipe {
  display: inline-block;
  clip-path: inset(-.15em 100% -.15em 0);
  transition: clip-path .72s cubic-bezier(.7,0,.2,1) 100ms;
}
.motion-ready:not(.motion-reduced) .motion-wipe-trigger.motion-is-in .motion-wipe { clip-path: inset(-.15em 0 -.15em 0); }

.motion-ready:not(.motion-reduced) .motion-pop:not(.motion-is-in) .motion-character { opacity: 0; }
.motion-ready:not(.motion-reduced) .motion-pop.motion-is-in .motion-character {
  animation: leadone-character-pop .55s cubic-bezier(.2,1.2,.4,1) both;
  animation-delay: calc(var(--motion-character, 0) * 60ms);
}
@keyframes leadone-character-pop {
  0% { opacity: 0; transform: scale(1.6); }
  65% { opacity: 1; transform: scale(.96); }
  100% { opacity: 1; transform: scale(1); }
}

.motion-ready:not(.motion-reduced) .hero-art img.motion-loop { animation: leadone-illustration-float 4.2s ease-in-out 1.2s infinite; }
@keyframes leadone-illustration-float {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.motion-ready .motion-loop:not(.motion-loop-active),
.motion-ready.motion-document-hidden .motion-loop { animation-play-state: paused !important; }

/* Target only arrow spans, never the form's text label. */
@media (hover:hover) {
  .motion-ready:not(.motion-reduced) .button > span:last-child:not(.submit-label),
  .motion-ready:not(.motion-reduced) .small-cta > span {
    display: inline-block;
    transition: transform .28s cubic-bezier(.2,.8,.2,1);
  }
  .motion-ready:not(.motion-reduced) .button:hover > span:last-child:not(.submit-label),
  .motion-ready:not(.motion-reduced) .small-cta:hover > span { transform: translate(3px,-3px); }
}

/* Also handles a preference changed while an effect is running. */
.motion-reduced .motion-line-inner,
.motion-fallback .motion-line-inner,
.motion-reduced .motion-character,
.motion-fallback .motion-character,
.motion-reduced .motion-fade,
.motion-fallback .motion-fade { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
.motion-reduced .motion-wipe,
.motion-fallback .motion-wipe { clip-path: none !important; transition: none !important; }
.motion-reduced .motion-loop,
.motion-fallback .motion-loop,
.motion-reduced .ticker > div { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  .motion-line-inner,.motion-fade,.motion-character { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; }
  .motion-wipe { clip-path: none !important; }
  .motion-loop,.ticker > div { animation: none !important; }
}