/* The map ride (#ride). Without .is-riding (JS off, reduced motion) it is a static map followed by the stop cards in the flow.
   ride.js adds .is-riding: the chapter grows tall, the stage pins for 100svh, and scroll changes only transform and opacity.
   Shared by every guest list, so no event, city or date in here. */
.chapter--ride { position: relative; }
.ride__stage { position: relative; display: flex; flex-direction: column; padding: 14px 14px calc(var(--menu-h) + env(safe-area-inset-bottom) + 16px); }
.ride__title { font-size: clamp(30px, 4.6svh, 36px); padding-left: 6px; }
.ride__chips { display: flex; gap: 6px; margin-top: 6px; }
.ride__chip { flex: 1 1 auto; min-height: 52px; padding: 4px 6px; border-radius: 14px; border: 1px solid var(--gold); background: rgba(251,240,208,.92);
  display: grid; place-content: center; text-align: center; }
.ride__chip .caps { font-size: 9.5px; letter-spacing: .08em; }
.ride__chip b { position: relative; justify-self: center; font: 700 18px/1.1 var(--fact); }
.ride__chip b::before { content: "✓"; position: absolute; right: 100%; padding-right: 3px; color: var(--leaf); opacity: 0; }
.ride__chip.is-done b::before { opacity: 1; }
.ride__chip[aria-current] { background: var(--bridal); border-color: var(--bridal); color: var(--jasmine); }

/* the map: 390 units wide, full bleed; --w/--h is this guest's viewBox */
.ride__map { position: relative; margin: 6px -14px 0; }
.ride__inner { position: relative; aspect-ratio: var(--w) / var(--h); }
.ride__inner svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ride__route { fill: none; stroke: var(--copper); stroke-width: 2.5; stroke-dasharray: 1 7; stroke-linecap: round; }
.ride__solid { fill: none; stroke: var(--copper); stroke-width: 4; stroke-linecap: round; }
.ride__pin { fill: var(--rose); stroke: var(--jasmine); stroke-width: 2.5; }
.ride__label { font: 400 23px var(--script); fill: var(--ink); }
.ride__state { font: 700 9.5px var(--caps); letter-spacing: .3em; fill: var(--ink); opacity: .45; }
.ride__note { font: italic 500 11px var(--fact); fill: var(--copper); }
/* 84 of the map's 390 units; stands on its wheels' contact point (92% down), which sits on the route */
.ride__bike { position: absolute; left: var(--x); top: var(--y); width: 21.5%; transform: translate(-50%, -92%); transform-origin: 50% 92%; }
.ride__ring { position: absolute; width: 7.7%; aspect-ratio: 1; margin: -3.85% 0 0 -3.85%; border-radius: 50%; border: 2px solid rgba(222,70,88,.6); opacity: 0; }
.ride__ring::after { content: ""; position: absolute; inset: -30%; border-radius: 50%; border: 1.5px solid rgba(222,70,88,.3); }
.ride__reveal, .ride__ring, .ride__foot, .ride__hint { display: none; }

/* stop cards: stacked in the flow by default, bottom sheets while riding */
.ride__sheet { position: relative; margin: 30px -6px 0; padding: 0; scroll-margin-top: 36px; }
.ride__card { padding: 20px 20px 14px; }
.ride__card + .ride__card { border-top: 1px dashed var(--gold); }
.ride__where { padding-right: 64px; }
.ride__event { font-size: 46px; margin: 4px 0 2px; }
.ride__callout { margin-top: 10px; }
.ride__buttons { margin-top: 12px; }
.ride__buttons .btn { padding: 0 8px; gap: 6px; font-size: clamp(14px, 4.1vw, 17px); }
.ride__more { display: flex; align-items: center; justify-content: center; gap: 2px; min-height: 40px; margin-top: 4px; font-size: 15px;
  text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }
.ride__more .icon { width: 18px; height: 18px; }
.ride__stk { position: absolute; z-index: 1; right: 14px; top: -24px; }
.ride__stk .sticker { width: 64px; height: 64px; outline-offset: -5px; }
.ride__stk .sticker span { font-size: 6.5px; padding: 0 5px; }

/* ---------- riding ---------- */
/* the snap markers ride.js adds take over from the chapter's own snap, including one at the chapter top */
.chapter--ride.is-riding { scroll-snap-align: none; }
.ride__snap { position: absolute; left: 0; width: 1px; height: 1px; scroll-snap-align: start; pointer-events: none; }
.is-riding .ride__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; padding-bottom: calc(var(--menu-h) + env(safe-area-inset-bottom) + 8px); }
.is-riding .ride__map { flex: 1 1 0; min-height: 0; overflow: hidden; container-type: size; display: grid; }
.is-riding .ride__inner { width: min(100cqw, 100cqh * var(--w) / var(--h)); margin: auto; will-change: transform; }
.is-riding .ride__bike { left: 0; top: 0; will-change: transform; }
/* the ridden road: a window slides sideways over the solid route while the route inside slides back, so it stays put */
.is-riding .ride__reveal { display: block; position: absolute; inset: 0; overflow: hidden; will-change: transform; }
.is-riding .ride__reveal svg { will-change: transform; }
.is-riding .ride__ring { display: block; }

.is-riding .ride__foot { display: flex; align-items: center; gap: 14px; padding-top: 8px; }
.ride__bag { position: relative; flex: none; width: min(152px, 38vw); height: clamp(70px, 12.5svh, 108px); border-radius: 14px;
  background: var(--sage-light); border: 2px solid var(--wood); display: flex; align-items: center; justify-content: center; gap: 5px; }
.ride__bag::before { content: ""; position: absolute; inset: -2px 26px; border: solid var(--wood); border-width: 0 2px; opacity: .5; }
.ride__slot { display: grid; }
.ride__slot > * { grid-area: 1 / 1; }
.ride__bag .sticker { width: 42px; height: 42px; outline-offset: -4px; }
.ride__bag .sticker b { font-size: 22px; }
.ride__got { opacity: 0; }
.ride__nexts { display: grid; min-width: 0; }
.ride__next { grid-area: 1 / 1; opacity: 0; }
.ride__city { font-size: clamp(25px, 8vw, 31px); margin: 3px 0 4px; white-space: nowrap; }
.ride__next .fact { font-size: 18px; line-height: 1.2; }
.is-riding .ride__hint { display: flex; position: static; flex-flow: row wrap; justify-content: center; column-gap: 8px; padding-top: 10px; }

.is-riding .ride__sheet { position: absolute; z-index: 3; left: 8px; right: 8px; bottom: calc(var(--menu-h) + env(safe-area-inset-bottom) + 8px);
  margin: 0; transform: translateY(120%); will-change: transform; }
.is-riding .ride__cards { overflow: hidden; border-radius: 22px; }
.is-riding .ride__row { display: flex; will-change: transform; }
.is-riding .ride__card { flex: 0 0 100%; }
.is-riding .ride__card + .ride__card { border-top: 0; }
.is-riding .ride__stk { will-change: transform, opacity; }
/* flipped at stop thresholds; will-change keeps the 0 <-> 1 opacity switch from costing a layout */
.is-riding :is(.ride__ring, .ride__got, .ride__next), .is-riding .ride__chip b::before { will-change: opacity; }