/* ─── Bicycle Loading Overlay ─── */
#bicycle-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 30, 0.6);
  backdrop-filter: blur(3px);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 18px;
}

  #bicycle-overlay.visible {
    display: flex;
  }

  #bicycle-overlay p {
    color: #fff;
    font-size: 1.1rem;
    letter-spacing: .08em;
    margin: 0;
    animation: fadePulse 1.4s ease-in-out infinite;
  }

@keyframes fadePulse {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: 0.3;
  }
}

/* Wheels spin around their own centre.
   transform-box:fill-box makes transform-origin relative to the element bbox,
   so "50% 50%" always means the element's own centre. */
.bike-wheel {
  animation: spin 0.75s linear infinite;
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

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

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