@media (prefers-reduced-motion: no-preference) {
  .motion-ready .motion-reveal {
    opacity: 0;
    transform: translate3d(0, 34px, 0);
    transition:
      opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--motion-delay, 0ms);
    will-change: opacity, transform;
  }

  .motion-ready .motion-reveal.motion-reveal--soft {
    transform: translate3d(0, 18px, 0);
  }

  .motion-ready .motion-reveal.motion-reveal--clip {
    opacity: 1;
    clip-path: inset(0 0 100% 0);
    transform: translate3d(0, 28px, 0);
    transition:
      clip-path 1.05s cubic-bezier(0.77, 0, 0.18, 1),
      transform 1.05s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--motion-delay, 0ms);
  }

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

  .motion-ready .motion-reveal.motion-reveal--clip.is-visible {
    clip-path: inset(0 0 0 0);
  }

  .motion-ready .motion-line {
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 1s cubic-bezier(0.77, 0, 0.18, 1);
    transition-delay: var(--motion-delay, 0ms);
  }

  .motion-ready .motion-line.is-visible {
    transform: scaleX(1);
  }

  .motion-ready .sec-label::before {
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.75s cubic-bezier(0.77, 0, 0.18, 1);
  }

  .motion-ready .sec-label.is-visible::before {
    transform: scaleX(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .motion-reveal,
  .motion-line {
    opacity: 1 !important;
    clip-path: none !important;
    transform: none !important;
    transition: none !important;
  }
}