/* Анімації персонажів (svg.mk-char): Мальок (MalyokArt) і CritterArt. Винесено з index.html. */
svg.mk-char{overflow:visible;}
svg.mk-char.still *{animation:none!important;}
svg.mk-char .bob{animation:mk-bob 2.6s ease-in-out infinite;transform-box:view-box;}
svg.mk-char .head{animation:mk-headsway 3.4s ease-in-out infinite;transform-box:view-box;}
svg.mk-char .arm-l{animation:mk-arm-l 2.6s ease-in-out infinite;transform-box:view-box;}
svg.mk-char .arm-r{animation:mk-arm-r 2.6s ease-in-out infinite;transform-box:view-box;}
svg.mk-char .arm-point{animation:mk-jab 1.6s ease-in-out infinite;transform-box:view-box;}
svg.mk-char .tail{animation:mk-tail 1.5s ease-in-out infinite;transform-box:view-box;}
svg.mk-char .eyes{animation:mk-blink 4.6s infinite;transform-box:view-box;}
svg.mk-char .ear-l{animation:mk-twitch 5.3s infinite;transform-box:view-box;}
svg.mk-char .ear-r{animation:mk-twitch 7.1s 1.3s infinite;transform-box:view-box;}
svg.mk-char .tear{animation:mk-tear 1.6s ease-in infinite;transform-box:view-box;}
svg.mk-char.mk-nosway .head{animation:none;}
svg.mk-char.mk-a-jitter .head{animation:mk-jitter .11s steps(2) infinite;}
svg.mk-char.mk-a-shake .bob{animation:mk-shake .09s steps(2) infinite;}
svg.mk-char.mk-a-tremble .bob{animation:mk-tremble .22s steps(2) infinite;}
svg.mk-char.mk-a-hop .bob{animation:mk-hop .7s ease-in-out infinite;}
svg.mk-char.mk-a-tilt .head{animation:mk-tilt 2.2s ease-in-out infinite;}
svg.mk-char.mk-a-lean .head{animation:mk-lean 2.4s ease-in-out infinite;}
svg.mk-char.mk-dusting{transition:filter .6s, opacity .9s .45s;filter:brightness(.3) sepia(.7);opacity:0;}
@keyframes mk-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes mk-headsway{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}}
@keyframes mk-arm-l{0%,100%{transform:rotate(0deg)}50%{transform:rotate(2.5deg)}}
@keyframes mk-arm-r{0%,100%{transform:rotate(0deg)}50%{transform:rotate(-2.5deg)}}
@keyframes mk-jab{0%,60%,100%{transform:rotate(0deg)}70%{transform:rotate(-5deg)}80%{transform:rotate(1deg)}}
@keyframes mk-tail{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(7deg)}}
@keyframes mk-blink{0%,94%,100%{transform:scaleY(1)}96%{transform:scaleY(.08)}}
@keyframes mk-twitch{0%,90%,100%{transform:rotate(0deg)}93%{transform:rotate(-9deg)}96%{transform:rotate(4deg)}}
@keyframes mk-tear{0%{transform:translateY(0);opacity:0}15%{opacity:1}100%{transform:translateY(22px);opacity:0}}
@keyframes mk-jitter{0%{transform:translate(-1.5px,1px) rotate(-2deg)}100%{transform:translate(1.5px,-1px) rotate(2deg)}}
@keyframes mk-shake{0%{transform:translate(-2.5px,1px) rotate(-1.5deg)}100%{transform:translate(2.5px,-1px) rotate(1.5deg)}}
@keyframes mk-tremble{0%{transform:translateX(-.8px)}100%{transform:translateX(.8px)}}
@keyframes mk-hop{0%,55%,100%{transform:translateY(0)}25%{transform:translateY(-9px)}}
@keyframes mk-tilt{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(-3deg)}}
@keyframes mk-lean{0%,100%{transform:scale(1) translateY(0)}50%{transform:scale(1.14) translateY(3px)}}
.mk-dust-layer{position:fixed;pointer-events:none;z-index:700;}
.mk-dust-layer i{position:absolute;border-radius:50%;background:#3b2b22;opacity:0;animation:mk-dust 1.3s ease-out forwards;}
@keyframes mk-dust{0%{opacity:0;transform:translate(0,0)}12%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.4)}}
svg.mk-char .rec{animation:mk-rec 1s steps(1) infinite;}
@keyframes mk-rec{0%{opacity:1}50%{opacity:0}}
svg.mk-char .talk{animation:mk-talk .28s ease-in-out infinite alternate;transform-box:view-box;transform-origin:108px 116px;}
@keyframes mk-talk{0%{transform:scaleY(.35)}100%{transform:scaleY(1.15)}}
svg.mk-char.mk-a-gesture .arm-l{animation:mk-gest-l .9s ease-in-out infinite alternate;}
svg.mk-char.mk-a-gesture .arm-r{animation:mk-gest-r .7s ease-in-out infinite alternate;}
@keyframes mk-gest-l{0%{transform:rotate(-10deg)}100%{transform:rotate(12deg)}}
@keyframes mk-gest-r{0%{transform:rotate(8deg)}100%{transform:rotate(-12deg)}}
svg.mk-char.mk-a-dance .bob{animation:mk-dance .5s ease-in-out infinite alternate;transform-origin:108px 232px;}
svg.mk-char.mk-a-dance .arm-l{animation:mk-swing-l .5s ease-in-out infinite alternate;}
svg.mk-char.mk-a-dance .arm-r{animation:mk-swing-r .5s ease-in-out infinite alternate;}
svg.mk-char.mk-a-dance .tail{animation:mk-tail .5s ease-in-out infinite alternate;}
@keyframes mk-dance{0%{transform:translateX(-5px) rotate(-6deg)}100%{transform:translateX(5px) rotate(6deg)}}
@keyframes mk-swing-l{0%{transform:rotate(-15deg)}100%{transform:rotate(35deg)}}
@keyframes mk-swing-r{0%{transform:rotate(-35deg)}100%{transform:rotate(15deg)}}
svg.mk-char .note{animation:mk-note 1.8s ease-out infinite;transform-box:view-box;opacity:0;}
svg.mk-char .note.n2{animation-delay:.6s;}
svg.mk-char .note.n3{animation-delay:1.2s;}
@keyframes mk-note{0%{transform:translateY(8px);opacity:0}20%{opacity:1}100%{transform:translateY(-16px);opacity:0}}
svg.mk-char .rain{animation:mk-rain .8s linear infinite;transform-box:view-box;}
@keyframes mk-rain{0%{transform:translateY(0);opacity:1}100%{transform:translateY(10px);opacity:0}}
svg.mk-char .cloud{animation:mk-bob 2.6s ease-in-out infinite;transform-box:view-box;}