/* ===============================
   CLEAN SMOOTH BIKE LOADER
   =============================== */

#page-loader {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 999999;
  overflow: hidden;

  --dur: 4200ms;
  --ease: linear; /* uniform speed throughout */
}

/* BIKE */
.bike-wrapper {
  position: absolute;
  left: -140px;
  bottom: 14%;
  transform: none;
  animation: bike-move var(--dur) var(--ease) forwards;
  will-change: transform;
}

.loader-gif {
  height: clamp(48px, 9vh, 96px);
  width: auto;
}

/* ONE CONTINUOUS MOTION — NO MID STOP */
@keyframes bike-move {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(100vw + 320px)); }
}

/* ROAD */
.road {
  position: absolute;
  left: 0;
  bottom: 10%;
  width: 100%;
  height: 6px;
  background: transparent;
  overflow: hidden;
}

.road-line {
  position: absolute;
  left: 0;
  top: 2px;
  width: 200%;
  height: 2px;
  background: repeating-linear-gradient(to right, #444 0 36px, transparent 36px 72px);
  animation: road-move var(--dur) linear forwards;
  will-change: transform;
}

@keyframes road-move {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* SMOKE */
.smoke {
  position: absolute;
  left: -16px;
  bottom: 8px;
  width: 10px;
  height: 10px;
  background: rgba(255,255,255,0.45);
  border-radius: 50%;
  animation: smoke 900ms ease-out infinite;
  will-change: transform, opacity;
  filter: blur(1px);
}
.smoke:nth-child(2) { animation-delay: 160ms; }
.smoke:nth-child(3) { animation-delay: 320ms; }

@keyframes smoke {
  0% { transform: translateY(0) scale(0.45); opacity: 0.7; }
  100% { transform: translateY(-26px) scale(1.5); opacity: 0; }
}

/* Fade out loader */
#page-loader.hide {
  opacity: 0;
  transition: opacity 400ms ease;
  pointer-events: none;
}

/* Lock scroll */
html.loader-lock,
html.loader-lock body {
  overflow: hidden !important;
}