/* Props are attached to the hands, so arm and tool always share one movement. */
.base-grid .base-npc[data-gather] .dg-decor-npc-wrap {
  transform-origin: 50% 90%;
  animation-duration: var(--gather-cycle) !important;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
.base-grid .base-npc[data-gather] :is(.px-arm-left, .px-arm-right) {
  transform-origin: 50% 3px;
  animation-duration: var(--gather-cycle);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  z-index: 6;
}
.base-grid .base-npc[data-gather] .base-npc-body::after { content: none; animation: none; }
.base-grid .base-npc[data-gather] :is(.px-arm-left, .px-arm-right)::after {
  content: ""; position: absolute; pointer-events: none;
  background-repeat: no-repeat; background-position: center; background-size: contain;
  image-rendering: pixelated;
}
.base-grid .base-npc[data-gather] .base-npc-body::before {
  content: ""; position: absolute; pointer-events: none; z-index: 8;
  width: 13%; height: 15%; right: -9%; bottom: 32%;
  background: var(--pa-berry) center / contain no-repeat;
  image-rendering: pixelated; opacity: 0;
  animation-duration: var(--gather-cycle);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.base-grid .base-npc:is([data-gather="beeren"], [data-gather="kraeuter"]) { --gather-cycle: 2.8s; }
.base-grid .base-npc:is([data-gather="beeren"], [data-gather="kraeuter"]) .dg-decor-npc-wrap { animation-name: gatherPickLean; }
.base-grid .base-npc:is([data-gather="beeren"], [data-gather="kraeuter"]) .px-arm-right { animation-name: gatherPickHand; }
.base-grid .base-npc:is([data-gather="beeren"], [data-gather="kraeuter"]) .px-arm-left { animation-name: gatherHoldBasket; }
.base-grid .base-npc:is([data-gather="beeren"], [data-gather="kraeuter"]) .px-arm-left::after {
  width: 24px; height: 20px; left: -7px; bottom: -13px; background-image: var(--pa-basket);
}
.base-grid .base-npc:is([data-gather="beeren"], [data-gather="kraeuter"]) .base-npc-body::before { animation-name: gatherIntoBasket; }
.base-grid .base-npc[data-gather="kraeuter"] .base-npc-body::before { background-image: var(--pa-sprig); }
.base-grid .base-npc.face-left:is([data-gather="beeren"], [data-gather="kraeuter"]) .base-npc-body::before {
  right: auto; left: -9%; scale: -1 1;
}

.base-grid .base-npc[data-gather="holz"] { --gather-cycle: 1.8s; }
.base-grid .base-npc[data-gather="holz"] .dg-decor-npc-wrap { animation-name: gatherChopLean; }
.base-grid .base-npc[data-gather="holz"] .px-arm-right { animation-name: gatherChopHand; }
.base-grid .base-npc[data-gather="holz"] .px-arm-left { animation-name: gatherBrace; }
.base-grid .base-npc[data-gather="holz"] .px-arm-right::after {
  width: 22px; height: 27px; left: -9px; bottom: 1px; background-image: var(--pa-axe);
  transform: rotate(16deg); transform-origin: 50% 90%;
}
.base-grid .base-npc[data-gather="holz"] .base-npc-body::before {
  width: 28%; height: 24%; right: -24%; bottom: 30%;
  background-image: var(--pa-chips); animation-name: gatherWoodChips;
}
.base-grid .base-npc[data-gather="holz"].face-left .base-npc-body::before { right: auto; left: -24%; scale: -1 1; }

@keyframes gatherPickLean {
  0%, 78%, 100% { transform: scaleX(var(--flip, 1)); }
  20%, 42% { transform: scaleX(var(--flip, 1)) translate(3%, 3%) rotate(7deg); }
  60% { transform: scaleX(var(--flip, 1)) rotate(-3deg); }
}
@keyframes gatherPickHand {
  0%, 82%, 100% { rotate: 0deg; }
  20%, 38% { rotate: -78deg; }
  48% { rotate: -60deg; }
  66%, 72% { rotate: 48deg; }
}
@keyframes gatherHoldBasket { 0%, 100% { rotate: -12deg; } 60%, 74% { rotate: -24deg; } }
@keyframes gatherIntoBasket {
  0%, 38%, 82%, 100% { opacity: 0; transform: translate(0, -40%); }
  42% { opacity: 1; transform: translate(0, -40%); }
  58% { opacity: 1; transform: translate(-230%, -190%); }
  74% { opacity: 1; transform: translate(-520%, 160%); }
  80% { opacity: 0; transform: translate(-520%, 170%); }
}
@keyframes gatherChopHand {
  0%, 100% { rotate: -20deg; }
  18%, 28% { rotate: -150deg; }
  42%, 49% { rotate: -32deg; }
  70% { rotate: -48deg; }
}
@keyframes gatherBrace { 0%, 100% { rotate: 0deg; } 25%, 48% { rotate: 38deg; } }
@keyframes gatherChopLean {
  0%, 100% { transform: scaleX(var(--flip, 1)); }
  25% { transform: scaleX(var(--flip, 1)) rotate(-5deg); }
  43%, 49% { transform: scaleX(var(--flip, 1)) translate(3%, 2%) rotate(6deg); }
}
@keyframes gatherWoodChips {
  0%, 40%, 80%, 100% { opacity: 0; transform: translate(0, 0); }
  43% { opacity: 1; transform: translate(0, 0); }
  58% { opacity: 1; transform: translate(36%, -45%) rotate(22deg); }
  76% { opacity: 0; transform: translate(80%, 120%) rotate(65deg); }
}
@media (prefers-reduced-motion: reduce) {
  .base-grid .base-npc[data-gather] :is(.dg-decor-npc-wrap, .px-arm-left, .px-arm-right),
  .base-grid .base-npc[data-gather] .base-npc-body::before { animation: none !important; }
  .base-grid .base-npc[data-gather] .base-npc-body::before { opacity: 0; }
}