/**
 * Bidify - styles/truck-logo.css
 * Driving animation for the inline truck logo (svg.login-truck) on the Options and popup
 * sign-in screens: the truck drives in, the wheels roll, the road moves and the body bounces.
 * Stops for users who turn off animations in their system settings.
 */

@keyframes lt-arrive {
  from {
    transform: translateX(-80px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes lt-roll {
  to {
    transform: rotate(360deg);
  }
}

@keyframes lt-bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-1.2px);
  }
}

@keyframes lt-road {
  to {
    stroke-dashoffset: 40;
  }
}

@keyframes lt-wind {
  0% {
    opacity: 0;
    transform: translateX(8px);
  }
  40% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(-14px);
  }
}

@keyframes lt-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

.login-truck .lt-truck {
  animation: lt-arrive 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.login-truck .lt-wheel {
  transform-box: fill-box;
  transform-origin: center;
  animation: lt-roll 1.25s linear infinite;
}

.login-truck .lt-body {
  animation: lt-bob 0.6s ease-in-out infinite;
}

.login-truck .lt-road {
  animation: lt-road 0.5s linear infinite;
}

.login-truck .lt-wind {
  animation: lt-wind 0.7s linear infinite;
}

.login-truck .lt-wind-2 {
  animation: lt-wind 0.7s linear 0.23s infinite;
}

.login-truck .lt-wind-3 {
  animation: lt-wind 0.7s linear 0.46s infinite;
}

.login-truck .lt-signal {
  animation: lt-pulse 1.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .login-truck .lt-truck,
  .login-truck .lt-wheel,
  .login-truck .lt-body,
  .login-truck .lt-road,
  .login-truck .lt-wind,
  .login-truck .lt-wind-2,
  .login-truck .lt-wind-3,
  .login-truck .lt-signal {
    animation: none;
  }
}