/* Cortex, o boneco do PW7 OS (pedido 148): o desenho em vetor (desenho.mjs) com o rosto animado por estado.
   Todos os pedaços do rosto existem sempre; o estado escolhe quais aparecem, com transição curta e um pouco de mola,
   então trocar o estado anima a passagem (os olhos se transformam, não trocam de imagem). A arrumação sem transição
   está em arrumacao() no desenho.mjs (é a que vira PNG): mexeu aqui, mexa lá.
   Camadas: (1) estado de base, mascote--<estado>; (2) vida, só com .mascote--vivo (o motor.mjs liga): piscar (duas a cada 2,5 s),
   olhar (--olhar-x/--olhar-y), antena, cochilo; (3) reações curtas, mascote--r-<reação>; (4) voz: --volume (ouvindo)
   e --boca (falando). Só transform e opacity. Com prefers-reduced-motion sobra a troca de estado, sem movimento. */

.mascote { position: relative; display: inline-block; width: var(--mascote-tamanho, 96px); height: var(--mascote-tamanho, 96px); flex: none; line-height: 0; vertical-align: middle;
  --mola: cubic-bezier(.34, 1.4, .5, 1); --suave: cubic-bezier(.3, .7, .3, 1); }
.mascote .mascote-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.mascote .mascote-cabeca { transform-box: view-box; transform-origin: 100px 170px; animation: mc-respira 3.6s ease-in-out infinite; }
.mascote .rosto * { transform-box: fill-box; transform-origin: center; }
.mascote .olhos, .mascote .olho, .mascote .pupilas, .mascote .arcos, .mascote .sorriso, .mascote .pontos, .mascote .exclama, .mascote .boca-luz, .mascote .carregando {
  transition: opacity 200ms ease, transform 240ms var(--mola);
}
/* para onde ele olha: o rosto inteiro anda alguns pixels dentro do visor */
.mascote .olhar { transform: translate(calc(var(--olhar-x, 0) * 1px), calc(var(--olhar-y, 0) * 1px)); transition: transform 650ms var(--mola); }

/* o que fica escondido até o estado pedir */
.mascote .pupilas, .mascote .arcos, .mascote .sorriso, .mascote .pontos, .mascote .exclama, .mascote .boca-luz, .mascote .carregando { opacity: 0; }
.mascote .arcos { transform: translateY(3px) scaleY(.6); }
.mascote .exclama { transform: scale(.6); }
.mascote .boca-luz { transform: scaleY(.15); }

@keyframes mc-respira { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.8px); } }

/* sem o motor (avatar parado, página sem JS): a piscada é do CSS, igual à do motor (decisão do Gabriel, 17/10):
   duas piscadas rápidas (120 ms cada, 120 ms entre elas) e 2,5 s de pausa; ciclo de 2,86 s */
@keyframes mc-pisca { 0%, 4.2%, 8.4%, 12.6%, 100% { transform: scaleY(1); } 2.1%, 10.5% { transform: scaleY(.1); } }
.mascote--parado:not(.mascote--vivo) .olho { animation: mc-pisca 2.86s ease-in-out infinite; }

/* pensando: os olhos olham para cima (pupila escura no alto) e os três pontos pulsam; a cabeça inclina um pouco */
@keyframes mc-ponto { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }
@keyframes mc-pensa { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-1.8px) rotate(-3deg); } }
.mascote--pensando .mascote-cabeca { animation-name: mc-pensa; }
.mascote--pensando .olhos, .mascote--pensando .pupilas { transform: translateY(-3.5px); }
.mascote--pensando .pupilas, .mascote--pensando .pontos { opacity: 1; }
.mascote--pensando .pontos circle { animation: mc-ponto 1.4s ease-in-out infinite; }
.mascote--pensando .pontos circle:nth-child(2) { animation-delay: .2s; }
.mascote--pensando .pontos circle:nth-child(3) { animation-delay: .4s; }

/* feliz e olá: os olhos viram arcos e aparece o sorriso */
.mascote--feliz .olhos, .mascote--ola .olhos { opacity: 0; transform: scaleY(.25); }
.mascote--feliz .arcos, .mascote--ola .arcos, .mascote--feliz .sorriso, .mascote--ola .sorriso { opacity: 1; transform: none; }
@keyframes mc-aceno { 0% { transform: rotate(0); } 25% { transform: rotate(6deg); } 55% { transform: rotate(-4deg); } 80% { transform: rotate(2deg); } 100% { transform: rotate(0); } }
.mascote--feliz .mascote-cabeca { animation: mc-aceno .9s var(--mola) 1, mc-respira 3.6s ease-in-out .9s infinite; }

/* atenção: um olho grande, o outro dá lugar ao "!", que acende; um pulo pequeno ao entrar */
@keyframes mc-pulo { 0% { transform: translateY(0); } 35% { transform: translateY(-12px); } 70% { transform: translateY(0); } 85% { transform: translateY(-3px); } 100% { transform: translateY(0); } }
@keyframes mc-acende { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
.mascote--atencao .mascote-cabeca { animation: mc-pulo .6s var(--mola) 1, mc-respira 3.6s ease-in-out .6s infinite; }
.mascote--atencao .olho-e { transform: scale(1.45); }
.mascote--atencao .olho-d { opacity: 0; transform: scale(.4); }
.mascote--atencao .exclama { opacity: 1; transform: none; animation: mc-acende 1.1s ease-in-out .25s infinite; }

/* olá: só a cabeça: inclina, balança duas vezes e fica levemente inclinada */
@keyframes mc-ola { 0% { transform: rotate(0); } 18% { transform: rotate(-11deg); } 40% { transform: rotate(5deg); } 62% { transform: rotate(-9deg); } 82% { transform: rotate(-5deg); } 100% { transform: rotate(-7deg); } }
@keyframes mc-ola-respira { 0%, 100% { transform: rotate(-7deg) translateY(0); } 50% { transform: rotate(-7deg) translateY(-1.8px); } }
.mascote--ola .mascote-cabeca { animation: mc-ola 1.3s ease-in-out 1 both, mc-ola-respira 3.6s ease-in-out 1.3s infinite; }

/* voz. ouvindo: olhos abertos que crescem um pouco com o volume de quem fala (--volume, 0 a 1) */
.mascote--ouvindo .olhos { transform: scale(calc(1 + var(--volume, 0) * .22)); transition: transform 90ms linear; }
/* falando: a boca de luz no visor acompanha a amplitude do áudio dele (--boca, 0 a 1) */
.mascote--falando .boca-luz { opacity: 1; transform: scaleY(calc(.12 + var(--boca, 0) * .88)) scaleX(calc(.7 + var(--boca, 0) * .3)); transition: opacity 160ms ease, transform 60ms linear; }
.mascote--falando .olhos { transform: translateY(-1.5px); }

/* ---------------------------------------------------------------- vida (só com o motor: .mascote--vivo) */
/* piscada do motor (duas seguidas a cada 2,5 s) */
.mascote--vivo.mascote--piscando .olho { transform: scaleY(.08); transition: transform 70ms ease-in; }
.mascote--vivo.mascote--piscando.mascote--atencao .olho-e { transform: scale(1.45) scaleY(.08); }
/* antena com um balanço leve */
@keyframes mc-antena { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3.5deg); } }
.mascote--vivo .antena { transform-box: fill-box; transform-origin: 50% 100%; animation: mc-antena 4.6s ease-in-out infinite; }
/* cochilo: olhos semicerrados e respiração mais lenta; acorda quando a pessoa digita, clica ou fala */
@keyframes mc-cochilo { 0%, 100% { transform: translateY(1px) rotate(-2deg); } 50% { transform: translateY(2.6px) rotate(-2deg); } }
.mascote--cochilo .mascote-cabeca { animation: mc-cochilo 5.5s ease-in-out infinite; }
.mascote--cochilo .olhos { transform: scaleY(.3) translateY(4px); transition: transform 900ms ease; }
.mascote--cochilo .antena { animation-duration: 8s; }

/* entrada: surge com um pulinho; saída: um aceno e some */
@keyframes mc-entra { 0% { transform: scale(.55) translateY(14px); opacity: 0; } 60% { transform: scale(1.06) translateY(-4px); opacity: 1; } 100% { transform: scale(1) translateY(0); opacity: 1; } }
@keyframes mc-sai { 0% { transform: rotate(0) scale(1); opacity: 1; } 30% { transform: rotate(-10deg) scale(1); } 55% { transform: rotate(8deg) scale(1); opacity: 1; } 100% { transform: rotate(0) scale(.6) translateY(10px); opacity: 0; } }
.mascote--entrada .mascote-svg { transform-origin: 50% 85%; animation: mc-entra .7s var(--mola) both; }
.mascote--saida .mascote-svg { transform-origin: 50% 85%; animation: mc-sai .7s ease-in both; }
/* entrada mais curta onde a tela abre com o boneco e um título animado (boas-vindas do Cortex) */
.mascote-rapida.mascote--entrada .mascote-svg { animation-duration: .45s; }

/* ---------------------------------------------------------------- reações (por cima do estado) */
/* recebeu a mensagem: um aceno curto de cabeça */
@keyframes mc-aceno-curto { 0% { transform: translateY(0); } 35% { transform: translateY(4px) rotate(2deg); } 100% { transform: translateY(0); } }
.mascote--r-recebeu .mascote-cabeca { animation: mc-aceno-curto .55s var(--mola) 1, mc-respira 3.6s ease-in-out .55s infinite; }
/* "ah!": olhos arregalados por um instante */
.mascote--r-achou .olhos { opacity: 1; transform: scale(1.32); }
.mascote--r-achou .pupilas, .mascote--r-achou .arcos { opacity: 0; }
/* confirmou: pulinho e olhos felizes */
.mascote--r-confirmou .mascote-cabeca, .mascote--r-oi .mascote-cabeca { animation: mc-pulo .6s var(--mola) 1, mc-respira 3.6s ease-in-out .6s infinite; }
.mascote--r-confirmou .olhos, .mascote--r-oi .olhos { opacity: 0; transform: scaleY(.25); }
.mascote--r-confirmou .arcos, .mascote--r-oi .arcos { opacity: 1; transform: none; }
.mascote--r-confirmou .sorriso { opacity: 1; }
/* pergunta: inclinação curiosa, um olho um pouco maior */
@keyframes mc-curioso { 0% { transform: rotate(0); } 100% { transform: rotate(8deg); } }
.mascote--r-pergunta .mascote-cabeca { animation: mc-curioso .45s var(--mola) both; }
.mascote--r-pergunta .olho-d { transform: scale(1.18); }
/* não entendeu: olhar de lado (o motor manda o olhar para a esquerda) e olhos um pouco apertados */
.mascote--r-naoEntendeu .olhos { transform: scaleY(.72); }
/* tarefa longa: anel de carregando no lugar dos três pontos */
@keyframes mc-gira { to { transform: rotate(360deg); } }
.mascote--carregando .carregando { opacity: 1; animation: mc-gira 1s linear infinite; }
.mascote--carregando .pontos { opacity: 0 !important; }

@media (prefers-reduced-motion: reduce) {
  .mascote .mascote-cabeca, .mascote .olho, .mascote .pontos circle, .mascote .exclama, .mascote .antena, .mascote .mascote-svg, .mascote .carregando { animation: none !important; }
  .mascote--ola .mascote-cabeca { transform: rotate(-7deg); }
  .mascote .olhar, .mascote .olhos, .mascote .olho, .mascote .pupilas, .mascote .arcos, .mascote .sorriso, .mascote .pontos, .mascote .exclama { transition: none; }
}