/* =========================================================
   HAYAT TECH — SPLASH SCREEN & VEHICLE PHYSICS ANIMATIONS
   (ملف تنسيقات وحركات شاشة الافتتاح وحركة السيارة)
   ========================================================= */

#splashScreen {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.65s ease, background 0.6s ease;
  cursor: pointer;
}

#splashScreen.splash-night {
  background: radial-gradient(circle at center, #0f172a 0%, #020617 100%);
  color: #f8fafc;
}

#splashScreen.splash-day {
  background: radial-gradient(circle at center, #0284c7 0%, #0369a1 50%, #0c4a6e 100%);
  color: #ffffff;
}

#splashScreen.fade-out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@keyframes suspensionSpring {

  0%,
  100% {
    transform: translateY(0px) rotate(0deg);
  }

  50% {
    transform: translateY(-2px) rotate(0.35deg);
  }
}

@keyframes spinSmoothWheel {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes roadMotion {
  0% {
    stroke-dashoffset: 48;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes hazardFlashBlinker {

  0%,
  45% {
    opacity: 1;
    filter: drop-shadow(0 0 8px #f59e0b) drop-shadow(0 0 16px #fbbf24);
  }

  50%,
  100% {
    opacity: 0.15;
    filter: drop-shadow(0 0 0px transparent);
  }
}

@keyframes headlightBeamPulse {

  0%,
  100% {
    opacity: 0.85;
    transform: rotate(-1deg) scaleY(1);
  }

  50% {
    opacity: 1;
    transform: rotate(0deg) scaleY(1.08);
  }
}

@keyframes stationArrivalSuccess {
  0% {
    transform: scale(1);
    filter: drop-shadow(0 0 10px rgba(16, 185, 129, 0.4));
  }

  50% {
    transform: scale(1.18);
    filter: drop-shadow(0 0 28px rgba(16, 185, 129, 1)) drop-shadow(0 0 45px #34d399);
  }

  100% {
    transform: scale(1.08);
    filter: drop-shadow(0 0 20px rgba(16, 185, 129, 0.85));
  }
}

@keyframes arrivalBadgePop {
  0% {
    transform: translate(-50%, -20px) scale(0.6);
    opacity: 0;
  }

  60% {
    transform: translate(-50%, 4px) scale(1.1);
    opacity: 1;
  }

  100% {
    transform: translate(-50%, 0px) scale(1);
    opacity: 1;
  }
}

@keyframes dropFall {
  0% {
    transform: translateY(0);
    opacity: 1;
  }

  100% {
    transform: translateY(10px);
    opacity: 0;
  }
}

.morph-fade-in {
  animation: morphFade 0.4s ease-out forwards;
}

@keyframes morphFade {
  from {
    opacity: 0;
    transform: scale(0.92);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.suspension-anim {
  animation: suspensionSpring 0.6s infinite ease-in-out;
  transform-origin: center bottom;
}

.wheel-anim {
  animation: spinSmoothWheel 0.45s infinite linear;
  transform-origin: center;
  transform-box: fill-box;
}

.road-anim {
  stroke-dasharray: 14 10;
  animation: roadMotion 0.35s infinite linear;
}

.hazard-anim {
  animation: hazardFlashBlinker 0.6s infinite steps(1, start);
}

.beam-anim {
  animation: headlightBeamPulse 1.8s infinite ease-in-out;
  transform-origin: left center;
}

.station-arrived {
  animation: stationArrivalSuccess 0.8s ease-out forwards;
}

.arrival-badge-anim {
  animation: arrivalBadgePop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}