/* Dogs and rabbits. assets/js/animals.js sets one pose class at a time:
   dogs:    run, trot, stand, bow, sit, sleep, away
   rabbits: sit, nibble, away */

.animal { transition: opacity 1.2s; cursor: pointer; }
.animal.away { opacity: 0; pointer-events: none; }
.ashadow { fill: #000; opacity: .18; }
.fur { stroke: #3a2a1e; stroke-width: .9; }
.leg, .torso, .head, .rhead, .tail, .ear1 { transform-box: fill-box; }

/* ---- Legs ---- */
.leg { transform-origin: 50% 0; }
.run .l1, .run .l3, .trot .l1, .trot .l3 { animation: leg .24s ease-in-out infinite alternate; }
.run .l2, .run .l4, .trot .l2, .trot .l4 { animation: leg .24s ease-in-out infinite alternate-reverse; }
.trot .leg { animation-duration: .4s !important; }
@keyframes leg { from { transform: rotate(-30deg); } to { transform: rotate(30deg); } }

/* ---- Tail: always wagging, faster when excited, slow thumps asleep ---- */
.tail { transform-origin: 100% 100%; animation: wag .3s ease-in-out infinite alternate; }
.run .tail, .bow .tail, .sit .tail, .stand .tail { animation-duration: .14s; }
.sleep .tail { animation-duration: 2.6s; }
@keyframes wag { from { transform: rotate(-20deg); } to { transform: rotate(24deg); } }

/* ---- Body poses ---- */
.torso { transform-origin: 0% 100%; transition: transform .25s; }
.run .torso { animation: bounce .24s ease-in-out infinite alternate; }
@keyframes bounce { to { transform: translateY(-2.6px); } }

.bow .torso { transform: rotate(13deg); }                       /* play bow */
.bow .l3, .bow .l4 { transform: rotate(-55deg); }

.sit .torso { transform: translateY(3px) rotate(-14deg); }
.sit .l1, .sit .l2 { transform: translateY(3px) scaleY(.35); }
.sit .l3, .sit .l4 { transform: translateY(-4px) scaleY(1.45); }

.sleep .legs { opacity: 0; }
.sleep .torso { transform: translateY(8px); }
.sleep .head { transform-origin: 30% 100%; transform: rotate(16deg) translate(-2px, 2px); }
.sleep .tongue { opacity: 0; }

/* ---- Rabbits ---- */
.rhead { transform-origin: 20% 100%; transition: transform .3s; }
.nibble .rhead { transform: rotate(22deg) translate(1px, 3px); }
.ear1 { transform-origin: 50% 100%; animation: twitch 5s infinite; }
@keyframes twitch { 0%, 90%, 100% { transform: rotate(0); } 93% { transform: rotate(-14deg); } 96% { transform: rotate(4deg); } }

/* ---- Little extras ---- */
.heart { fill: #e8476a; stroke: #fff; stroke-width: .8; pointer-events: none; }
.zzz { font: 700 9px "Anek Latin", sans-serif; fill: var(--ink); pointer-events: none; }