/* ================================================================
   Sepeda — mascot behaviour
   ================================================================
   The mark itself is in templates/fragments/sepeda.html. This file
   only carries motion and per-pose adjustments.

   Every animation is inside @media (prefers-reduced-motion:
   no-preference). A user who has asked their OS to stop moving things
   gets the static pose, which is why each pose has to read correctly
   with no animation at all.
   ================================================================ */

.sepeda {
    display: block;
    flex-shrink: 0;
}

/* Each wheel's spokes turn around their own hub, not the canvas corner. */
.sepeda-wheel--rear  { transform-origin: 16px 42px; }
.sepeda-wheel--front { transform-origin: 48px 42px; }

/* ---- riding: the wheels turn while the model is generating ---- */
@media (prefers-reduced-motion: no-preference) {
    .sepeda--riding .sepeda-wheel {
        animation: sepeda-spin 1.2s linear infinite;
    }

    .sepeda--riding .sepeda-body {
        animation: sepeda-bump 0.6s ease-in-out infinite;
    }
}

@keyframes sepeda-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes sepeda-bump {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-1px); }
}

/* ---- alert: used on the error state, deliberately motionless ---- */
.sepeda--alert .sepeda-body {
    transform-origin: 32px 53px;
    transform: rotate(-14deg);
}