/* ───────────── Aakri truck scene (partials/_truck_scene.html) ─────────────
   States, set by truck-scene.js on .aakri-truck-scene:
   .is-armed    truck waits off-screen left (only once JS has run, so no-JS shows it parked)
   .is-playing  drive in (2.5s), settle, then idle breathing
   Reduced motion: always parked, lime pin, no animation. */

.aakri-truck-scene {
  --ts-lime: #8CD83A;
  --ts-pin: #5B6356;
  --ts-drive: 2.5s;
  --ts-ease: cubic-bezier(0.17, 0.84, 0.32, 1); /* strong ease-out: rolls in, eases to a stop */
  --ts-from: -720px;                            /* off-screen left, in SVG user units */
  width: 100%; max-width: 1200px; margin: 0 auto; overflow: hidden;
}
.aakri-truck-scene svg { display: block; width: 100%; height: auto; max-height: 220px; overflow: visible; }

/* Pins */
.ts-pin path { fill: var(--ts-pin); transition: fill 0.4s ease; }
.ts-pin__hole { fill: var(--bg-default); }
.ts-pin__pulse { fill: none; stroke: var(--ts-lime); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.ts-speed { opacity: 0; }

/* Rotation and bounce pivots */
.ts-wheel { transform-box: fill-box; transform-origin: center; }
.ts-body { transform-box: fill-box; transform-origin: 50% 100%; }

/* ── Armed: waiting off-screen until the scene scrolls into view ── */
.aakri-truck-scene.is-armed .ts-move { transform: translateX(var(--ts-from)); }

/* ── Playing ── */
.aakri-truck-scene.is-playing .ts-move { animation: ts-drive var(--ts-drive) var(--ts-ease) both; }
/* Wheels turn exactly as far as the truck travels (720 / r22 ≈ 1875°) with the same easing, so they roll, not slide. */
.aakri-truck-scene.is-playing .ts-wheel { animation: ts-roll var(--ts-drive) var(--ts-ease) both; }
.aakri-truck-scene.is-playing .ts-body {
  animation:
    ts-bump 0.3s ease-in-out 0s 8 alternate,              /* road bounce while driving (2.4s) */
    ts-settle 0.6s ease-out var(--ts-drive) 1,            /* one settle on arrival */
    ts-breathe 3s ease-in-out calc(var(--ts-drive) + 0.6s) infinite; /* gentle idle bob */
}
.aakri-truck-scene.is-playing .ts-speed { animation: ts-speed var(--ts-drive) ease-out both; }
.aakri-truck-scene.is-playing .ts-speed path { stroke-dasharray: 36 22; animation: ts-dash 0.45s linear 0s 6; }
.aakri-truck-scene.is-playing .ts-pin--target path { animation: ts-pin-on 0.4s ease var(--ts-drive) both; }
.aakri-truck-scene.is-playing .ts-pin__pulse { animation: ts-pulse 1.6s ease-out var(--ts-drive) 2; }

@keyframes ts-drive { from { transform: translateX(var(--ts-from)); } to { transform: translateX(0); } }
@keyframes ts-roll { from { transform: rotate(-1875deg); } to { transform: rotate(0deg); } }
@keyframes ts-bump { from { transform: translateY(0); } to { transform: translateY(-1.6px); } }
@keyframes ts-settle {
  0% { transform: translateY(0); } 35% { transform: translateY(1.8px); }
  70% { transform: translateY(-0.6px); } 100% { transform: translateY(0); }
}
@keyframes ts-breathe { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1px); } }
@keyframes ts-speed { 0% { opacity: 0; } 12% { opacity: 0.75; } 70% { opacity: 0.55; } 100% { opacity: 0; } }
@keyframes ts-dash { to { stroke-dashoffset: 58; } }
@keyframes ts-pin-on { from { fill: var(--ts-pin); } to { fill: var(--ts-lime); } }
@keyframes ts-pulse { 0% { opacity: 0.7; transform: scale(1); } 100% { opacity: 0; transform: scale(2.6); } }

/* ── Reduced motion: parked, lime pin, nothing moves ── */
@media (prefers-reduced-motion: reduce) {
  .aakri-truck-scene .ts-move, .aakri-truck-scene .ts-wheel, .aakri-truck-scene .ts-body,
  .aakri-truck-scene .ts-speed, .aakri-truck-scene .ts-speed path,
  .aakri-truck-scene .ts-pin path, .aakri-truck-scene .ts-pin__pulse { animation: none !important; transform: none !important; }
  .aakri-truck-scene .ts-speed { opacity: 0; }
  .aakri-truck-scene .ts-pin--target path { fill: var(--ts-lime); }
}