@import '../../scss/cells/mixins/black-background';

.animated.triple_step {
  @include blackBackgroundMixin;

  .steps-container {
    #step_1,
    #step_2,
    #step_3 {
      animation-name: step_animation;
      animation-duration: 2s;
      animation-timing-function: ease-in-out;
      animation-iteration-count: 1;
      translate: -12000px;
    }

    #step_1 {
      animation-delay: calc(var(--animation-delay, 0s) + 0.8s);
    }

    #step_2 {
      animation-delay: calc(var(--animation-delay, 0s) + 0.65s);
    }

    #step_3 {
      animation-delay: calc(var(--animation-delay, 0s) + 0.5s);
    }
  }

  use.d-none.use-triple-step {
    display: block;
  }
}

@keyframes step_animation {
  0% {
    translate: -10000px;
  }
  10% {
    translate: 0px;
  }
  90% {
    translate: 0px;
  }
  100% {
    translate: 10000px;
  }
}
