/* ---------------- HERO SCENE ---------------- */
.scene-wrap { position: absolute; inset: 0; }
.hero-svg { width: 100%; height: 100%; display: block; }

/* truck drives across the scene */
.truck {
  animation: truckDrive 9s cubic-bezier(.35,0,.65,1) infinite;
  transform-box: fill-box;
}
@keyframes truckDrive {
  0%   { transform: translateX(-260px); }
  45%  { transform: translateX(280px); }
  55%  { transform: translateX(280px); }
  100% { transform: translateX(900px); }
}

/* wheel spin */
.wheel {
  animation: spin 0.6s linear infinite;
  transform-box: fill-box;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* exhaust puff fading */
.puff { animation: puff 1.6s ease-in-out infinite; }
@keyframes puff {
  0%   { opacity: .9; transform: translate(0,0); }
  100% { opacity: 0; transform: translate(-22px,-14px); }
}

/* motion lines flicker */
.motion {
  animation: motionFlash .4s steps(2,end) infinite;
}
@keyframes motionFlash {
  0%, 100% { opacity: 1; }
  50% { opacity: .5; }
}

/* lane dashes scrolling */
.lane {
  animation: laneScroll 1.2s linear infinite;
}
@keyframes laneScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-70px); }
}

/* clouds drifting */
.cloud {
  animation: drift 26s linear infinite;
}
.cloud-1 { transform: translate(120px, 100px); animation-duration: 30s; }
.cloud-2 { transform: translate(380px, 70px); animation-duration: 38s; }
.cloud-3 { transform: translate(700px, 130px); animation-duration: 24s; }
@keyframes drift {
  from { transform: translateX(-120px); }
  to   { transform: translateX(900px); }
}
/* keep different start positions */
.cloud-1 { animation-name: drift1; }
.cloud-2 { animation-name: drift2; }
.cloud-3 { animation-name: drift3; }
@keyframes drift1 {
  from { transform: translate(-120px, 100px); }
  to   { transform: translate(900px, 100px); }
}
@keyframes drift2 {
  from { transform: translate(80px, 70px); }
  to   { transform: translate(1100px, 70px); }
}
@keyframes drift3 {
  from { transform: translate(-200px, 130px); }
  to   { transform: translate(800px, 130px); }
}

/* dropped packages — appear then fall */
.pkg {
  transform-box: fill-box;
  transform-origin: center;
}
.pkg-1 {
  animation: pkgDrop 9s cubic-bezier(.6,.1,.85,.9) infinite;
}
.pkg-2 {
  animation: pkgDrop2 9s cubic-bezier(.6,.1,.85,.9) infinite;
  animation-delay: 1.2s;
}
@keyframes pkgDrop {
  0%, 48% { opacity: 0; transform: translate(280px, 380px) rotate(0deg); }
  49%     { opacity: 1; transform: translate(280px, 380px) rotate(0deg); }
  72%     { opacity: 1; transform: translate(220px, 460px) rotate(140deg); }
  78%, 100% { opacity: 0; transform: translate(200px, 462px) rotate(140deg); }
}
@keyframes pkgDrop2 {
  0%, 48% { opacity: 0; transform: translate(300px, 380px) rotate(0deg); }
  49%     { opacity: 1; transform: translate(300px, 380px) rotate(0deg); }
  74%     { opacity: 1; transform: translate(340px, 458px) rotate(-120deg); }
  80%, 100% { opacity: 0; transform: translate(360px, 460px) rotate(-120deg); }
}

/* dust subtle */
.dust circle {
  animation: dust 3s ease-in-out infinite;
}
@keyframes dust {
  0%, 100% { opacity: .25; transform: translateY(0); }
  50%      { opacity: .8;  transform: translateY(-4px); }
}

/* stage chips overlay */
.stage-chip {
  position: absolute;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(10,10,10,.85);
  color: #fff;
  font-size: 12px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 8px;
  backdrop-filter: blur(8px);
  animation: chipFloat 4s ease-in-out infinite;
}
.stage-chip .dot {
  width: 8px; height: 8px; border-radius: 50%; background: #5BD16A;
  box-shadow: 0 0 0 0 #5BD16A; animation: chipPulse 1.6s infinite;
}
.stage-chip strong { color: var(--gold-500); font-weight: 700; }
.stage-chip-1 { top: 32px; left: 32px; }
.stage-chip-2 { bottom: 32px; right: 32px; animation-delay: 1.2s; }
@keyframes chipFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@keyframes chipPulse {
  0% { box-shadow: 0 0 0 0 rgba(91,209,106,.6); }
  70% { box-shadow: 0 0 0 8px rgba(91,209,106,0); }
}

/* ---------------- FOOTER SCENE ---------------- */
.footer-stage { position: relative; }
.footer-svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
}

.truck-foot {
  animation: truckDriveFoot 14s linear infinite;
  transform-box: fill-box;
}
@keyframes truckDriveFoot {
  from { transform: translateX(-260px); }
  to   { transform: translateX(1700px); }
}
.wheel-foot { animation: spin 0.5s linear infinite; transform-box: fill-box; }
.motion-foot { animation: motionFlash .35s steps(2,end) infinite; }
.lane-foot { animation: laneScrollFoot 1s linear infinite; }
@keyframes laneScrollFoot {
  from { transform: translateX(0); }
  to   { transform: translateX(-72px); }
}

.star {
  animation: twinkle 2.4s ease-in-out infinite;
}
.star-0 { animation-delay: 0s; }
.star-1 { animation-delay: .8s; }
.star-2 { animation-delay: 1.6s; }
@keyframes twinkle {
  0%, 100% { opacity: .3; }
  50%      { opacity: 1; }
}