:root {
  --nurjan-motion-ease: cubic-bezier(0.2, 0.15, 0.28, 1);
}

.nurjan-motion-hero-copy::after {
  transform: translate3d(0, 0, 0);
  transition: transform 1200ms var(--nurjan-motion-ease) var(--nurjan-motion-delay, 100ms);
  will-change: transform;
}

.nurjan-motion-hero-copy.is-motion-visible::after {
  transform: translate3d(0, 100%, 0);
}

.nurjan-hero-wordmark,
.nurjan-art-wordmark,
.nurjan-why-us-wordmark,
.nurjan-hey-wordmark {
  will-change: background-position;
}

.nurjan-art-wordmark {
  background-size: 100% !important;
}

.nurjan-motion-marquee {
  will-change: transform;
}

.nurjan-motion-marquee > img {
  animation-duration: 30s;
  animation-iteration-count: infinite;
  animation-play-state: paused;
  animation-timing-function: linear;
  will-change: transform;
}

.nurjan-motion-marquee > img:first-child {
  animation-name: nurjan-motion-marquee-first;
}

.nurjan-motion-marquee > img:nth-child(2) {
  animation-name: nurjan-motion-marquee-second;
}

.nurjan-motion-marquee.is-motion-visible > img {
  animation-play-state: running;
}

@keyframes nurjan-motion-marquee-first {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-100%, 0, 0); }
}

@keyframes nurjan-motion-marquee-second {
  from { transform: translate3d(100%, 0, 0); }
  to { transform: translate3d(0, 0, 0); }
}

@media (max-width: 1039px) {
  .nurjan-motion-marquee > img {
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nurjan-motion-hero-copy::after {
    transform: translate3d(0, 100%, 0);
    transition: none;
  }

  .nurjan-motion-marquee > img {
    animation: none;
  }
}