/* Beni v4 motion adapted from /assets/beniai.c0263af6.css. */
/* ===== Beni motion ===== */
.beni .bn-tip,.beni .bn-ant,.beni .bn-head,.beni .bn-wave,.beni .bn-eyes,.beni .bn-look,.beni .bn-dot,.beni .bn-cheer{transform-box:fill-box}
.beni .bn-tip{transform-origin:62% 50%}
.beni .bn-ant{transform-origin:50% 100%}
.beni .bn-head{transform-origin:50% 100%}
.beni .bn-eyes{transform-origin:center}
.beni .bn-ear-glow,.beni .bn-ring,.beni .bn-sig{opacity:0}
@keyframes bnFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes bnBlink{0%,93%,100%{transform:scaleY(1)}95.5%{transform:scaleY(.08)}}
@keyframes bnVane{0%,45%{transform:scaleX(1)}55%{transform:scaleX(-1)}65%{transform:scaleX(1)}75%{transform:scaleX(-1)}85%,100%{transform:scaleX(1)}}
@keyframes bnWave{0%,100%{transform:rotate(0)}30%{transform:rotate(-20deg)}70%{transform:rotate(12deg)}}
@keyframes bnSway{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
@keyframes bnSig{0%,100%{opacity:.15}50%{opacity:.95}}
@keyframes bnTipGlow{0%,100%{opacity:.7}50%{opacity:1}}
@keyframes bnEarFlash{0%,100%{opacity:0}35%{opacity:.8}}
@keyframes bnLook{0%,100%{transform:translate(0,0)}30%{transform:translate(5px,-2px)}62%{transform:translate(-4px,-2px)}}
@keyframes bnDot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
@keyframes bnHop{0%,50%,100%{transform:translateY(0)}62%{transform:translateY(-13px)}74%{transform:translateY(0)}81%{transform:translateY(-4px)}88%{transform:translateY(0)}}
@keyframes bnPop{0%,50%,100%{transform:scale(1) rotate(0)}62%{transform:scale(1.35) rotate(-360deg)}74%{transform:scale(1) rotate(-360deg)}}
@keyframes bnCheer{0%,50%,100%{transform:translateY(0)}62%{transform:translateY(-5px)}}
@keyframes bnWobble{0%,55%,100%{transform:rotate(0)}63%{transform:rotate(-11deg)}71%{transform:rotate(9deg)}79%{transform:rotate(-5deg)}87%{transform:rotate(2deg)}}
@keyframes bnSlow{0%,100%{opacity:0}50%{opacity:.55}}
@keyframes bnNod{0%,100%{transform:rotate(0)}50%{transform:rotate(3deg)}}
@keyframes bnRing{0%{opacity:0}30%{opacity:.9}100%{opacity:0}}

.beni .bn-top{animation:bnFloat 4.2s ease-in-out infinite}
.beni .bn-eyes{animation:bnBlink 5.5s infinite}
/* 반가워요 */
.st-happy .bn-tip{animation:bnVane 2.8s ease-in-out infinite}
.st-happy .bn-wave{transform-origin:18% 88%;animation:bnWave 1.2s ease-in-out infinite}
.st-happy .bn-head{animation:bnSway 2.4s ease-in-out infinite}
/* 생각하는 중 */
.st-think .bn-sig{animation:bnSig 1.4s ease-in-out infinite}
.st-think .bn-sig.s2{animation-delay:.3s}
.st-think .bn-tip{animation:bnTipGlow 1.4s ease-in-out infinite}
.st-think .bn-ear-glow{animation:bnEarFlash 1.2s ease-in-out infinite}
.st-think .bn-ear-glow.r{animation-delay:.6s}
.st-think .bn-look{animation:bnLook 3.2s ease-in-out infinite}
.st-think .bn-dot{animation:bnDot 1.2s ease-in-out infinite}
.st-think .bn-dot.d2{animation-delay:.2s}
.st-think .bn-dot.d3{animation-delay:.4s}
/* 완료했어요 */
.st-done .bn-top{animation:bnHop 2.4s ease-out infinite}
.st-done .bn-tip{animation:bnPop 2.4s ease-out infinite}
.st-done .bn-cheer{animation:bnCheer 2.4s ease-out infinite}
.st-done .bn-ear-glow{animation:bnSlow 2.4s ease-in-out infinite}
/* 확인이 필요해요 */
.st-caution .bn-top{animation-duration:6s}
.st-caution .bn-ant{animation:bnWobble 2.8s ease-in-out infinite}
.st-caution .bn-ear-glow{animation:bnSlow 2.8s ease-in-out infinite}
/* 듣고 있어요 */
.st-listen .bn-head{animation:bnNod 2.6s ease-in-out infinite}
.st-listen .bn-ring{animation:bnRing 1.8s ease-out infinite}
.st-listen .bn-ring.r2{animation-delay:.35s}
.still .bn-sig{opacity:.7}
@media (prefers-reduced-motion: reduce){.beni *{animation:none!important}.st-think .bn-sig{opacity:.7}}


.beni{display:block;width:100%;height:auto;overflow:visible;stroke:none;stroke-width:initial;stroke-linecap:initial;stroke-linejoin:initial;fill:initial}
.beni.st-happy .bn-tip,.beni.st-happy .bn-head{animation-iteration-count:1}
.beni.st-happy .bn-wave{animation-iteration-count:2}
.beni.st-done .bn-top,.beni.st-done .bn-tip,.beni.st-done .bn-cheer{animation-iteration-count:1}