/* ══════════════════════════════════════
   App Loading Screen
   ══════════════════════════════════════ */

.app-loading {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  z-index: 9999;
}

/* ══════════════════════════════════════
   SVG Car
   ══════════════════════════════════════ */

.car {
  overflow: visible;
}

.car__body {
  stroke: #ff8c00;
  fill: #ff8c00;
  animation: shake 0.2s ease-in-out infinite alternate;
}

.car__wheel {
  stroke: #333333;
  fill: #ffffff;
}

.car__line {
  stroke: #ff8c00;
  transform-origin: center right;
  stroke-dasharray: 22;
  animation: line 0.8s ease-in-out infinite;
  animation-fill-mode: both;
}

.car__line--top {
  animation-delay: 0s;
}

.car__line--middle {
  animation-delay: 0.2s;
}

.car__line--bottom {
  animation-delay: 0.4s;
}

/* ══════════════════════════════════════
   Keyframes
   ══════════════════════════════════════ */

@keyframes shake {
  0%   { transform: translateY(-1%); }
  100% { transform: translateY(3%);  }
}

@keyframes line {
  0%   { stroke-dashoffset: 22;  }
  25%  { stroke-dashoffset: 22;  }
  50%  { stroke-dashoffset: 0;   }
  51%  { stroke-dashoffset: 0;   }
  80%  { stroke-dashoffset: -22; }
  100% { stroke-dashoffset: -22; }
}