/* Pedestres e carros — direção + animação (sobrescreve game.css walk-sw/drive) */

.pedestrians--art .walker {
  bottom: 4% !important;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.pedestrians--art .walker.dir-ltr {
  animation-name: walk-ltr;
}

.pedestrians--art .walker.dir-rtl {
  animation-name: walk-rtl;
}

@keyframes walk-ltr {
  0% { transform: translateX(-14vw); }
  100% { transform: translateX(114vw); }
}

@keyframes walk-rtl {
  0% { transform: translateX(114vw); }
  100% { transform: translateX(-14vw); }
}

.walker-actor,
.car-actor {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.walker.dir-ltr .walker-sprite--l,
.walker.dir-rtl .walker-sprite--r,
.car.dir-ltr .car-sprite--l,
.car.dir-rtl .car-sprite--r {
  display: none !important;
}

.walker-sprite,
.car-sprite {
  display: block;
  height: auto;
  object-fit: contain;
  pointer-events: none;
}

.pedestrians--art .walker-sprite {
  width: clamp(44px, 11vw, 56px);
  height: auto;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.35));
}

.pedestrians--art .walker.is-child {
  bottom: 3% !important;
}

.pedestrians--art .walker.is-child .walker-sprite {
  width: clamp(26px, 7vw, 36px);
}

.pedestrians--art .walker.is-dog {
  bottom: 1% !important;
}

.pedestrians--art .walker.is-dog .walker-sprite {
  width: clamp(28px, 7.5vw, 38px);
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.38));
}

.pedestrians--art .walker-actor {
  animation: walker-bob 0.42s ease-in-out infinite;
}

.pedestrians--art .walker.is-child .walker-actor {
  animation-duration: 0.34s;
}

.pedestrians--art .walker.is-dog .walker-actor {
  animation-duration: 0.24s;
}

.pedestrians--art .walker-actor .w-face {
  display: none;
}

@keyframes walker-bob {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-5px) rotate(1deg); }
}

.traffic--art .car {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.traffic--art .car.dir-ltr {
  animation-name: drive-ltr;
}

.traffic--art .car.dir-rtl {
  animation-name: drive-rtl;
}

@keyframes drive-ltr {
  0% { transform: translateX(-20vw); }
  100% { transform: translateX(120vw); }
}

@keyframes drive-rtl {
  0% { transform: translateX(120vw); }
  100% { transform: translateX(-20vw); }
}

.traffic--art .car-sprite {
  width: clamp(76px, 18vw, 118px);
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.4));
}

.traffic--art .car.is-truck .car-sprite {
  width: clamp(102px, 24vw, 150px);
  filter: drop-shadow(0 5px 12px rgba(0, 0, 0, 0.44)) saturate(0.92) brightness(0.92);
}

.traffic--art .car.is-moto .car-sprite {
  width: clamp(50px, 12vw, 74px);
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.36));
}

.traffic--art .car-actor {
  animation: car-bounce 0.12s ease-in-out infinite alternate;
}

.traffic--art .car.is-truck .car-actor {
  animation-duration: 0.16s;
}

.traffic--art .car.is-moto .car-actor {
  animation: moto-tilt 0.16s ease-in-out infinite alternate;
}

@keyframes car-bounce {
  from { transform: translateY(0); }
  to { transform: translateY(-2px); }
}

@keyframes moto-tilt {
  from { transform: translateY(0) rotate(-2deg); }
  to { transform: translateY(-1px) rotate(2deg); }
}

.traffic--art .car.is-moto.dir-rtl .car-sprite--l {
  transform: scaleX(-1);
}

.traffic--art .car-1 { bottom: 54% !important; }
.traffic--art .car-2 { bottom: 26% !important; }
.traffic--art .car-3 { bottom: 40% !important; }

.traffic--art .car.is-waiting-dog .car-actor {
  animation-play-state: paused;
  filter: drop-shadow(0 0 14px rgba(255, 220, 100, 0.55));
}

.walker-1 { animation-duration: 26s; }
.walker-2 { animation-duration: 22s; animation-delay: -7s; }
.walker-3 { animation-duration: 28s; animation-delay: -14s; bottom: 16% !important; }

.car-1 { animation-duration: 13s; }
.car-2 { animation-duration: 10s; animation-delay: -3s; }
.car-3 { animation-duration: 15s; animation-delay: -8s; }