/* A short, playful pest encounter. The truck parks after one pass. */
.van-encounter .van-stage { overflow: hidden; }
.van-encounter .ace-van { animation: none; transform: none; }
.van-road-pest {
  position: absolute;
  z-index: 3;
  left: 75%;
  bottom: 10px;
  width: clamp(34px, 4.5vw, 60px);
  pointer-events: none;
  opacity: 0;
  transform-origin: 50% 70%;
}
.van-road-pest img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 5px 3px rgb(36 48 24 / 16%));
}
.van-road-ant img { transform: rotate(36deg) scaleX(-1); }
.van-road-roach { left: 83%; --pest-delay: .09s; --pest-rise: -38px; --pest-spin: -110deg; }
.van-road-roach img { transform: rotate(82deg); }
.van-road-scorpion { left: 91%; --pest-delay: .18s; --pest-rise: -62px; --pest-spin: 155deg; }
.van-road-scorpion img { transform: rotate(-17deg); }
.van-bump-spark {
  position: absolute;
  z-index: 4;
  left: 87%;
  bottom: 30px;
  width: 27px;
  height: 27px;
  border: 2px solid #f58a42;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}
.van-encounter.is-encounter-ready .ace-van { transform: translateX(-115%); opacity: 0; }
.van-encounter.is-encounter-running .ace-van {
  animation: ace-van-encounter 4.6s cubic-bezier(.24,.6,.24,1) both;
}
.van-encounter.is-encounter-running .van-road-pest {
  animation: ace-ant-encounter 4.6s linear both;
  animation-delay: var(--pest-delay, 0s);
}
.van-encounter.is-encounter-running .van-bump-spark {
  animation: ace-friendly-bump 4.6s linear both;
}
.van-encounter.is-encounter-paused :is(.ace-van, .van-road-pest, .van-bump-spark) {
  animation-play-state: paused;
}
@keyframes ace-van-encounter {
  0%, 17% { transform: translateX(-115%); opacity: 0; }
  19% { opacity: 1; }
  59% { transform: translateX(-22%) rotate(0); opacity: 1; }
  63% { transform: translateX(-9%) rotate(-.35deg); }
  68% { transform: translateX(-2%) rotate(-.6deg); }
  78% { transform: translateX(1%) rotate(.35deg); }
  90%, 100% { transform: translateX(0) rotate(0); opacity: 1; }
}
@keyframes ace-ant-encounter {
  0% { transform: translate(-45px, 0) rotate(-3deg); opacity: 0; }
  5% { opacity: 1; }
  15% { transform: translate(-32px, -2px) rotate(2deg); }
  25% { transform: translate(-20px, 0) rotate(-2deg); }
  35% { transform: translate(-8px, -2px) rotate(2deg); }
  45%, 59% { transform: translate(0, 0) rotate(0); opacity: 1; }
  66% { transform: translate(65px, var(--pest-rise, -52px)) rotate(35deg); opacity: 1; }
  84%, 100% { transform: translate(100vw, -10px) rotate(var(--pest-spin, 130deg)); opacity: 1; }
}
@keyframes ace-friendly-bump {
  0%, 58% { opacity: 0; transform: scale(.3); }
  60% { opacity: .85; transform: scale(.8); }
  66%, 100% { opacity: 0; transform: scale(1.8); }
}
@media (max-width: 767px) {
  .van-encounter .van-stage { margin-left: 0; width: 100%; }
  .van-encounter .van-road { left: 0; width: 100%; }
  .van-road-pest { width: clamp(28px, 8.4vw, 48px); bottom: 8px; }
  .van-road-ant { left: 72%; }
  .van-road-roach { left: 81%; }
  .van-road-scorpion { left: 90%; }
  .van-bump-spark { width: 21px; height: 21px; bottom: 23px; }
}
@media (prefers-reduced-motion: reduce) {
  .van-encounter .ace-van,
  .van-encounter.is-encounter-ready .ace-van,
  .van-encounter.is-encounter-running .ace-van {
    animation: none;
    transform: none;
    opacity: 1;
  }
  .van-encounter :is(.van-road-pest, .van-bump-spark) { display: none; animation: none; }
}