/* Frankie's poses and animations, copied from the demo dashboard */
.fk-ol{stroke:#2A2724;stroke-width:3.5px;stroke-linejoin:round;stroke-linecap:round}
.fk-sw2{stroke-width:2px}
.fk-sw25{stroke-width:2.5px}
.fk-sw3{stroke-width:3px}
.fk-mouth{fill:none;stroke:#14100E;stroke-width:2.5px}
.fk-tail-o{fill:none;stroke:#2A2724;stroke-width:12px}
.fk-tail-i{fill:none;stroke:#E8C9A0;stroke-width:6px}
.fk-tilt,.fk-wag,.fk-wagfast,.fk-thump,.fk-breathe,.fk-hop,.fk-rump,.fk-front,.fk-shake,.fk-across,.fk-bounce,.fk-legA,.fk-legB,.fk-lick,.fk-swipe,.fk-spin{transform-box:fill-box}
.fk-tilt{transform-origin:50% 90%;animation:fkTilt 6s ease-in-out infinite}
@keyframes fkTilt{0%,20%,90%,100%{transform:rotate(0)}30%,50%{transform:rotate(-12deg)}60%,80%{transform:rotate(9deg)}}
.fk-wag{transform-origin:0% 100%;animation:fkWag 1.2s ease-in-out infinite alternate}
.fk-wagfast{transform-origin:0% 100%;animation:fkWag .25s ease-in-out infinite alternate}
@keyframes fkWag{from{transform:rotate(-10deg)}to{transform:rotate(12deg)}}
.fk-thump{transform-origin:0% 100%;animation:fkThump .6s ease-in infinite alternate}
@keyframes fkThump{from{transform:rotate(0)}to{transform:rotate(28deg)}}
.fk-breathe{transform-origin:50% 100%;animation:fkBreathe 10s ease-in-out infinite}
@keyframes fkBreathe{0%,100%{transform:scale(1,1)}40%{transform:scale(1.04,1.07)}}
.fk-hop{transform-origin:50% 100%;animation:fkHop 1.8s ease-out infinite}
@keyframes fkHop{0%,60%,100%{transform:translateY(0)}15%{transform:translateY(-22px)}30%{transform:translateY(0) scale(1.03,.97)}45%{transform:translateY(-12px)}}
.fk-rump{transform-origin:50% 100%;animation:fkRump 7s ease-in-out infinite}
@keyframes fkRump{0%,100%{transform:scaleY(1)}20%,55%{transform:scaleY(1.12)}}
.fk-front{transform-origin:50% 100%;animation:fkFront 7s ease-in-out infinite}
@keyframes fkFront{0%,100%{transform:translateY(0)}20%,55%{transform:translateY(12px) scaleX(1.04)}}
.fk-shake{transform-origin:50% 100%;animation:fkShake 7s linear infinite}
@keyframes fkShake{0%,64%,86%,100%{transform:rotate(0)}66%{transform:rotate(-5deg)}69%{transform:rotate(5deg)}72%{transform:rotate(-5deg)}75%{transform:rotate(5deg)}78%{transform:rotate(-3deg)}81%{transform:rotate(3deg)}}
.fk-reach,.fk-lower{transform-box:fill-box}
.fk-reach{transform-origin:100% 50%;animation:fkReach 7s ease-in-out infinite}
@keyframes fkReach{0%,100%{transform:scaleX(1)}20%,55%{transform:scaleX(1.1)}}
.fk-lower{animation:fkLower 7s ease-in-out infinite}
@keyframes fkLower{0%,100%{transform:translate(0,0)}20%,55%{transform:translate(-8px,8px)}}
.fk-go{animation:fkGo 5s linear infinite}
@keyframes fkGo{0%{transform:translateX(80px);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translateX(-80px);opacity:0}}
.fk-bob{animation:fkBounce .2s ease-in-out infinite alternate}
.fk-swA,.fk-swB{transform-box:fill-box;transform-origin:50% 0%;animation:fkSw .4s ease-in-out infinite alternate}
.fk-swB{animation-direction:alternate-reverse}
@keyframes fkSw{from{transform:rotate(-13deg)}to{transform:rotate(13deg)}}
.fk-across{animation:fkAcross 5s ease-in-out infinite alternate}
@keyframes fkAcross{from{transform:translateX(-26px)}to{transform:translateX(26px)}}
.fk-bounce{animation:fkBounce .5s ease-in-out infinite alternate}
@keyframes fkBounce{from{transform:translateY(0)}to{transform:translateY(-6px)}}
.fk-legA{animation:fkLeg .5s ease-in-out infinite alternate}
.fk-legB{animation:fkLeg .5s ease-in-out infinite alternate-reverse}
@keyframes fkLeg{from{transform:translateY(0)}to{transform:translateY(-10px)}}
.fk-lick{transform-origin:50% 0%;animation:fkLick 3s ease-in-out infinite}
@keyframes fkLick{0%,55%,100%{transform:scaleY(0)}65%,75%{transform:scaleY(1)}}
.fk-swipe{transform-origin:50% 5%;animation:fkSwipe 5s ease-in-out infinite}
@keyframes fkSwipe{0%,4%{transform:rotate(0)}12%{transform:rotate(-105deg)}20%{transform:rotate(-60deg)}28%,100%{transform:rotate(0)}}
.fk-spin{transform-origin:50% 50%;animation:fkSpin 5s cubic-bezier(.15,.6,.25,1) infinite}
@keyframes fkSpin{0%,12%{transform:rotate(0)}70%,100%{transform:rotate(720deg)}}
.fk-spinin { transform-box: fill-box; transform-origin: 50% 50%; animation: fkSpinIn 1.5s cubic-bezier(.15, .6, .25, 1); }
@keyframes fkSpinIn { from { transform: rotate(-540deg); } to { transform: rotate(0); } }
.fk-quick * { animation-duration: 2s !important; }
