/* Small moments for the bus maps. Each is one-shot and under a second; reduced motion turns all of them off (bottom). */

/* A minute changed: the new number slides up. "Arr" also gets one soft ring. */
@keyframes eta-roll { from { opacity: 0; transform: translateY(.5em); } to { opacity: 1; transform: none; } }
@keyframes eta-due { 0% { box-shadow: 0 0 0 0 rgba(233, 184, 58, .85); } 100% { box-shadow: 0 0 0 9px rgba(233, 184, 58, 0); } }
.eta-roll { animation: eta-roll .32s cubic-bezier(.25, 1, .5, 1); }
.eta-roll.eta-due { border-radius: 4px; animation: eta-roll .32s cubic-bezier(.25, 1, .5, 1), eta-due .9s ease-out; }

/* A live bus: pops in when first seen, and rings once as it comes due. */
@keyframes bus-live-enter { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes bus-live-due { 0% { transform: scale(1); } 35% { transform: scale(1.3); } 100% { transform: scale(1); } }
.bus-live-icon.is-entering .bus-live-pin { animation: bus-live-enter .45s cubic-bezier(.34, 1.56, .64, 1); }
.bus-live-pin.is-due { animation: bus-live-due .7s cubic-bezier(.34, 1.56, .64, 1); box-shadow: 0 0 0 3px rgba(233, 184, 58, .9), 0 0 0 1px var(--nv-ok), 0 2px 5px rgba(28, 36, 56, .3); }

/* Saving a star: it springs. */
@keyframes bus-star-pop { 0% { transform: scale(1) rotate(0); } 40% { transform: scale(1.5) rotate(-14deg); } 70% { transform: scale(.92) rotate(4deg); } 100% { transform: scale(1) rotate(0); } }
.bus-star.is-popped svg { animation: bus-star-pop .5s cubic-bezier(.34, 1.56, .64, 1); }

/* The chosen stop and the stops of a trip drop onto the map; "Looking here" lands the same way. */
@keyframes bus-pin-drop { 0% { opacity: 0; transform: translateY(-22px) scale(.85); } 55% { opacity: 1; transform: translateY(3px) scale(1.04); } 100% { opacity: 1; transform: none; } }
@keyframes bus-look-drop { 0% { opacity: 0; transform: translateY(-22px) rotate(-45deg); } 55% { opacity: 1; transform: translateY(3px) rotate(-45deg); } 100% { opacity: 1; transform: rotate(-45deg); } }
.bus-stop-selected .bus-stop-pin-fa { animation: bus-pin-drop .5s cubic-bezier(.25, 1, .5, 1); }
.bus-looking-pin { animation: bus-look-drop .5s cubic-bezier(.25, 1, .5, 1); }

/* Arriving at the end of a trip. */
@keyframes bus-trip-fill { from { width: 0; } }
@keyframes bus-trip-arrive { 0% { transform: scale(.94); opacity: 0; } 60% { transform: scale(1.03); opacity: 1; } 100% { transform: none; } }
.bus-trip-progress.is-complete span { background: var(--nv-accent, #e9b83a); }
.bus-trip-progress.is-filling span { animation: bus-trip-fill .8s cubic-bezier(.25, 1, .5, 1); }
.bus-trip.is-arrived-now h3 { animation: bus-trip-arrive .55s cubic-bezier(.34, 1.56, .64, 1); transform-origin: left center; }
.bus-trip-summary { margin: 6px 0 0; color: var(--nv-muted, #596174); font-size: .8125rem; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Rain at the stop: a tiny pill beside the stop code; the detail is its tooltip. */
@keyframes bus-rain-in { from { opacity: 0; } to { opacity: 1; } }
.bus-rain { display: inline-flex; align-items: center; gap: 3px; padding: 0 6px; border: 1px solid var(--nv-line, #d8dce3); border-radius: 999px; background: #fff; color: var(--nv-muted, #596174); font-size: .6875rem; font-weight: 600; line-height: 1.5; animation: bus-rain-in .35s ease-out; }
.bus-rain svg { flex: none; width: 12px; height: 12px; }

@media (prefers-reduced-motion: reduce) {
    .eta-roll, .eta-roll.eta-due, .bus-live-icon.is-entering .bus-live-pin, .bus-live-pin.is-due, .bus-star.is-popped svg,
    .bus-stop-selected .bus-stop-pin-fa, .bus-looking-pin, .bus-trip-progress.is-filling span,
    .bus-trip.is-arrived-now h3, .bus-rain { animation: none; }
}