/* The parked, open truck is the default, including without JavaScript. */
.journey-scene { aspect-ratio: 640 / 570; background: var(--surface); }
.journey-scene::after { display: none; }
.journey-art { width: 100%; height: auto; overflow: visible; }
.journey-scene .art-note { font-size: 14px; }
.scene-star { font-size: 35px; line-height: 1; color: var(--gold); }
.scene-landmarks { opacity: .54; }
.scene-landmarks .oil-derrick { opacity: .4; }
.prairie-horizon { opacity: .4; }
.truck-wordmark { fill: var(--cream); font: 700 28px var(--sans); letter-spacing: 3px; }
.truck-subtitle { fill: var(--gold); font: italic 17px var(--serif); }
.truck-small-type { fill: var(--muted); font: 500 6.5px var(--sans); letter-spacing: 1px; }
.truck-kitchen-type { fill: var(--cream); font: 600 8px var(--sans); letter-spacing: 1px; }
.truck-hatch { transform-origin: 331px 302px; transform: translateY(-4px) scaleY(.18); }
.truck-wheel { transform-origin: 0 0; }
.scene-footer { position: absolute; bottom: 16px; left: 22px; right: 22px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.scene-footer>span { margin-left: auto; color: var(--muted); font-size: 10px; }
.scene-replay { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 7px 13px; border: 1px solid #f5f2e93b; border-radius: 30px; color: var(--cream); font-size: 11px; }
.scene-replay:hover { background: #f5f2e910; border-color: var(--gold); }
.scene-replay>span { font-size: 21px; line-height: 1; }
.prairie-emblem { width: 310px; }
.prairie-emblem .emblem-driller { stroke: var(--gold); }

@media (prefers-reduced-motion: no-preference) {
  .scene-running .truck-arrival { animation: truck-arrive 1.9s cubic-bezier(.2,.75,.25,1) both; }
  .scene-running .truck-body { animation: truck-settle .6s 1.55s ease-out both; transform-origin: 320px 470px; }
  .scene-running .truck-wheel { animation: wheels-roll 1.9s cubic-bezier(.2,.75,.25,1) both; }
  .scene-running .truck-hatch { animation: hatch-open .9s 1.9s cubic-bezier(.2,.7,.2,1) both; }
  .scene-running .scene-landmarks { animation: landmarks-arrive 1.4s ease-out both; }
  .scene-running .scene-glow { animation: sunset-glow 3.8s ease-out both; }
  .scene-running .wheat-stalk { transform-origin: var(--wheat-origin); animation: prairie-breeze 2.1s var(--wheat-delay,0s) ease-in-out 2; }
  .menu-category:not([hidden]) { animation: menu-reveal .24s ease-out both; }
  [data-motion-reveal].is-revealed { animation: landmark-reveal .8s ease-out both; }
  .journey-scene:hover .scene-star { animation: emblem-glint .7s ease-out; }
}

@keyframes truck-arrive {
  0% { transform: translateX(-610px); }
  88% { transform: translateX(3px); }
  100% { transform: translateX(0); }
}
@keyframes truck-settle {
  0%,100% { transform: translateY(0) rotate(0); }
  35% { transform: translateY(1.5px) rotate(.5deg); }
  70% { transform: translateY(-.6px) rotate(-.2deg); }
}
@keyframes wheels-roll { from { transform: rotate(-540deg); } to { transform: rotate(0); } }
@keyframes hatch-open { from { transform: translateY(0) scaleY(1); } to { transform: translateY(-4px) scaleY(.18); } }
@keyframes landmarks-arrive { from { opacity: .15; transform: translateY(7px); } to { opacity: .54; transform: translateY(0); } }
@keyframes sunset-glow { from { opacity: .35; } to { opacity: 1; } }
@keyframes prairie-breeze { 0%,100% { transform: rotate(0); } 35% { transform: rotate(4deg); } 70% { transform: rotate(-2deg); } }
@keyframes menu-reveal { from { opacity: .45; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes landmark-reveal { from { opacity: .25; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes emblem-glint { 50% { color: var(--cream); text-shadow: 0 0 16px #d9c49a80; } }

@media (max-width: 1000px) {
  .journey-scene { aspect-ratio: 1; align-items: flex-start; }
}
@media (max-width: 650px) {
  .journey-scene .art-note { font-size: 12px; }
  .scene-footer { bottom: 9px; left: 14px; right: 14px; }
  .scene-footer>span { font-size: 9px; }
  .scene-replay { padding-inline: 10px; font-size: 10px; }
  .scene-star { font-size: 29px; }
  .spirit-art { width: 100%; }
  .prairie-emblem { width: min(265px,100%); }
}
@media (max-width: 360px) {
  .journey-scene .art-note { inset: 15px 18px auto; font-size: 11px; }
  .scene-footer { left: 10px; right: 10px; gap: 7px; }
  .scene-footer>span { font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .scene-replay { display: none; }
}
@media print {
  .prairie-emblem .emblem-driller { stroke: #555; }
}