/* =========================================================================
   VIBUS LOADING SCREEN
   ---------------------------------------------------------------------
   Self-contained loading experience shown while BusAPI calls are in
   flight. Designed to sit *inside* a results/details container (not a
   full-page takeover) so the rest of the app chrome stays visible.
   Uses only transform + opacity animations (GPU-accelerated, 60fps-safe
   on low-end devices). Respects prefers-reduced-motion.
   ========================================================================= */

:root{
  --vl-bg:#FFFFFF;
  --vl-primary:#1976D2;
  --vl-light:#E3F2FD;
  --vl-accent:#42A5F5;
  --vl-text:#212121;
  --vl-text-secondary:#757575;
  --vl-success:#2E7D32;
}

.vl-overlay{
  position:absolute;
  inset:0;
  background:var(--vl-bg);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:28px;
  padding:32px 24px;
  z-index:30;
  opacity:0;
  pointer-events:none;
  transition:opacity .35s ease;
}
.vl-overlay.vl-show{
  opacity:1;
  pointer-events:auto;
}

.vl-logo{
  font-family:'Poppins',sans-serif;
  font-weight:700;
  font-size:15px;
  letter-spacing:.02em;
  color:var(--vl-primary);
  display:flex;
  align-items:center;
  gap:6px;
}
.vl-logo svg{ flex-shrink:0; }

.vl-scene{
  width:100%;
  max-width:220px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
}

.vl-bus-wrap{
  width:100%;
  animation:vlBusBounce 1.8s cubic-bezier(.45,.05,.55,.95) infinite;
  will-change:transform;
}
@keyframes vlBusBounce{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-4px); }
}

.vl-wheel{
  transform-origin:center;
  animation:vlWheelSpin .7s linear infinite;
  will-change:transform;
}
@keyframes vlWheelSpin{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(360deg); }
}

.vl-headlight{
  animation:vlHeadlightGlow 1.6s ease-in-out infinite;
}
@keyframes vlHeadlightGlow{
  0%,100%{ opacity:.55; }
  50%{ opacity:1; }
}

.vl-route{
  position:relative;
  width:100%;
  height:3px;
  background:var(--vl-light);
  border-radius:4px;
  overflow:hidden;
}
.vl-route::after{
  content:"";
  position:absolute;
  top:0; left:0;
  width:40%;
  height:100%;
  background:linear-gradient(90deg, transparent, var(--vl-primary), var(--vl-accent), transparent);
  animation:vlRouteSweep 1.8s ease-in-out infinite;
  will-change:transform;
}
@keyframes vlRouteSweep{
  0%{ transform:translateX(-100%); }
  100%{ transform:translateX(350%); }
}

.vl-dots{
  display:flex;
  justify-content:space-between;
  width:100%;
  padding:0 2px;
}
.vl-dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--vl-accent);
  animation:vlDotPulse 1.6s ease-in-out infinite;
  will-change:transform, opacity;
}
.vl-dot:nth-child(1){ animation-delay:0s; }
.vl-dot:nth-child(2){ animation-delay:.2s; }
.vl-dot:nth-child(3){ animation-delay:.4s; }
.vl-dot:nth-child(4){ animation-delay:.6s; }
.vl-dot.vl-dest{ background:var(--vl-primary); }
@keyframes vlDotPulse{
  0%,100%{ opacity:.35; transform:scale(1); }
  50%{ opacity:1; transform:scale(1.35); }
}

.vl-cloud{
  position:absolute;
  background:var(--vl-light);
  border-radius:50%;
  opacity:.6;
  animation:vlCloudDrift 8s ease-in-out infinite alternate;
  will-change:transform;
}
.vl-cloud-1{ width:34px; height:12px; top:6px; left:8%; }
.vl-cloud-2{ width:26px; height:9px; top:2px; right:12%; animation-delay:1.2s; }
@keyframes vlCloudDrift{
  from{ transform:translateX(0); }
  to{ transform:translateX(10px); }
}

.vl-message{
  min-height:20px;
  font-size:14px;
  font-weight:500;
  color:var(--vl-text-secondary);
  text-align:center;
  opacity:0;
  transform:translateY(4px);
  transition:opacity .35s ease, transform .35s ease;
}
.vl-message.vl-msg-visible{
  opacity:1;
  transform:translateY(0);
}

.vl-message.vl-waking{
  color:var(--vl-primary);
  font-weight:600;
  max-width:280px;
  line-height:1.4;
}

/* ---------- success transition ---------- */
.vl-overlay.vl-success .vl-bus-wrap{
  animation-play-state:paused;
}
.vl-overlay.vl-success .vl-wheel{
  animation-duration:2.2s;
}
.vl-overlay.vl-success .vl-route::after{
  animation-play-state:paused;
  opacity:0;
}
.vl-overlay.vl-success .vl-dest{
  animation:none;
  opacity:1;
  transform:scale(1.6);
  transition:transform .3s ease;
}

.vl-check{
  width:22px; height:22px;
  border-radius:50%;
  background:var(--vl-success);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transform:scale(.6);
  transition:opacity .3s ease, transform .3s ease;
  position:absolute;
  top:-6px;
  right:calc(50% - 100px);
}
.vl-overlay.vl-success .vl-check{
  opacity:1;
  transform:scale(1);
}
.vl-message.vl-done{
  color:var(--vl-success);
  font-weight:700;
}

/* ---------- error / retry state ---------- */
.vl-error{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  text-align:center;
  max-width:280px;
}
.vl-error-icon{
  width:44px; height:44px;
  border-radius:50%;
  background:var(--vl-light);
  color:var(--vl-primary);
  display:flex; align-items:center; justify-content:center;
}
.vl-error-text{
  font-size:14px;
  color:var(--vl-text);
  font-weight:500;
  line-height:1.45;
}
.vl-retry-btn{
  background:var(--vl-primary);
  color:#fff;
  border:none;
  padding:10px 22px;
  border-radius:10px;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
}
.vl-retry-btn:active{ background:#125aa0; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .vl-bus-wrap, .vl-wheel, .vl-headlight, .vl-route::after,
  .vl-dot, .vl-cloud{
    animation:none !important;
  }
  .vl-overlay, .vl-message{
    transition:opacity .25s ease !important;
    transform:none !important;
  }
}