/* ==========================================================================
   XO ride
   The small line-art scooter that crosses the empty seams of the page as
   the visitor scrolls. Positions are written by static/js/ride.js as
   transforms; this file only sizes the sprites and animates the parts
   that live while she moves (hair, dress tail, a faint bob) or waits
   (the waving arm of a guest she has dropped off).
   ========================================================================== */

.ride {
    position: absolute; top: 0; left: 0; width: 100%; height: 0;
    overflow: visible; pointer-events: none; z-index: 5;
    opacity: 0; transition: opacity 700ms var(--ease-out);
}
.ride.is-on { opacity: 1; }

.ride-bike-wrap { position: absolute; top: 0; left: 0; }
.ride-bike {
    --ink: #1d1d1f;
    display: block; width: var(--rb-w, 72px); height: auto; overflow: visible;
    will-change: transform;
}
.ride-guest {
    --ink: #1d1d1f;
    position: absolute; width: var(--rg-w, 26px); will-change: transform;
}
.ride-guest svg { display: block; width: 100%; height: auto; overflow: visible; }
/* A guest waiting on a leftward run faces the other way; the flag keeps
   its own orientation so its stripes still read correctly. */
.ride-guest.is-flipped svg { transform: scaleX(-1); }
.ride-guest.is-flipped .rg-flag { transform: scaleX(-1); transform-box: fill-box; transform-origin: center; }

/* Parts that live while she is moving */
.rb-hair { transform-box: view-box; transform-origin: 55px 10px; }
.rb-tail { transform-box: view-box; transform-origin: 42px 41px; }
.rb-bob { transform-box: view-box; }
.ride-bike.is-moving .rb-hair { animation: rb-flutter 380ms ease-in-out infinite alternate; }
.ride-bike.is-moving .rb-tail { animation: rb-tailwave 460ms ease-in-out infinite alternate; }
.ride-bike.is-moving .rb-bob { animation: rb-bob 300ms ease-in-out infinite alternate; }

/* The guest she dropped off keeps waving her goodbye */
.rg-arm.is-waving { transform-box: view-box; transform-origin: 15px 28px; animation: rg-wave 900ms ease-in-out infinite alternate; }

@keyframes rb-flutter  { from { transform: rotate(-4deg); }   to { transform: rotate(5deg); } }
@keyframes rb-tailwave { from { transform: rotate(-3deg); }   to { transform: rotate(4deg); } }
@keyframes rb-bob      { from { transform: translateY(0); }   to { transform: translateY(-0.9px); } }
@keyframes rg-wave     { from { transform: rotate(-12deg); }  to { transform: rotate(14deg); } }

@media (prefers-reduced-motion: reduce) { .ride { display: none; } }
@media print { .ride { display: none !important; } }