html.motion-enabled {
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
}

html.motion-enabled .hero-visual {
  animation: motion-hero-media 1.05s var(--motion-ease) both;
}

html.motion-enabled .hero-media img {
  animation: motion-hero-image 1.5s var(--motion-ease) both;
}

html.motion-enabled .hero-content > * {
  animation: motion-hero-copy .72s var(--motion-ease) both;
}

html.motion-enabled .hero-content > :nth-child(1) {
  animation-delay: .22s;
}

html.motion-enabled .hero-content > :nth-child(2) {
  animation-delay: .34s;
}

html.motion-enabled .hero-content > :nth-child(3) {
  animation-delay: .48s;
}

html.motion-enabled .hero-content > :nth-child(4) {
  animation-delay: .62s;
}

html.motion-enabled .hero-action-band {
  animation: motion-action-band .68s var(--motion-ease) .82s both;
}

html.motion-enabled [data-motion] {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition:
    opacity .72s var(--motion-ease),
    transform .72s var(--motion-ease),
    clip-path .9s var(--motion-ease);
  transition-delay: var(--motion-delay, 0ms);
  will-change: opacity, transform;
}

html.motion-enabled [data-motion="clip"] {
  clip-path: inset(0 0 18% 0);
  transform: translate3d(0, 18px, 0) scale(1.025);
}

html.motion-enabled [data-motion="slide-left"] {
  transform: translate3d(-28px, 0, 0);
}

html.motion-enabled [data-motion="slide-right"] {
  transform: translate3d(28px, 0, 0);
}

html.motion-enabled [data-motion].is-motion-visible {
  opacity: 1;
  clip-path: inset(0);
  transform: translate3d(0, 0, 0) scale(1);
}

html.motion-enabled .visual-story-grid figure img,
html.motion-enabled .feature-image img,
html.motion-enabled .article-card-image img {
  transition: transform .8s var(--motion-ease), filter .8s var(--motion-ease);
}

@media (hover: hover) {
  html.motion-enabled .visual-story-grid figure:hover img,
  html.motion-enabled .feature-row:hover .feature-image img,
  html.motion-enabled .article-card:hover .article-card-image img {
    transform: scale(1.035);
  }

  html.motion-enabled .button {
    transition:
      transform .22s ease,
      box-shadow .22s ease,
      background-color .22s ease,
      color .22s ease;
  }

  html.motion-enabled .button:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(23, 29, 32, .15);
  }
}

html.motion-enabled .button:active {
  transform: translateY(1px) scale(.992);
}

html.motion-enabled details[open] > div {
  animation: motion-faq-answer .32s ease both;
}

@keyframes motion-hero-media {
  from {
    opacity: 0;
    transform: translate3d(0, 10px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes motion-hero-image {
  from {
    transform: scale(1.055);
  }
  to {
    transform: scale(1);
  }
}

@keyframes motion-hero-copy {
  from {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes motion-action-band {
  from {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes motion-faq-answer {
  from {
    opacity: 0;
    transform: translate3d(0, -7px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@media (max-width: 720px) {
  html.motion-enabled [data-motion="slide-left"],
  html.motion-enabled [data-motion="slide-right"] {
    transform: translate3d(0, 20px, 0);
  }

  html.motion-enabled [data-motion].is-motion-visible {
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  html.motion-enabled *,
  html.motion-enabled *::before,
  html.motion-enabled *::after {
    animation-duration: .01ms !important;
    animation-delay: 0ms !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }

  html.motion-enabled [data-motion] {
    opacity: 1;
    clip-path: none;
    transform: none;
  }
}