/* Zıpır moods. Everything is an SVG group toggled by data-mood; the idle loop is pure CSS. */
.zp{overflow:visible}
.zp-all,.zp-spring,.zp-body,.zp-eye,.zp-mark,.zp-shadow,.zp-mouth,.zp-pupil,.zp-bang,.zp-heart,.zp-zzz{transform-box:fill-box}
.zp-arm{transform-box:fill-box}
.zp-all{transform-origin:50% 100%;animation:zp-bob 2.8s ease-in-out infinite}
.zp-spring{transform-origin:50% 0;animation:zp-spr 2.8s ease-in-out infinite}
.zp-body{transform-origin:50% 100%}
.zp-eye{transform-origin:50% 50%;animation:zp-blink 4.6s infinite}
.zp-eye-r{animation-delay:.04s}
.zp-closed,.zp-happy-eyes,.zp-mouth,.zp-think,.zp-zzz,.zp-bang,.zp-heart{opacity:0}
.zp-arm{transform-origin:50% 50%}
.zp-mark{transform-origin:20% 100%;animation:zp-mark 2.8s ease-in-out infinite}
.zp-shadow{transform-origin:50% 50%;animation:zp-sh 2.8s ease-in-out infinite}
@keyframes zp-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes zp-spr{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.94)}}
@keyframes zp-sh{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.9);opacity:.8}}
@keyframes zp-blink{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.08)}}
@keyframes zp-mark{0%,100%{transform:rotate(0)}50%{transform:rotate(6deg)}}
/* hop on hover of the whole brand, and a standing hop class for scripted moments */
.zp.hopping .zp-all{animation:zp-hop .9s var(--spring,cubic-bezier(.34,1.56,.64,1)) both}
@keyframes zp-hop{0%{transform:none}18%{transform:translateY(6px) scale(1.08,.9)}50%{transform:translateY(-46px) scale(.92,1.1)}78%{transform:translateY(0) scale(1.08,.92)}100%{transform:none}}

[data-mood=happy] .zp-eyes,[data-mood=proud] .zp-eyes{opacity:0}
[data-mood=happy] .zp-happy-eyes,[data-mood=proud] .zp-happy-eyes{opacity:1}
[data-mood=happy] .zp-heart{opacity:1;animation:zp-heart 1.8s ease-out infinite}
[data-mood=eat] .zp-smile,[data-mood=wow] .zp-smile{opacity:0}
[data-mood=eat] .zp-mouth,[data-mood=wow] .zp-mouth{opacity:1}
[data-mood=eat] .zp-mouth{transform-origin:50% 0;animation:zp-chew .38s ease-in-out infinite}
[data-mood=wow] .zp-eye{animation:none;transform:scale(1.12)}
[data-mood=wow] .zp-bang{opacity:1;animation:zp-pop .5s var(--spring,cubic-bezier(.34,1.56,.64,1))}
[data-mood=think] .zp-smile{opacity:0}[data-mood=think] .zp-think{opacity:1}
[data-mood=think] .zp-pupil{transform:translate(-6px,-5px)}
[data-mood=sleep] .zp-eyes{opacity:0}[data-mood=sleep] .zp-closed{opacity:1}
[data-mood=sleep] .zp-zzz{opacity:1;animation:zp-z 2.6s ease-in-out infinite}
[data-mood=sleep] .zp-all{animation-duration:4.2s}
[data-mood=wave] .zp-arm-r{animation:zp-wave .5s ease-in-out infinite alternate;transform-origin:20% 70%}
[data-mood=proud] .zp-body{transform:scale(1.03)}
@keyframes zp-chew{0%,100%{transform:scaleY(.55)}50%{transform:scaleY(1.05)}}
@keyframes zp-pop{0%{transform:scale(0)}100%{transform:scale(1)}}
@keyframes zp-z{0%{opacity:0;transform:translate(0,8px)}40%{opacity:1}100%{opacity:0;transform:translate(-6px,-18px)}}
@keyframes zp-heart{0%{opacity:0;transform:translateY(8px) scale(.6)}30%{opacity:1}100%{opacity:0;transform:translateY(-22px) scale(1.1)}}
@keyframes zp-wave{from{transform:rotate(-14deg)}to{transform:rotate(26deg)}}
@media (prefers-reduced-motion:reduce){.zp *{animation:none!important}}