/* =============================
   css/chars.css
   ============================= */
/* ===== personagens em SVG (H, patrão, enfermeira) ===== */
.char{overflow:visible}

/* peças que se mexem (cada uma tem seu ponto de giro, em unidades do SVG) */
.lg.l{transform-origin:72px 200px}
.lg.r{transform-origin:128px 200px}
.ar.l{transform-origin:40px 104px}
.ar.r{transform-origin:160px 104px}
.ar{transition:transform .08s}
.hm{transform-origin:100px 80px}
.ey{transform-box:fill-box;transform-origin:center;animation:blinkH 4s infinite}

/* falando: boca e cabeça mexem */
.talk .hm{animation:yapH .16s infinite alternate}
.talk .hd{animation:nodH .3s infinite alternate}
@keyframes blinkH{94%{transform:scaleY(1)}97%{transform:scaleY(.1)}}
@keyframes yapH{to{transform:scaleY(1.7)}}
@keyframes nodH{to{transform:translateY(-3px)}}

/* andando (reservado para fases futuras) */
.walk .lg.l,.walk .ar.r{animation:swA .35s infinite alternate}
.walk .lg.r,.walk .ar.l{animation:swB .35s infinite alternate}
.walk .bd{animation:hop .175s infinite alternate}
.flip{transform:scaleX(-1)}
@keyframes swA{from{transform:rotate(-14deg)}to{transform:rotate(14deg)}}
@keyframes swB{from{transform:rotate(14deg)}to{transform:rotate(-14deg)}}
@keyframes hop{to{transform:translateY(-4px)}}

/* ----- humor do H: m0 feliz · m1 triste · m2 cansado · m3 esgotado ----- */
.hs,.lid,.lid2,.bag,.sweat,.tear,.bandage{display:none}
.bl,.br{transform-box:fill-box;transform-origin:center;transition:transform .2s}
.m1 .hm,.m2 .hm,.m3 .hm{display:none}
.m1 .hs,.m2 .hs,.m3 .hs{display:inline}
.m1 .bl,.m2 .bl{transform:rotate(-16deg)}
.m1 .br,.m2 .br{transform:rotate(16deg)}
.m3 .bl{transform:rotate(-24deg)}
.m3 .br{transform:rotate(24deg)}
.m2 .lid,.m2 .bag,.m3 .lid2,.m3 .bag{display:inline}
.m3 .sweat{display:inline;animation:sw 1.1s infinite}
.m3 .hd{transform:translateY(4px)}
.talk .hs{transform-box:fill-box;transform-origin:50% 100%;animation:yapS .16s infinite alternate}
.char.h .bandage{display:inline}
@keyframes yapS{to{transform:scaleY(1.7)}}
@keyframes sw{0%{transform:translateY(-4px);opacity:0}30%{opacity:1}100%{transform:translateY(14px);opacity:0}}

/* braços pegando caixa (fase da esteira) */
.char.gl .ar.l{transform:rotate(42deg)}
.char.gr .ar.r{transform:rotate(-42deg)}

/* H com dor: treme todo */
.char.hurt{animation:shake .1s infinite}
@keyframes shake{0%{transform:translate(-2px,0) rotate(-1deg)}50%{transform:translate(2px,-1px) rotate(1deg)}100%{transform:translate(-1px,1px) rotate(0)}}

/* H chorando: lágrimas descendo */
.char.cry .hd{animation:nodH .6s infinite alternate}
.char.cry .tear{display:inline;animation:tear 1s infinite}
@keyframes tear{0%{transform:translateY(-3px);opacity:0}30%{opacity:1}100%{transform:translateY(16px);opacity:0}}