/* Station 2 · the ride */
.fahrt { height: 100dvh; background: #A9CBE3; }
.scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.scene .vespa-svg .badge { font: italic 700 17px var(--display); fill: var(--trim); }

.fahrt .note { top: calc(22px + env(safe-area-inset-top)); font-size: 17.5px; }
.fahrt { transition: opacity .6s ease; }
.fahrt.leaving { opacity: 0; }

.ride-panel {
  /* up in the sky, right under the question — the road below stays visible */
  position: absolute; left: 12px; right: 12px; top: calc(84px + env(safe-area-inset-top));
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  padding: 12px;
  background: var(--navy);
  border-radius: 18px;
  box-shadow: 0 10px 30px #0006;
  animation: rise .35s cubic-bezier(.2, .8, .2, 1);
}
.ride-panel button:not(.chip) {
  padding: 13px 10px;
  border: 1px solid #FBF4E82e; border-radius: 12px;
  background: var(--navy-2); color: var(--cream);
  font: 600 16px var(--text);
}
.ride-panel button.primary { background: var(--gold); border-color: var(--gold); color: var(--navy); }
.ride-panel button.wide { grid-column: 1 / -1; }
.ride-q { grid-column: 1 / -1; margin: 0 0 2px 4px; font: italic 600 19px var(--display); color: var(--gold-soft); }
.fin-sub { grid-column: 1 / -1; margin: -4px 0 4px 4px; font: italic 500 16px var(--display); color: var(--cream); }
@keyframes rise { from { transform: translateY(-12px); opacity: 0; } }

/* finale: the day chips on the summary */
.day-chips { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.ride-panel .chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 10px 7px 12px; border: 0; border-radius: 999px;
  background: var(--cream); color: var(--navy);
  font: 600 15px var(--label); letter-spacing: .06em;
}
.chip span { font-size: 16px; opacity: .55; }

/* finale: yellow signposts, one per day — navy with a gold tick once chosen */
.sign { cursor: pointer; outline: none; }
.sign .sp-bg { fill: #F2B705; stroke: #1B1B1B; stroke-width: 2; transition: fill .2s; }
.sign .sp-line { stroke: #1B1B1B; stroke-width: 1.2; }
.sign .sp-text { font: 700 19px var(--label); fill: #111; letter-spacing: .03em; }
.sign .sp-check { display: none; }
.sign .sp-check circle { fill: var(--gold); stroke: var(--navy); stroke-width: 1.5; }
.sign .sp-check path { fill: none; stroke: var(--navy); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sign.sel .sp-bg { fill: var(--navy); stroke: var(--gold); }
.sign.sel .sp-line { stroke: var(--gold); }
.sign.sel .sp-text { fill: var(--gold-soft); }
.sign.sel .sp-check { display: inline; }
.sign:focus-visible .sp-bg { stroke: #fff; stroke-width: 3; }

/* wheels, hair, waving */
.riding .wheel-spin { transform-box: fill-box; transform-origin: center; animation: spin .42s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.riding .hair-flow { transform-box: fill-box; transform-origin: 95% 4%; animation: hair .55s ease-in-out infinite alternate; }
@keyframes hair { from { transform: rotate(-3deg); } to { transform: rotate(2.5deg); } }
.waving .wave-hand { transform-box: fill-box; transform-origin: 15% 95%; animation: wave .32s ease-in-out infinite alternate; }
@keyframes wave { from { transform: rotate(-16deg); } to { transform: rotate(14deg); } }

/* the BMW's paint (dark metallic grey, adjustable) and lights, Leo's sunglasses */
.bmw { --bmw: #666C71; }   /* matched to Leo's photo */
.bmw [data-bmw="flash"], .bmw [data-bmw="brake"], .bmw [data-bmw="blink"] { opacity: 0; }
.bmw.flash [data-bmw="flash"] { opacity: 1; }
.bmw.braking [data-bmw="brake"] { opacity: 1; }
.bmw.blinking [data-bmw="blink"] { animation: blink .7s steps(1) infinite; }
@keyframes blink { 0% { opacity: 1; } 50% { opacity: 0; } }
.leo-inset { opacity: 0; transition: opacity .3s ease; }
.leo-inset.show { opacity: 1; }
.bmw .leo-shades { transition: transform .35s ease; }
.bmw.wink .leo-shades { transform: translateY(5px); }
.bmw .leo-eyes { opacity: 0; transition: opacity .2s .1s; }
.bmw.wink .leo-eyes { opacity: 1; }