/* ─── 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); }
}