/* Reusable SVG character rigs: body, head, eyes and articulated limbs. */
.character { position: relative; }
.character svg { width: 100%; height: 100%; display: block; overflow: visible; }
.character-body { transform-origin: 130px 280px; animation: breathe 4.5s ease-in-out infinite; }
.to-head { transform-origin: 130px 158px; }
.to-arm.left { transform-origin: 82px 172px; }
.to-arm.right { transform-origin: 178px 172px; }
.to-leg.left { transform-origin: 104px 234px; }
.to-leg.right { transform-origin: 155px 234px; }
.to-eye { transform-box: fill-box; transform-origin: center; animation: blink 6.3s infinite; }
.pupil { animation: look 8s ease-in-out infinite; }
.mouth-oh, .mouth-sad, .mouth-sleep, .held-baton { display: none; }
.character[data-expression=surprised] .mouth-smile,
.character[data-expression=confused] .mouth-smile,
.character[data-expression=sad] .mouth-smile,
.character[data-expression=sleepy] .mouth-smile { display: none; }
.character[data-expression=surprised] .mouth-oh { display: block; }
.character[data-expression=confused] .mouth-sleep { display: block; transform: rotate(-10deg); transform-origin: 130px 134px; }
.character[data-expression=confused] .brow.left { transform: translateY(-5px) rotate(-3deg); }
.character[data-expression=confused] .to-head { transform: rotate(-8deg); }
.character[data-expression=sad] .mouth-sad { display: block; }
.character[data-expression=sad] .brow.left { transform: rotate(-12deg); transform-origin: 105px 80px; }
.character[data-expression=sad] .brow.right { transform: rotate(12deg); transform-origin: 157px 80px; }
.character[data-expression=sleepy] .mouth-sleep { display: block; }
.character[data-expression=sleepy] .eyes { transform: scaleY(.35); transform-origin: 130px 106px; }
.character[data-expression=excited] .mouth-smile { transform: scale(1.2); transform-origin: 130px 130px; }
.character[data-expression=excited] .heart-light { fill: #ffe08a; }
.character[data-action] .character-body { animation: none; }
.character[data-action=jump] .character-body { animation: jump 1.15s ease-in-out; }
.character[data-action=jump] .to-arm.left { animation: arm-up-left 1.15s ease-in-out; }
.character[data-action=jump] .to-arm.right { animation: arm-up-right 1.15s ease-in-out; }
.character[data-action=spin] .character-body { animation: spin 1.5s ease-in-out; }
.character[data-action=dance] .character-body, .character[data-action=celebrate] .character-body { animation: dance .6s ease-in-out 3; }
.character[data-action=dance] .to-arm.left, .character[data-action=celebrate] .to-arm.left { animation: arm-up-left .6s 3; }
.character[data-action=dance] .to-arm.right, .character[data-action=celebrate] .to-arm.right { animation: arm-up-right .6s .15s 3; }
.character[data-action=dance] .to-leg.left { animation: step .6s 3; }
.character[data-action=dance] .to-leg.right { animation: step .6s .3s 3; }
.character[data-action=wave] .to-arm.right { animation: wave 1.2s ease-in-out; }
.character[data-action=tilt] .to-head, .character[data-action=think] .to-head { animation: tilt 1.3s ease-in-out; }
.character[data-action=bow] .character-body { animation: bow 1.8s ease-in-out; }
.character[data-action=bow] .to-head { animation: nod 1.8s ease-in-out; }
.character[data-action=bow] .to-arm.left { animation: arm-up-left 1.8s ease-in-out; }
.character[data-action=bow] .eyes { transform: scaleY(.45); transform-origin: 130px 106px; }
.character[data-action=salute] .to-arm.right { animation: salute 1.5s ease-in-out; }
.character[data-action=salute] .to-head { animation: nod 1.5s ease-in-out; }
.character[data-action=offer] .held-baton { display: block; }
.character[data-action=offer] .to-arm.right { animation: offer 1.7s ease-in-out; }
.character[data-action=ears] .to-arm.left { transform: rotate(110deg); }
.character[data-action=ears] .to-arm.right { transform: rotate(-110deg); }
.stepped-aside { transform: translateX(25px) scale(.94); transition: transform .7s; }
.player-arm.left { transform-origin: 83px 179px; }
.player-arm.right { transform-origin: 176px 179px; }
.animal-head { transform-origin: 130px 160px; }
.note-hit .character-body { animation: note-bounce .28s ease-out; }
.note-hit .player-arm.left, .note-hit .to-arm.left { animation: play-left .25s ease-out; }
.note-hit .player-arm.right, .note-hit .to-arm.right { animation: play-right .25s ease-out; }
.note-hit .animal-head { animation: nod .3s ease-out; }
.note-hit[data-character=percussionist] .maracas { animation: shaker .22s ease-out; transform-origin: center; }
.note-hit[data-character=cymbalist] .cymbals { animation: cymbal-crash .22s ease-out; transform-origin: 130px 180px; }
.note-hit[data-character=trumpeter] .instrument { animation: brass .35s ease-out; transform-origin: 130px 148px; }
.band-card .character-body { animation: none; }
@keyframes breathe { 0%,100% { transform: translateY(0) rotate(-.6deg); } 50% { transform: translateY(-3px) rotate(.6deg); } }
@keyframes blink { 0%,43%,47%,100% { transform: scaleY(1); } 45% { transform: scaleY(.08); } }
@keyframes look { 0%,35%,65%,100% { transform: translateX(0); } 42%,52% { transform: translateX(-3px); } 80%,88% { transform: translateX(3px); } }
@keyframes jump { 0%,100% { transform: none; } 18% { transform: scale(1.08,.88) translateY(8px); } 43% { transform: translateY(-44px) scale(.96,1.06); } 63% { transform: translateY(-38px); } 82% { transform: scale(1.08,.9); } }
@keyframes spin { 0% { transform: rotate(0); } 15% { transform: rotate(-14deg) scale(.94); } 68% { transform: rotate(366deg); } 82% { transform: rotate(348deg); } 100% { transform: rotate(360deg); } }
@keyframes dance { 0%,100% { transform: rotate(-7deg) translateY(0); } 50% { transform: rotate(7deg) translateY(-9px); } }
@keyframes arm-up-left { 0%,100% { transform: rotate(0); } 45%,65% { transform: rotate(75deg); } }
@keyframes arm-up-right { 0%,100% { transform: rotate(0); } 45%,65% { transform: rotate(-75deg); } }
@keyframes wave { 0%,100% { transform: rotate(0); } 20%,60% { transform: rotate(-130deg); } 40%,80% { transform: rotate(-100deg); } }
@keyframes tilt { 0%,100% { transform: rotate(0); } 40%,70% { transform: rotate(-13deg); } }
@keyframes step { 0%,100% { transform: rotate(0); } 50% { transform: rotate(18deg) translateY(-4px); } }
@keyframes bow { 0%,100% { transform: none; } 40%,70% { transform: rotate(12deg) scaleY(.85); } }
@keyframes nod { 0%,100% { transform: none; } 45%,70% { transform: rotate(8deg) translateY(4px); } }
@keyframes salute { 0%,100% { transform: none; } 25%,75% { transform: rotate(-145deg); } }
@keyframes offer { 0%,100% { transform: none; } 30%,80% { transform: rotate(-65deg); } }
@keyframes note-bounce { 0%,100% { transform: none; } 35% { transform: translateY(-6px) scale(1.02,.98); } }
@keyframes play-left { 0%,100% { transform: none; } 40% { transform: rotate(13deg); } }
@keyframes play-right { 0%,100% { transform: none; } 40% { transform: rotate(-13deg); } }
@keyframes shaker { 0%,100% { transform: none; } 30% { transform: rotate(-7deg); } 65% { transform: rotate(7deg); } }
@keyframes brass { 0%,100% { transform: none; } 40% { transform: rotate(-6deg) scale(1.04); } }
@keyframes cymbal-crash { 0%,100% { transform: none; } 45% { transform: scale(1.08) rotate(-4deg); } }