/* How the characters move. Shared by the story player and the landing page.
   A character is <div class="char" data-species data-act data-hold> around
   the SVG from cast.js; the page that uses it decides size and position. */
.char svg{display:block;overflow:visible;transform-origin:50% 100%}
.char .eye{transform-box:fill-box;transform-origin:50% 50%;animation:blink 4.6s infinite}
@keyframes blink{0%,94%,100%{transform:scaleY(1)}97%{transform:scaleY(.1)}}
.char .jaw{transform-box:fill-box;transform-origin:50% 0}

/* upright characters (bunny, elephant, teddy, mouse) — parts turn around shoulders, ear roots and feet */
.char:is([data-species="bunny"],[data-species="elephant"],[data-species="teddy"],[data-species="mouse"]) .rig{transform-box:view-box;transform-origin:100px 326px;animation:breathe 3s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.015,.985)}}
.char .ear-l{transform-box:view-box;transform-origin:var(--el,80px 122px)}
.char .ear-r{transform-box:view-box;transform-origin:var(--er,120px 122px)}
.char[data-species="bunny"] .ear-r{animation:twitch 5s infinite}
@keyframes twitch{0%,90%,100%{transform:rotate(0)}93%{transform:rotate(14deg)}96%{transform:rotate(-4deg)}}
.char .arm-l{transform-box:view-box;transform-origin:52px 216px;transition:transform .5s}
.char .arm-r{transform-box:view-box;transform-origin:148px 216px;transition:transform .5s}
.char .h{display:none}
.char[data-hold="seed"] .h-seed,.char[data-hold="spade"] .h-spade,.char[data-hold="can"] .h-can,.char[data-hold="bowl"] .h-bowl,
.char[data-hold="paper"] .h-paper,.char[data-hold="spool"] .h-spool,.char[data-hold="glue"] .h-glue{display:inline}
.char .trunk{transform-box:view-box;transform-origin:100px 160px;transition:transform 1s ease}
.char .mtail{transform-box:view-box;transform-origin:150px 290px;animation:mtail 2.6s ease-in-out infinite alternate}
@keyframes mtail{from{transform:rotate(-6deg)}to{transform:rotate(6deg)}}
.char .drip{animation:drip .6s linear infinite}
.char .drip:nth-child(2){animation-delay:.2s}.char .drip:nth-child(3){animation-delay:.4s}
@keyframes drip{from{transform:translateY(0);opacity:1}to{transform:translateY(70px);opacity:0}}

/* jungle friends */
.char:not(:is([data-species="bunny"],[data-species="elephant"],[data-species="teddy"],[data-species="mouse"])) .rig,.char .wing,.char .tail,.char .head{transform-box:fill-box}
.char:not(:is([data-species="bunny"],[data-species="elephant"],[data-species="teddy"],[data-species="mouse"])) .rig{transform-origin:50% 100%;animation:idle 3.2s ease-in-out infinite}
@keyframes idle{50%{transform:translateY(-1.5%)}}
.char[data-species="parrot"] .wing{transform-origin:20% 15%}
.char[data-species="parrot"] .jaw{transform-origin:10% 10%}
.char[data-species="duck"] .wing{transform-origin:15% 50%}
.char[data-species="tiger"] .tail{transform-origin:0% 100%;animation:swish 2.4s ease-in-out infinite alternate}
.char[data-species="tiger"] .head{transform-origin:50% 80%}
@keyframes swish{from{transform:rotate(-6deg)}to{transform:rotate(8deg)}}

/* talking */
.char.talk .jaw{animation:chat .15s ease-in-out infinite alternate}
@keyframes chat{to{transform:scaleY(2.6)}}
.char:is([data-species="bunny"],[data-species="elephant"],[data-species="teddy"],[data-species="mouse"]).talk .rig{animation:talk .3s ease-in-out infinite alternate}
@keyframes talk{to{transform:translateY(-2.5%)}}
.char.talk .trunk{animation:trunktalk .45s ease-in-out infinite alternate}
@keyframes trunktalk{to{transform:rotate(-10deg)}}
.char.talk .ear-l{animation:earl .3s ease-in-out infinite alternate}
.char.talk .ear-r{animation:earr .3s ease-in-out infinite alternate}
@keyframes earl{to{transform:rotate(-12deg)}}@keyframes earr{to{transform:rotate(12deg)}}
.char[data-species="parrot"].talk .jaw{animation:beak .16s ease-in-out infinite alternate}
@keyframes beak{to{transform:rotate(22deg)}}
.char[data-species="parrot"].talk .rig{animation:parrothop .5s ease-in-out infinite}
@keyframes parrothop{50%{transform:translateY(-6%) rotate(-3deg)}}
.char[data-species="parrot"].talk .wing{animation:flap .18s ease-in-out infinite alternate}
@keyframes flap{to{transform:rotate(-40deg)}}
.char[data-species="tiger"].talk .rig{animation:pounce .7s ease-in-out infinite}
@keyframes pounce{0%,100%{transform:translateY(0) scale(1,1)}20%{transform:translateY(0) scale(1.06,.94)}50%{transform:translateY(-10%) scale(.97,1.04)}}
.char[data-species="tiger"].talk .tail{animation:swish .25s ease-in-out infinite alternate}
.char[data-species="tiger"].talk .head{animation:nod .5s ease-in-out infinite alternate}
@keyframes nod{from{transform:rotate(-4deg)}to{transform:rotate(4deg)}}
.char[data-species="duck"].talk .rig{animation:waddle .4s ease-in-out infinite alternate}
@keyframes waddle{from{transform:rotate(-8deg)}to{transform:rotate(8deg) translateY(-3%)}}
.char[data-species="duck"].talk .wing{animation:flapd .2s ease-in-out infinite alternate}
@keyframes flapd{to{transform:rotate(-30deg)}}

/* actions, set per page with data-act */
.char[data-act="wave"] .arm-r{animation:wave .8s ease-in-out infinite}
@keyframes wave{0%,100%{transform:rotate(-150deg)}50%{transform:rotate(-112deg)}}
.char[data-act="show"] .arm-r{transform:rotate(-118deg)}
.char[data-act="show"] svg{animation:hopsmall 1.2s ease-in-out infinite}
.char[data-act="hop"] svg{animation:hopsmall .9s ease-in-out infinite}
@keyframes hopsmall{0%,100%{transform:translateY(0)}40%{transform:translateY(-6%) scale(.98,1.02)}}
.char[data-act="jump"] svg{animation:jump .8s ease-in-out infinite}
.char[data-act="jump"] .arm-r{transform:rotate(-155deg)}.char[data-act="jump"] .arm-l{transform:rotate(155deg)}
@keyframes jump{0%,100%{transform:translateY(0) scale(1.06,.94)}45%{transform:translateY(-22%) scale(.96,1.05)}}
.char[data-act="dig"] svg{animation:dig .7s ease-in-out infinite}
.char[data-act="dig"] .arm-r{animation:digarm .7s ease-in-out infinite}
@keyframes dig{50%{transform:rotate(-7deg) scale(1,.96)}}
@keyframes digarm{0%,100%{transform:rotate(-15deg)}50%{transform:rotate(-65deg)}}
.char[data-act="water"] .arm-r{animation:pour 1.4s ease-in-out infinite}
.char[data-act="water"] svg{transform:rotate(4deg)}
@keyframes pour{0%,100%{transform:rotate(-70deg)}50%{transform:rotate(-58deg)}}
.char[data-act="impatient"] svg{animation:hopsmall .35s ease-in-out infinite}
.char[data-act="impatient"] .arm-r{transform:rotate(-150deg)}.char[data-act="impatient"] .arm-l{transform:rotate(150deg)}
.char[data-act="dance"] svg{animation:dance .7s ease-in-out infinite alternate}
.char[data-act="dance"] .arm-r{animation:wave .7s ease-in-out infinite}.char[data-act="dance"] .arm-l{animation:wavel .7s ease-in-out infinite}
@keyframes dance{from{transform:rotate(-8deg) translateY(0)}to{transform:rotate(8deg) translateY(-5%)}}
@keyframes wavel{0%,100%{transform:rotate(150deg)}50%{transform:rotate(112deg)}}
.char[data-act="stretch"] svg{animation:stretch 1.1s ease-in-out infinite}
.char[data-act="stretch"] .arm-r{transform:rotate(-170deg)}.char[data-act="stretch"] .arm-l{transform:rotate(170deg)}
@keyframes stretch{50%{transform:scaleY(1.09)}}
.char[data-act="pull"] .pose{transform:rotate(16deg)}
.char[data-act="pull"] svg{animation:tug .6s ease-in-out infinite alternate}
.char[data-act="pull"] .arm-r,.char[data-act="pull"] .arm-l{transform:rotate(80deg)}
@keyframes tug{to{transform:rotate(7deg) translateX(3%)}}
.char[data-act="fallen"] .pose{transform:rotate(50deg)}
.char[data-act="fallen"] svg{animation:wobble 1.6s ease-in-out infinite}
.char[data-act="fallen"] .arm-r{transform:rotate(-160deg)}.char[data-act="fallen"] .arm-l{transform:rotate(160deg)}
@keyframes wobble{50%{transform:rotate(-6deg)}}
.char[data-act="stir"] .arm-r{animation:stir .45s ease-in-out infinite alternate}
@keyframes stir{from{transform:rotate(-45deg)}to{transform:rotate(-70deg)}}
.char[data-act="wash"] .arm-r{animation:wash .35s ease-in-out infinite alternate}
.char[data-act="wash"] .arm-l{animation:washl .35s ease-in-out infinite alternate}
@keyframes wash{from{transform:rotate(-55deg)}to{transform:rotate(-100deg)}}
@keyframes washl{from{transform:rotate(55deg)}to{transform:rotate(100deg)}}
.char[data-act="sleepy"] svg{animation:sway 3s ease-in-out infinite}
.char[data-act="sleepy"] .eye{animation:none;transform:scaleY(.3)}
@keyframes sway{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
.char[data-act="hug"] .arm-r{transform:rotate(-60deg)}.char[data-act="hug"] .arm-l{transform:rotate(60deg)}
.char[data-act="shiver"] svg{animation:shiver .12s linear infinite alternate}
@keyframes shiver{from{transform:translateX(-1.2%)}to{transform:translateX(1.2%)}}

/* actions that came with the kite story */
.char[data-act="clap"] .arm-r{animation:clapr .5s ease-in-out infinite alternate}
.char[data-act="clap"] .arm-l{animation:clapl .5s ease-in-out infinite alternate}
@keyframes clapr{from{transform:rotate(-30deg)}to{transform:rotate(-62deg)}}
@keyframes clapl{from{transform:rotate(30deg)}to{transform:rotate(62deg)}}
.char[data-act="craft"] .arm-r{animation:craft .6s ease-in-out infinite alternate}
@keyframes craft{from{transform:rotate(-40deg)}to{transform:rotate(-70deg)}}
.char[data-act="run"] svg{animation:run .5s ease-in-out infinite}
.char[data-act="run"] .arm-r,.char[data-act="hold"] .arm-r{transform:rotate(-125deg)}
@keyframes run{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-3%) rotate(-5deg)}}
.char[data-act="shock"] .arm-r{transform:rotate(-160deg)}.char[data-act="shock"] .arm-l{transform:rotate(160deg)}
.char[data-act="shock"] svg{animation:hopsmall .9s ease-in-out infinite}
.char[data-act="sad"] .pose{transform:rotate(-3deg)}
.char[data-act="sad"] .ear-l{transform:rotate(14deg)}.char[data-act="sad"] .ear-r{transform:rotate(-14deg)}
.char[data-act="sad"] .trunk{transform:rotate(8deg)}
.char[data-act="sad"] .eye{animation:none;transform:scaleY(.55)}
.char[data-act="climb"] .pose{transform:rotate(-8deg)}
.char[data-act="climb"] .arm-r{animation:climbr .5s ease-in-out infinite alternate}.char[data-act="climb"] .arm-l{animation:climbl .5s ease-in-out infinite alternate}
@keyframes climbr{from{transform:rotate(-150deg)}to{transform:rotate(-120deg)}}
@keyframes climbl{from{transform:rotate(120deg)}to{transform:rotate(150deg)}}
.char[data-act="reach"] .trunk{transform:rotate(-150deg) scale(1.35)}
.char[data-act="reach"] .pose{transform:rotate(-4deg)}