/* Аві — стани й анімації. Розмір задає ширина контейнера. */
.avi{display:inline-block;width:160px;line-height:0}
.avi-svg{width:100%;height:auto;overflow:visible}
.avi-svg *{transform-box:view-box}

/* типові частини */
.avi .m,.avi .prop,.avi .eyes-closed{display:none}
.avi .m-smile{display:inline}
.avi .brows{opacity:0;transition:opacity .2s}
.avi .brow-l,.avi .brow-r,.avi .look{transition:transform .25s}
.avi .arm{transition:transform .35s cubic-bezier(.3,1.4,.5,1)}
.avi .arm-l{transform-origin:30px 146px}
.avi .arm-r{transform-origin:170px 146px}
.avi .eyes{transform-origin:100px 86px;animation:avi-blink 4.5s infinite}
.avi-svg{animation:avi-float 3.2s ease-in-out infinite}

/* радіє */
.avi[data-mood=happy] .m-smile{display:none}
.avi[data-mood=happy] .m-open{display:inline}
.avi[data-mood=happy] .arm-l{transform:rotate(115deg)}
.avi[data-mood=happy] .arm-r{transform:rotate(-115deg)}
.avi[data-mood=happy] .avi-svg{animation:avi-bounce .6s ease-in-out infinite}

/* думає */
.avi[data-mood=think] .m-smile{display:none}
.avi[data-mood=think] .m-think{display:inline}
.avi[data-mood=think] .brows{opacity:1}
.avi[data-mood=think] .brow-r{transform:translateY(-4px)}
.avi[data-mood=think] .look{transform:translate(3px,-3px)}
.avi[data-mood=think] .arm-r{transform:rotate(164deg)}
.avi[data-mood=think] .bubble{display:inline}
.avi[data-mood=think] .bubble circle{animation:avi-dots 1.6s infinite both}
.avi[data-mood=think] .bubble .d2{animation-delay:.25s}
.avi[data-mood=think] .bubble .d3{animation-delay:.5s}
.avi[data-mood=think] .avi-svg{animation:avi-tilt 3s ease-in-out infinite}

/* підказує */
.avi[data-mood=hint] .m-smile{display:none}
.avi[data-mood=hint] .m-talk{display:inline;transform-origin:100px 107px;animation:avi-talk .5s ease-in-out infinite alternate}
.avi[data-mood=hint] .brows{opacity:1}
.avi[data-mood=hint] .brow-l,.avi[data-mood=hint] .brow-r{transform:translateY(-4px)}
.avi[data-mood=hint] .arm-r{transform:rotate(-140deg)}
.avi[data-mood=hint] .bulb{display:inline}
.avi[data-mood=hint] .rays{animation:avi-glow 1s ease-in-out infinite alternate}

/* хвалить */
.avi[data-mood=praise] .m-smile,.avi[data-mood=praise] .eyes-open{display:none}
.avi[data-mood=praise] .m-open,.avi[data-mood=praise] .eyes-closed{display:inline}
.avi[data-mood=praise] .eyes{animation:none}
.avi[data-mood=praise] .arm-l{transform:rotate(140deg)}
.avi[data-mood=praise] .arm-r{transform:rotate(-140deg)}
.avi[data-mood=praise] .stars{display:inline}
.avi[data-mood=praise] .star{transform-box:fill-box;transform-origin:center;animation:avi-twinkle 1.2s ease-in-out infinite}
.avi[data-mood=praise] .s2{animation-delay:.3s}
.avi[data-mood=praise] .s3{animation-delay:.6s}
.avi[data-mood=praise] .s4{animation-delay:.9s}
.avi[data-mood=praise] .avi-svg{animation:avi-bounce .8s ease-in-out infinite}

/* махає */
.avi[data-mood=wave] .arm-r{animation:avi-wave .9s ease-in-out infinite}

@keyframes avi-blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
@keyframes avi-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes avi-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes avi-tilt{0%,100%{transform:rotate(0)}50%{transform:rotate(-3deg)}}
@keyframes avi-wave{0%,100%{transform:rotate(-115deg)}50%{transform:rotate(-155deg)}}
@keyframes avi-dots{0%{opacity:0}30%,100%{opacity:1}}
@keyframes avi-talk{from{transform:scaleY(.6)}to{transform:scaleY(1)}}
@keyframes avi-glow{from{opacity:.3}to{opacity:1}}
@keyframes avi-twinkle{0%,100%{transform:scale(.6) rotate(0)}50%{transform:scale(1.15) rotate(20deg)}}

/* без анімацій, якщо так налаштовано в системі */
@media (prefers-reduced-motion: reduce){
  .avi *,.avi-svg{animation:none!important;transition:none!important}
  .avi[data-mood=wave] .arm-r{transform:rotate(-135deg)}
}