/* Sayfa açıldığında bir kez çalışan ve yol sonunda kaybolan hareket */
.motion-convoy {
  opacity: 0;
  animation: yetis-drive-once 11.5s linear 350ms 1 forwards;
}

.motion-road::before {
  animation: yetis-road-once 2.6s linear 350ms 5 forwards;
}

.moving-van {
  animation: yetis-suspension-once 850ms ease-in-out 350ms 13 alternate;
}

.van-wheel {
  animation: yetis-wheel-once 850ms linear 350ms 14;
}

@keyframes yetis-drive-once {
  0% {
    opacity: 0;
    transform: translateX(-105%);
  }

  5% {
    opacity: 1;
  }

  88% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateX(calc(100vw + 40px));
  }
}

@keyframes yetis-road-once {
  to {
    background-position: -104px 0;
  }
}

@keyframes yetis-suspension-once {
  to {
    translate: 0 2px;
  }
}

@keyframes yetis-wheel-once {
  to {
    rotate: 360deg;
  }
}

@media (max-width: 850px) {
  .motion-convoy {
    animation-duration: 10s;
  }
}

@media (max-width: 620px) {
  .motion-convoy {
    animation-duration: 9s;
  }
}