.hero-slogan-clip {
  display: block;
  overflow: hidden;
}

.hero-slogan {
  display: block;
}

[data-scroll-reveal] {
  overflow: hidden;
}

.scroll-reveal-inner {
  display: block;
}

@media (prefers-reduced-motion: no-preference) {
  .hero-slogan {
    animation: hero-slogan-enter 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both;
  }

  [data-scroll-reveal].is-reveal-ready > .scroll-reveal-inner {
    opacity: 0;
    transform: translateX(clamp(36px, 8vw, 96px));
  }

  [data-scroll-reveal].is-revealed > .scroll-reveal-inner {
    animation: section-heading-enter 1.1s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  @keyframes section-heading-enter {
    from {
      opacity: 0;
      transform: translateX(clamp(36px, 8vw, 96px));
    }

    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes hero-slogan-enter {
    from {
      opacity: 0;
      transform: translateX(clamp(36px, 10vw, 120px));
    }

    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
}