html.js-motion .title-sequence .title-word {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, 1.1em, 0) rotate(4deg);
  filter: blur(9px);
  will-change: transform, opacity, filter;
  animation: title-word-rise 820ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(80ms + (var(--word-index, 0) * 65ms));
  animation-play-state: paused;
}

html.js-motion .title-sequence.title-ready .title-word {
  animation-play-state: running;
}

html.js-motion .reveal-target {
  --reveal-transform: translate3d(0, 28px, 0) scale(0.985);
  --reveal-blur: 6px;
  opacity: 0;
  transform: var(--reveal-transform);
  filter: blur(var(--reveal-blur));
  transition:
    opacity 760ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 760ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 760ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 240ms ease;
  transition-delay: var(--reveal-delay, 0ms);
}

html.js-motion .hero-text.reveal-target,
html.js-motion .section-heading p.reveal-target,
html.js-motion .graph-intro p.reveal-target,
html.js-motion .cta-copy.reveal-target {
  --reveal-transform: translate3d(0, 18px, 0) scale(0.994);
  --reveal-blur: 2px;
  transition-duration: 880ms;
}

html.js-motion .reveal-target.reveal-soft {
  --reveal-transform: translate3d(0, 18px, 0) scale(0.99);
  --reveal-blur: 3px;
}

html.js-motion .reveal-target.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
}

.motion-tilt {
  will-change: transform;
  transform-origin: center;
  transform-style: preserve-3d;
  transition:
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 220ms ease;
}

.motion-tilt.is-tilting {
  box-shadow: 0 34px 78px rgba(15, 23, 42, 0.18);
}

@keyframes title-word-rise {
  0% {
    opacity: 0;
    transform: translate3d(0, 1.1em, 0) rotate(4deg);
    filter: blur(9px);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0deg);
    filter: blur(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  html.js-motion .reveal-target {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }

  html.js-motion .title-sequence .title-word {
    opacity: 1;
    transform: none;
    filter: none;
    animation: none;
  }

  .motion-tilt,
  .motion-tilt.is-tilting {
    transform: none !important;
    transition: none;
  }
}