/* Login page animations: fuel gauge + driving car */

body.login-wrap {
  position: relative;
  overflow-x: hidden;
  padding: 1rem 1rem 96px;
}

.login-card {
  position: relative;
  z-index: 2;
  animation: card-in .7s cubic-bezier(.2, .8, .2, 1) both;
}

/* staggered entrance of form elements */
.rise {
  animation: rise .6s ease both;
  animation-delay: calc(var(--i, 0) * 90ms + 350ms);
}

/* ---- Fuel gauge ---------------------------------------------------- */
.gauge-wrap { line-height: 0; margin-bottom: .25rem; }
.gauge-wrap svg { max-width: 100%; height: auto; overflow: visible; }

.gauge-arc {
  stroke-dasharray: 260;
  stroke-dashoffset: 260;
  animation: arc-draw 1.4s ease-out .3s forwards;
}

#needle {
  transform: rotate(var(--needle, 62deg));
  transform-origin: 100px 100px;
  transition: transform 1.6s cubic-bezier(.34, 1.56, .64, 1);
}
.needle-wobble {
  transform-origin: 100px 100px;
  animation: wobble 2.6s ease-in-out 2.4s infinite alternate;
}

/* ---- Road + car ---------------------------------------------------- */
.road {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 60px;
  background: #0a160d;
  border-top: 2px solid rgba(255, 255, 255, .08);
  z-index: 1;
  overflow: hidden;
}
.road::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 3px;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.55) 0 36px, transparent 36px 72px);
  animation: road-move .8s linear infinite;
}

.car-track {
  position: fixed;
  left: 0; right: 0;
  bottom: 56px;
  height: 60px;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}
.car {
  position: absolute;
  left: 0; bottom: 0;
  width: 190px;
  animation: drive 15s linear infinite;
}
.car svg { display: block; overflow: visible; }
.car-body { animation: bob .45s ease-in-out infinite alternate; }
.wheel { animation: spin .55s linear infinite; }

/* ---- Wrong password: shake ---------------------------------------- */
.login-card.shake { animation: card-in .7s cubic-bezier(.2,.8,.2,1) both, shake .6s ease .7s; }

/* ---- Keyframes ----------------------------------------------------- */
@keyframes card-in { from { opacity: 0; transform: translateY(26px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes rise    { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes arc-draw{ to { stroke-dashoffset: 0; } }
@keyframes wobble  { from { transform: rotate(-1.8deg); } to { transform: rotate(1.8deg); } }
@keyframes road-move { from { background-position-x: 0; } to { background-position-x: -72px; } }
@keyframes drive   { from { transform: translateX(-240px); } to { transform: translateX(calc(100vw + 60px)); } }
@keyframes bob     { from { transform: translateY(0); } to { transform: translateY(-1.4px); } }
@keyframes spin    { to { transform: rotate(360deg); } }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-10px); }
  30% { transform: translateX(9px); }
  45% { transform: translateX(-7px); }
  60% { transform: translateX(5px); }
  75% { transform: translateX(-3px); }
}

@media (max-width: 575.98px) {
  .car { width: 140px; }
  .road { height: 52px; }
  .car-track { bottom: 48px; }
  body.login-wrap { padding-bottom: 80px; }
}

/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
  .login-card, .rise, .gauge-arc, .needle-wobble, .road::after,
  .car, .car-body, .wheel, .login-card.shake { animation: none !important; }
  .gauge-arc { stroke-dashoffset: 0; }
  #needle { transition: none; }
  .car { left: 12%; }
}