/* Theme variables */
.menu-item-str-truck{
  --str-size: 26px;
  --str-accent: #00B9E2;
  --str-ink: #ffffff;
  --str-danger: #e53935;
  --str-window:#ffffffef;
  /* Badge position controls — tweak these to move the counter */
  --str-badge-top: -6px;   /* negative goes up, positive goes down */
  --str-badge-right: -13px; /* negative pulls left, positive pushes right */
  /* Badge visuals — edit alpha in rgba() to change opacity */
  --str-badge-bg: #00b9e234;   /* 1=opaque; e.g. .85 for 85% */
  --str-badge-shadow: #00B9E2;
}

.menu-item-str-truck .str-truck-link{
  position:relative; display:inline-block; padding:4px 8px; line-height:1; text-decoration:none;
}

.str-truck-wrap{ position:relative; display:inline-block; }

.str-truck-count{
  /* Adjust position: change --str-badge-top / --str-badge-right above */
  position:absolute; top:var(--str-badge-top); right:var(--str-badge-right);
  background:var(--str-badge-bg); color:#fff; border-radius:9999px; min-width:18px; height:18px; padding:0 4px;
  display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; line-height:1;
  box-shadow:0 0 0 2px var(--str-badge-shadow), 0 2px 6px var(--str-badge-shadow);
}
.str-truck-count[data-count="0"]{ display:none; }

/* SVG base look */
.str-truck-svg{ width: calc(var(--str-size) * 2.3); height: var(--str-size); display:block; }
.str-truck-svg *{ vector-effect: non-scaling-stroke; }
.wheel-ring{ fill:none; stroke:var(--str-ink); stroke-width:2.2; }
.wheel-hub{ fill:var(--str-ink); }
.chassis{ stroke:var(--str-accent); stroke-width:2.2; stroke-linecap:round; }
.cab-body,.bed-box{ fill:none; stroke:var(--str-accent); stroke-width:2.2; stroke-linejoin:round; }
.cab-window{ fill:var(--str-window); opacity:.9; }
.barrel-body{ fill:var(--str-danger); stroke:var(--str-ink); stroke-width:1.6; }
.barrel-band{ stroke:var(--str-ink); stroke-width:1.2; }

/* Animation: clockwise tip around right hinge + barrel slide and fall */
.bed{
  transform-box: fill-box;
  transform-origin: 100% 50%;            /* hinge at right midpoint */
  animation: bedTiltCW 6s ease-in-out infinite;
}
.barrel{
  opacity:0;
  transform: translate(0,-14px);         /* relative to barrel-pos */
  animation: barrelCW 6s cubic-bezier(.22,.61,.36,1) infinite;
}

/* Bed rotation: +24deg clockwise during dump */
@keyframes bedTiltCW{
  0%,20%   { transform: rotate(0deg); }
  30%,55%  { transform: rotate(24deg); }  /* front-left rises */
  65%,100% { transform: rotate(0deg); }
}

/* Barrel trajectory: drop in, wait, slide right/down toward hinge, fall out, reset */
@keyframes barrelCW{
  0%   { opacity:0; transform: translate(0,-14px) scale(.9); }  /* above bed */
  10%  { opacity:1; transform: translate(0,8px)  scale(1); }    /* lands in bed */
  25%  { opacity:1; transform: translate(0,8px)  scale(1); }    /* pause */
  40%  { opacity:1; transform: translate(26px,4px) scale(1); }  /* slide toward hinge (right + down) */
  55%  { opacity:1; transform: translate(44px,18px) scale(1); } /* leaving edge */
  65%  { opacity:1; transform: translate(58px,36px) scale(1); } /* falling */
  72%  { opacity:0; transform: translate(58px,50px) scale(1); } /* fade */
  90%  { opacity:0; transform: translate(0,-14px) scale(.9); }  /* reset */
  100% { opacity:0; transform: translate(0,-14px) scale(.9); }
}

/* Hover polish */
.menu-item-str-truck .str-truck-link:hover .cab-body,
.menu-item-str-truck .str-truck-link:hover .bed-box,
.menu-item-str-truck .str-truck-link:hover .chassis{
  filter: drop-shadow(6px 6px 6px rgba(0,185,226,.35));
}