/* ============================================================
   Personagens-forma — estilo + motor de animação (compartilhado)
   Carregue junto com characters.js. Ver 00-design-system.md §4A.
   ============================================================ */

/* traço de lápis, fino */
.toon{ --sw:2.4; filter:url(#eb-pencil); display:inline-block; vertical-align:middle; cursor:pointer; }
.toon path,.toon line,.toon circle,.toon polyline,.toon ellipse,.toon polygon,.toon rect{
  stroke:#1d1d1f; stroke-width:var(--sw); stroke-linecap:round; stroke-linejoin:round; fill:none;
  vector-effect:non-scaling-stroke;
}
.toon .fill-ink{ fill:#1d1d1f; stroke:none; }

/* ---- ENTRADA (toda forma que aparece faz algo) ---- */
/* roda uma vez quando o personagem entra em cena */
.toon.enter .shape{ animation:eb-enter .6s cubic-bezier(.2,.9,.3,1.3) both; transform-origin:center 60%; }
@keyframes eb-enter{ 0%{ transform:translateY(14px) scale(.6); opacity:0 } 70%{ transform:translateY(-3px) scale(1.05); opacity:1 } 100%{ transform:translateY(0) scale(1); opacity:1 } }

/* ---- IDLE (ambiente contínuo: respira / flutua) ---- */
.toon .shape{ animation:eb-breathe 3.6s ease-in-out infinite; transform-origin:center 60%; }
.toon.enter .shape{ animation:eb-enter .6s cubic-bezier(.2,.9,.3,1.3) both, eb-breathe 3.6s ease-in-out .6s infinite; }
@keyframes eb-breathe{ 0%,100%{ transform:translateY(0) scale(1) } 50%{ transform:translateY(-2px) scale(1.015) } }

/* ---- AÇÕES ONE-SHOT (classe .do-* temporária) ---- */
.toon.do-jump .shape{ animation:eb-jump .7s cubic-bezier(.3,1.6,.5,1); transform-origin:center bottom; }
@keyframes eb-jump{ 0%{transform:translateY(0)} 35%{transform:translateY(-26px)} 55%{transform:translateY(-26px)} 100%{transform:translateY(0)} }

.toon.do-bounce .shape{ animation:eb-bounce .5s ease-in-out 3; transform-origin:center bottom; }
@keyframes eb-bounce{ 0%,100%{transform:scaleY(1) scaleX(1)} 40%{transform:scaleY(.8) scaleX(1.1)} 70%{transform:scaleY(1.06) scaleX(.97)} }

.toon.do-spin .shape{ animation:eb-spin .9s ease-in-out; transform-origin:center 58%; }
@keyframes eb-spin{ 0%{transform:rotate(0)} 100%{transform:rotate(360deg)} }

.toon.do-shake .shape{ animation:eb-shake .16s linear 8; }
@keyframes eb-shake{ 0%{transform:translateX(0) rotate(0)} 25%{transform:translateX(-2px) rotate(-2deg)} 75%{transform:translateX(2px) rotate(2deg)} 100%{transform:translateX(0) rotate(0)} }

.toon.do-wiggle .shape{ animation:eb-wiggle 1.1s ease-in-out; transform-origin:center bottom; }
@keyframes eb-wiggle{ 0%,100%{transform:rotate(0)} 20%{transform:rotate(-7deg)} 50%{transform:rotate(7deg)} 80%{transform:rotate(-4deg)} }

.toon.do-nod .shape{ animation:eb-nod .9s ease-in-out; transform-origin:center 40%; }
@keyframes eb-nod{ 0%,100%{transform:rotate(0)} 30%{transform:rotate(6deg)} 60%{transform:rotate(-3deg)} }

.toon.do-tilt .shape{ animation:eb-tilt 1.3s ease-in-out; transform-origin:center 45%; }
@keyframes eb-tilt{ 0%,100%{transform:rotate(0)} 35%,65%{transform:rotate(-10deg)} }

.toon.do-pop .shape{ animation:eb-pop .5s cubic-bezier(.3,1.7,.5,1); transform-origin:center 60%; }
@keyframes eb-pop{ 0%{transform:scale(1)} 45%{transform:scale(1.18)} 100%{transform:scale(1)} }

/* piscar um olho — alvo são os olhos, não a forma */
.toon .eye-r-lid{ opacity:0; }
.toon.do-wink .eye-r{ animation:eb-wink 1s ease-in-out; }
@keyframes eb-wink{ 0%,20%,80%,100%{opacity:1} 35%,65%{opacity:0} }
.toon.do-wink .eye-r-lid{ animation:eb-lid 1s ease-in-out; }
@keyframes eb-lid{ 0%,20%,80%,100%{opacity:0} 35%,65%{opacity:1} }

/* dica de "me clique" no primeiro hover */
.toon:hover{ filter:url(#eb-pencil) drop-shadow(0 2px 0 rgba(229,23,123,.18)); }

@media (prefers-reduced-motion: reduce){
  .toon .shape, .toon.enter .shape, .toon.do-jump .shape, .toon.do-bounce .shape, .toon.do-spin .shape,
  .toon.do-shake .shape, .toon.do-wiggle .shape, .toon.do-nod .shape, .toon.do-tilt .shape,
  .toon.do-pop .shape, .toon.do-wink .eye-r, .toon.do-wink .eye-r-lid{ animation:none !important; }
}