/* tradgard-hem.css — step 15 (test): once a kind has a building in the bed, its animals stay
   near it (js/garden.js adds .hemma). Same clocks as the free animals, shorter paths, so they
   circle the flowers, hover round the birdhouse, and hop on the pond's stones. Load after app.css. */
.garden .hemma.fladdrar, .gbar .hemma.fladdrar { animation-name: ghem-fladder; }
@keyframes ghem-fladder {
  0%   { transform: translate(0,0) scaleX(1) rotate(0); }
  20%  { transform: translate(6px,-5px) scaleX(1) rotate(6deg); }
  40%  { transform: translate(11px,0) scaleX(1) rotate(-4deg); }
  50%  { transform: translate(12px,-2px) scaleX(-1) rotate(0); }
  70%  { transform: translate(6px,-7px) scaleX(-1) rotate(-6deg); }
  90%  { transform: translate(1px,-2px) scaleX(-1) rotate(4deg); }
  100% { transform: translate(0,0) scaleX(1) rotate(0); }
}
.garden .hemma.flyger, .gbar .hemma.flyger { animation-name: ghem-flyg; }
@keyframes ghem-flyg {
  0%   { transform: translate(-10px,2px) scaleX(1); }
  45%  { transform: translate(10px,-3px) scaleX(1); }
  50%  { transform: translate(11px,-3px) scaleX(-1); }
  95%  { transform: translate(-9px,2px) scaleX(-1); }
  100% { transform: translate(-10px,2px) scaleX(1); }
}
.garden .hemma.hoppar, .gbar .hemma.hoppar { animation-name: ghem-hopp; }
@keyframes ghem-hopp {
  0%, 20%  { transform: translate(0,0) scaleX(1); }
  26%      { transform: translate(3px,-6px) scaleX(1); } 32%, 48% { transform: translate(6px,0) scaleX(1); }
  50%      { transform: translate(6px,0) scaleX(-1); }
  56%      { transform: translate(3px,-6px) scaleX(-1); } 62%, 98% { transform: translate(0,0) scaleX(-1); }
  100%     { transform: translate(0,0) scaleX(1); }
}
/* The flying bird's wings (js/garden-hus.js flygFagel): a beat from the shoulder, the far wing a
   touch behind the near one. Fast while it flies, so it reads as flapping, not waving. */
.garden .vinge, .gbar .vinge { transform-box: fill-box; transform-origin: 92% 96%; animation: gvinge .42s ease-in-out infinite alternate; animation-duration: .42s !important; }
.garden .vinge.bak, .gbar .vinge.bak { animation-delay: -.08s !important; }
@keyframes gvinge { from { transform: rotate(-6deg) scaleY(1); } to { transform: rotate(10deg) scaleY(-.55); } }
body.stilla .vinge, body.dold .vinge { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { .vinge { animation: none !important; } }
/* The butterflies' wings (js/garden-hus.js fjarilBild): both pairs fold towards the body and back. */
.garden .fvinge, .gbar .fvinge { transform-box: fill-box; transform-origin: 50% 50%; animation: gfvinge .5s ease-in-out infinite alternate; }
@keyframes gfvinge { from { transform: scaleX(1); } to { transform: scaleX(.3); } }
body.stilla .fvinge, body.dold .fvinge { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { .fvinge { animation: none !important; } }