/* A CENOURA - as seis poses, feitas so com transform e opacity.
 *
 * Nada aqui muda geometria (nem `d`, nem largura, nem cor de ninguem): so rotacao, translacao
 * e quem esta visivel. E por isso que as seis sao reconhecidamente o mesmo bicho, e e por isso
 * que a animacao nao custa render - o navegador compoe em GPU e nao repinta nada.
 */

.cenoura {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* -- as cores, todas vindas dos tokens -- */
.c-corpo    { fill: var(--cenoura); }
/* O contorno e um path proprio, sem preenchimento, por cima da cor. A linha nao e preta:
 * e o laranja escuro da propria cenoura, que e o que separa desenho de decalque. */
.c-contorno { fill: none; stroke: var(--cenoura-sombra); stroke-width: 2.6; opacity: .55; }
.c-folha    { fill: var(--folha); }
.c-folha--m { fill: var(--folha-clara); }          /* a do meio e mais clara: da volume */
.c-folha--d { fill: color-mix(in oklab, var(--folha) 82%, var(--tinta) 18%); }
.c-gomos path {
  fill: none;
  stroke: var(--cenoura-sombra);
  stroke-width: 3.2;
  stroke-linecap: round;
  opacity: .5;
}
/* O BRACO E DOIS TRACOS SOBREPOSTOS: um mais grosso e escuro por baixo (o contorno) e o
 * laranja por cima. Sem isso o braco some quando passa POR CIMA do corpo — que e exatamente
 * o que acontece no abraco da pose "recebido": mesma cor, mesma coisa, nada aparece. */
.c-braco path { fill: none; stroke-linecap: round; }
.c-braco-linha { stroke: var(--cenoura-sombra); stroke-width: 10; }
.c-braco-miolo { stroke: var(--cenoura-luz);   stroke-width: 6.5; }
.c-bochecha { fill: var(--bochecha); opacity: .5; }
.c-olhos-abertos circle { fill: var(--tinta); }
/* o brilho do olho: dois pontos claros que transformam bolinha preta em OLHAR. */
.c-brilho { fill: var(--papel-alto); }
.c-olhos-fechados path,
.c-boca--calma,
.c-boca--bico {
  fill: none;
  stroke: var(--tinta);
  stroke-width: 3;
  stroke-linecap: round;
}
.c-boca--aberta { fill: var(--tinta); }

/* -- os ombros: todo braco gira NO PROPRIO ombro, senao a rotacao arranca o braco do corpo -- */
.c-braco--e { transform-origin: 62px 126px; }
.c-braco--d { transform-origin: 138px 126px; }
.c-braco    { transition: transform var(--mov-mole); }

/* -- quem aparece: por padrao, olhos abertos e boca calma -- */
.c-olhos-fechados,
.c-boca--aberta,
.c-boca--bico    { opacity: 0; }
.c-olhos-abertos,
.c-boca--calma   { opacity: 1; }
.c-olhos-abertos,
.c-olhos-fechados,
.c-boca          { transition: opacity var(--mov-rapido); }

/* -- o corpo inteiro: respiro lento, e inclinacao por pose -- */
.c-tudo {
  transform-origin: 100px 224px;   /* a ponta da cenoura: ela gira apoiada no chao */
  transition: transform var(--mov-calmo);
  animation: c-respiro 4.6s ease-in-out infinite;
}
@keyframes c-respiro {
  0%, 100% { transform: translateY(0) scaleY(1); }
  50%      { transform: translateY(-4px) scaleY(1.012); }
}

/* =============== AS SEIS POSES ===============
 *
 * OS ANGULOS SAIRAM DA GEOMETRIA, nao de tentativa e erro. Em repouso o braco esquerdo aponta
 * pra 134deg e o direito pra 46deg (0=direita, 90=BAIXO, 180=esquerda, 270=cima -- o y do SVG
 * cresce pra baixo, e rotate positivo e horario). Cada pose diz PRA ONDE o braco deve apontar,
 * e o valor aqui e a diferenca.
 *
 * A primeira versao errou o SINAL: rotate(-104deg) no braco esquerdo o levava PRA DENTRO do
 * corpo, e em "pedindo", "vem" e "recebido" os bracos simplesmente desapareciam. Na foto
 * parecia que faltava desenho; era conta trocada. */

/* 1 - PARADA: nada acontecendo. Bracos caidos, rosto quieto.
 *     E tambem a tela DELE quando nao tem dengo pedido. */
[data-estado="parada"] .c-braco--e { transform: rotate(4deg); }
[data-estado="parada"] .c-braco--d { transform: rotate(-4deg); }

/* 2 - PEDINDO: o instante do toque. Os dois bracos escancarados pra cima. */
[data-estado="pedindo"] .c-braco--e     { transform: rotate(81deg); }
[data-estado="pedindo"] .c-braco--d     { transform: rotate(-81deg); }
[data-estado="pedindo"] .c-boca--calma  { opacity: 0; }
[data-estado="pedindo"] .c-boca--aberta { opacity: 1; }
[data-estado="pedindo"] .c-tudo {
  animation: c-pedindo var(--mov-mole) both, c-respiro 4.6s ease-in-out 620ms infinite;
}
@keyframes c-pedindo {
  0%   { transform: translateY(0) scale(1); }
  45%  { transform: translateY(-14px) scale(1.06); }
  100% { transform: translateY(0) scale(1); }
}

/* 3 - ESPERANDO: pedido aberto, sem resposta. Maozinha no rosto, olhando pra fora do quadro.
 *     Paciente, nao cobrando: a inclinacao e de espera, nao de bico. */
[data-estado="esperando"] .c-braco--e { transform: rotate(26deg); }
[data-estado="esperando"] .c-braco--d { transform: rotate(10deg); }
[data-estado="esperando"] .c-tudo     { transform: rotate(-5deg); }

/* 4 - CUTUCANDO: ela tocou "cade meu dengo". Um braco estendido puxando a manga de alguem que
 *     esta fora do quadro. Bico pequeno, e o corpo inclinado PRA FRENTE (vontade), nunca pra
 *     baixo (culpa) - o app nao pode fazer ela sentir que cobra. */
[data-estado="cutucando"] .c-braco--d    { transform: rotate(-54deg); }
[data-estado="cutucando"] .c-braco--e    { transform: rotate(-6deg); }
[data-estado="cutucando"] .c-boca--calma { opacity: 0; }
[data-estado="cutucando"] .c-boca--bico  { opacity: 1; }
[data-estado="cutucando"] .c-tudo        { transform: rotate(7deg) translateX(4px); }

/* 5 - VEM: ele respondeu "to indo" ou "ja ja". Bracos pro alto, olhos apertados de contente. */
[data-estado="vem"] .c-braco--e        { transform: rotate(108deg); }
[data-estado="vem"] .c-braco--d        { transform: rotate(-108deg); }
[data-estado="vem"] .c-olhos-abertos   { opacity: 0; }
[data-estado="vem"] .c-olhos-fechados  { opacity: 1; }
[data-estado="vem"] .c-boca--calma     { opacity: 0; }
[data-estado="vem"] .c-boca--aberta    { opacity: 1; }
[data-estado="vem"] .c-tudo {
  animation: c-pulinho 900ms var(--mov-mole) 2, c-respiro 4.6s ease-in-out 1.8s infinite;
}
@keyframes c-pulinho {
  0%, 100% { transform: translateY(0) scale(1); }
  30%      { transform: translateY(-18px) scale(1.04, .97); }
  60%      { transform: translateY(0) scale(.98, 1.03); }
}

/* 6 - RECEBIDO: ela confirmou. Abracada em si mesma, olhos fechados.
 *     Os bracos cruzam por cima do corpo; o `translate` e o que faz eles se encontrarem no
 *     meio em vez de ficarem dois cotos apontando pra dentro. */
[data-estado="recebido"] .c-braco--e       { transform: rotate(-111deg); }
[data-estado="recebido"] .c-braco--d       { transform: rotate(111deg); }
[data-estado="recebido"] .c-olhos-abertos  { opacity: 0; }
[data-estado="recebido"] .c-olhos-fechados { opacity: 1; }
[data-estado="recebido"] .c-bochecha       { opacity: .8; }
[data-estado="recebido"] .c-tudo           { transform: scale(.97); }

/* -- o pulinho de "algo aconteceu", sem trocar de pose (quando ela cutuca de novo) -- */
.c-reagindo .c-tudo { animation: c-reacao 420ms var(--mov-mole); }
@keyframes c-reacao {
  0%, 100% { transform: translateY(0) rotate(0); }
  35%      { transform: translateY(-10px) rotate(-5deg); }
  70%      { transform: translateY(0) rotate(4deg); }
}

/* -- quem pediu pra o mundo parar de se mexer --
 * Nao e enfeite de acessibilidade: tem gente que sente nausea com movimento na tela, e uma
 * cenoura respirando 24h e exatamente o tipo de coisa que provoca isso.
 *
 * O seletor carrega `svg[data-estado]` de proposito: a especificidade (0,2,1) precisa ganhar
 * das poses acima, que sao (0,2,0). E o caminho certo - a flag de prioridade do CSS e proibida
 * no cofre (ela e removida pelo WordPress da Mirian, e a lei valeu pra todo lugar). */
@media (prefers-reduced-motion: reduce) {
  svg[data-estado] .c-tudo,
  svg[data-estado].c-reagindo .c-tudo {
    animation: none;
  }
  svg[data-estado] .c-braco,
  svg[data-estado] .c-tudo,
  svg[data-estado] .c-olhos-abertos,
  svg[data-estado] .c-olhos-fechados,
  svg[data-estado] .c-boca {
    transition-duration: 1ms;
  }
}