/* Container */
#bike-loader-container {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: white;
  z-index: 9998;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  animation: fadeOut 1s ease-in-out 5s forwards;
}

/* Top Logo and Text */
#logo-heading {
  text-align: center;
  margin-bottom: 40px;
}
#loader-logo {
  width: 80px;
  height: auto;
  margin-bottom: 10px;
}
#logo-heading h2 {
  font-size: 1.5rem;
  color: #111;
  margin: 5px 0;
}
#logo-heading p {
  color: #ff4e00;
  font-size: 1rem;
  font-weight: 500;
}

/* Bike */
#bike-loader {
  position: fixed;
  top: 50%;
  left: -250px;
  width: 200px;
  max-width: 60vw;
  height: auto;
  z-index: 9999;
  animation: moveBike 5s ease-in-out forwards;
}

/* Speed Text */
#speed-indicator {
  position: fixed;
  top: 65%;
  left: 20px;
  font-size: 1.2rem;
  color: #ff0000;
  font-weight: bold;
  z-index: 9999;
  animation: speedUp 5s steps(5) forwards;
}

/* Animations */
@keyframes moveBike {
  0% { left: -250px; }
  100% { left: 100vw; }
}

@keyframes speedUp {
  0% { content: "Speed: 20 km/h"; }
  20% { content: "Speed: 40 km/h"; }
  40% { content: "Speed: 70 km/h"; }
  60% { content: "Speed: 90 km/h"; }
  80% { content: "Speed: 110 km/h"; }
  100% { content: "Speed: 120 km/h"; opacity: 0; }
}

@keyframes fadeOut {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

/* Mobile Friendly */
@media (max-width: 600px) {
  #loader-logo { width: 60px; }
  #logo-heading h2 { font-size: 1.2rem; }
  #logo-heading p { font-size: 0.9rem; }
  #speed-indicator {
    top: 70%;
    font-size: 1rem;
  }
}