.hero-mark {
  animation: hero-mark-in 1000ms cubic-bezier(.22, 1, .36, 1) both;
}

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

.scroll-reveal {
  --scroll-reveal-x: 0px;
  --scroll-reveal-y: 28px;
  opacity: 0;
  transform: translate3d(var(--scroll-reveal-x), var(--scroll-reveal-y), 0);
  transition: opacity 700ms ease, transform 850ms cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--scroll-reveal-delay, 0ms);
  will-change: opacity, transform;
  animation: none !important;
}

.scroll-reveal.reveal-from-left { --scroll-reveal-x: -42px; --scroll-reveal-y: 10px; }
.scroll-reveal.reveal-from-right { --scroll-reveal-x: 42px; --scroll-reveal-y: 10px; }
.scroll-reveal.reveal-from-bottom { --scroll-reveal-x: 0px; --scroll-reveal-y: 30px; }

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

@media (max-width: 767px) {
  .scroll-reveal.reveal-from-left { --scroll-reveal-x: -24px; }
  .scroll-reveal.reveal-from-right { --scroll-reveal-x: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-mark,
  .scroll-reveal,
  .scroll-reveal.is-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
}