/* Animações dos modelos do Claudinho. Estado no contêiner: data-estado="parado|ouvindo|pensando|falando". */
.cl-personagem { display: block; width: 100%; height: auto; overflow: visible; }
.cl-personagem * { transform-box: fill-box; }

.cl-corpo { transform-origin: 50% 100%; animation: cl-respira 3.4s ease-in-out infinite; }
.cl-cabeca { transform-origin: 50% 90%; transition: transform .45s ease; }
.cl-olhos { transform-origin: center; animation: cl-piscar 4.3s infinite; }
.cl-pupilas { transition: transform .35s ease; }
.cl-boca-fechada { transition: opacity .12s; }
.cl-boca-aberta { opacity: 0; transform-origin: 50% 0; transition: opacity .12s; }
.cl-ondas, .cl-pensa { opacity: 0; transition: opacity .3s; }
.cl-luz { animation: cl-brilho 2.6s ease-in-out infinite; }
.cl-estrela { transform-origin: center; animation: cl-cintila 2.2s ease-in-out infinite; }
.cl-estrela:nth-child(2) { animation-delay: .7s; }
.cl-estrela:nth-child(3) { animation-delay: 1.4s; }

@keyframes cl-respira { 50% { transform: translateY(2px) scale(1.012, .988); } }
@keyframes cl-piscar { 0%, 91%, 100% { transform: scaleY(1); } 94% { transform: scaleY(.08); } }
@keyframes cl-brilho { 50% { opacity: .45; } }
@keyframes cl-cintila { 50% { transform: scale(.55) rotate(20deg); opacity: .5; } }

/* OUVINDO: cabeça inclinada, olhos um pouco maiores, ondas de som dos lados */
[data-estado="ouvindo"] .cl-cabeca { animation: cl-inclina 2.4s ease-in-out infinite; }
[data-estado="ouvindo"] .cl-olhos { animation: cl-piscar 5s infinite; transform: scale(1.06); }
[data-estado="ouvindo"] .cl-ondas { opacity: 1; }
[data-estado="ouvindo"] .cl-onda { transform-origin: center; animation: cl-onda 1.3s ease-out infinite; }
[data-estado="ouvindo"] .cl-onda2 { animation-delay: .35s; }
[data-estado="ouvindo"] .cl-luz { animation-duration: .9s; }
@keyframes cl-inclina { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(-3deg); } }
@keyframes cl-onda { 0% { opacity: 0; transform: scale(.85); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.12); } }

/* PENSANDO: olha para cima, cabeça para o outro lado, bolhas de pensamento subindo */
[data-estado="pensando"] .cl-cabeca { transform: rotate(5deg); }
[data-estado="pensando"] .cl-pupilas { transform: translate(3px, -5px); }
[data-estado="pensando"] .cl-pensa { opacity: 1; }
[data-estado="pensando"] .cl-pensa circle { transform-origin: center; animation: cl-bolha 1.2s ease-in-out infinite; }
[data-estado="pensando"] .cl-pensa circle:nth-child(2) { animation-delay: .2s; }
[data-estado="pensando"] .cl-pensa circle:nth-child(3) { animation-delay: .4s; }
[data-estado="pensando"] .cl-boca-fechada { transform-origin: center; transform: scaleX(.6); }
@keyframes cl-bolha { 0%, 100% { transform: translateY(0) scale(.85); opacity: .55; } 50% { transform: translateY(-4px) scale(1.08); opacity: 1; } }

/* FALANDO: boca abre e fecha, corpo balança no ritmo */
[data-estado="falando"] .cl-boca-fechada { opacity: 0; }
[data-estado="falando"] .cl-boca-aberta { opacity: 1; animation: cl-fala .95s linear infinite; }
[data-estado="falando"] .cl-corpo { animation: cl-balanca 1.1s ease-in-out infinite; }
@keyframes cl-fala {
  0% { transform: scaleY(.3); } 14% { transform: scaleY(1); } 28% { transform: scaleY(.5); }
  42% { transform: scaleY(.9); } 57% { transform: scaleY(.25); } 72% { transform: scaleY(.85); }
  86% { transform: scaleY(.45); } 100% { transform: scaleY(.3); }
}
@keyframes cl-balanca { 0%, 100% { transform: rotate(-1.5deg) translateY(0); } 50% { transform: rotate(1.5deg) translateY(-3px); } }

/* Boca no ritmo real da voz (ClaudinhoPersonagens.boca) */
[data-sinc="1"][data-estado="falando"] .cl-boca-aberta { animation: none; transform: scaleY(calc(.2 + var(--boca, 0) * .8)); }

/* Bolinha quica de verdade quando fala */
.cl-bolinha .cl-cabeca { transform-origin: 50% 100%; }
[data-estado="falando"] .cl-bolinha .cl-corpo { animation: cl-quica .55s ease-in-out infinite alternate; }
@keyframes cl-quica { from { transform: scale(1.04, .96); } to { transform: translateY(-6px) scale(.97, 1.03); } }

@media (prefers-reduced-motion: reduce) {
  .cl-corpo, .cl-cabeca, .cl-onda, .cl-pensa circle, .cl-luz, .cl-estrela { animation: none !important; }
}