.marks {
  overflow-x: clip;
}

.retention-motion-ready .marks-list .mark {
  opacity: 0;
  filter: brightness(.72);
  will-change: transform, opacity, filter;
}

.retention-motion-ready .marks-list .mark-svg {
  clip-path: none !important;
}

.retention-motion-ready .marks-list .mark:nth-child(1),
.retention-motion-ready .marks-list .mark:nth-child(3) {
  transform: translate3d(-15vw, 0, 0) rotate(calc(var(--tilt) - .7deg));
}

.retention-motion-ready .marks-list .mark:nth-child(2) {
  transform: translate3d(15vw, 0, 0) rotate(calc(var(--tilt) + .7deg));
}

.retention-motion-ready .marks-list.is-retention-visible .mark {
  opacity: 1;
  filter: brightness(1);
  transform: translate3d(0, 0, 0) rotate(var(--tilt));
}

.retention-motion-ready .marks-list.is-retention-visible .mark:nth-child(1),
.retention-motion-ready .marks-list.is-retention-visible .mark:nth-child(3) {
  animation: retention-enter-left 1200ms cubic-bezier(.16, 1, .3, 1) both;
  animation-duration: 1200ms !important;
  animation-iteration-count: 1 !important;
}

.retention-motion-ready .marks-list.is-retention-visible .mark:nth-child(2) {
  animation: retention-enter-right 1200ms cubic-bezier(.16, 1, .3, 1) 500ms both;
  animation-duration: 1200ms !important;
  animation-delay: 500ms !important;
  animation-iteration-count: 1 !important;
}

.retention-motion-ready .marks-list.is-retention-visible .mark:nth-child(3) {
  animation-delay: 1000ms !important;
}

@keyframes retention-enter-left {
  0% {
    opacity: .04;
    filter: brightness(.55);
    transform: translate3d(-24vw, 0, 0) rotate(calc(var(--tilt) - 1.8deg));
  }
  68% {
    opacity: 1;
    filter: brightness(1.08);
    transform: translate3d(18px, 0, 0) rotate(var(--tilt));
  }
  100% {
    opacity: 1;
    filter: brightness(1);
    transform: translate3d(0, 0, 0) rotate(var(--tilt));
  }
}

@keyframes retention-enter-right {
  0% {
    opacity: .04;
    filter: brightness(.55);
    transform: translate3d(24vw, 0, 0) rotate(calc(var(--tilt) + 1.8deg));
  }
  68% {
    opacity: 1;
    filter: brightness(1.08);
    transform: translate3d(-18px, 0, 0) rotate(var(--tilt));
  }
  100% {
    opacity: 1;
    filter: brightness(1);
    transform: translate3d(0, 0, 0) rotate(var(--tilt));
  }
}