/* ============================================================
   LUMI — mascote de Alumia · folha de estilo do componente
   Reutilizável em toda a plataforma Operids.
   Base de design: baby schema (Lorenz) + shape language + alto contraste.
   Depende de: lumi.js (injeta o rig SVG). Uso: ver index.html.

   PRINCÍPIOS DE ANIMAÇÃO (os que fazem um mascote parecer vivo):
   · antecipação — todo movimento grande começa com um contra-movimento
   · squash & stretch — o corpo deforma; corpo rígido lê como boneco
   · overshoot & settle — nada para no ponto exato, tudo assenta
   · motion secundário — antena e braços chegam DEPOIS do corpo (delay)
   · pausa — gesto em loop com pausa lê como intenção; sem pausa, metrônomo
   ============================================================ */

/* wrapper opcional que o create() aplica no container */
.lumi-wrap{ display:inline-flex; line-height:0; }

/* ---- raiz do SVG: guarda a cor (trocável) e o estado ---- */
.lumi{
  --corpo:#DCE0E8; --corpo-esc:#98A0B2;   /* traje cinza-tech + hardware — FIXO */
  --amarelo:#FDE047;   /* luz da ANTENA — pensamento/Faísca */
  --peito:#38BDF8;     /* luz do PEITO — núcleo de energia */
  --detalhe:#8B5CF6;   /* detalhe colorido (trocável) — colar + aro do peito */
  --olho:#241052;      /* olhos: roxo-tinta, o ponto mais escuro do rosto */
  --boca:#2B1155;      /* boca: quase a cor do olho, só um fio mais clara —
                          o suficiente pra não achatar tudo num borrão só */
  width:200px; height:auto; overflow:visible; display:block; isolation:isolate;
  filter:drop-shadow(0 5px 10px rgba(46,16,101,.20));
}

/* PIVÔ: o js embrulha cada camada num translate até o ponto de giro,
   então aqui a origem tem que ser o (0,0) local — nunca porcentagem. */
.lumi .lp{ transform-box:view-box; transform-origin:0 0; }

/* ---- variações de COR (modificadoras) ---- */
/* variações trocam só o DETALHE colorido (o traje continua branco) */
.lumi--roxo   { --detalhe:#8B5CF6; }
.lumi--dourado{ --detalhe:#FBBF24; }
.lumi--coral  { --detalhe:#FB7185; }
.lumi--menta  { --detalhe:#34D399; }
.lumi--azul   { --detalhe:#38BDF8; }
.lumi--laranja{ --detalhe:#FB923C; }

/* ---- preenchimentos ---- */
.lumi-corpo     { stroke:#9098A9; stroke-width:2; }   /* fill = gradiente (via atributo) */
.lumi-haste     { fill:none; stroke:var(--corpo-esc); stroke-width:7; stroke-linecap:round; }
.lumi-sombra    { fill:#3B0A6E; opacity:.16; }
.lumi-brilho    { fill:#fff; opacity:.4; }
.lumi-olho-bola { fill:var(--olho); }
.lumi-cat       { fill:#fff; }
.lumi-cat2      { fill:#fff; opacity:.85; }
/* rubor: multiply faz a cor "pintar" o volume da cabeça em vez de flutuar */
.lumi-blushes   { mix-blend-mode:multiply; opacity:.92; transition:opacity .4s; }
.lumi-lampada-bulb { fill:var(--amarelo); }
.lumi-lampada-glow { fill:var(--amarelo); opacity:.3; }
.lumi-lampada-hi   { fill:#FFFDE7; }
.lumi-housing      { fill:none; stroke:var(--corpo-esc); stroke-width:4; }
.lumi-nucleo       { fill:var(--peito); }
.lumi-nucleo-in    { fill:#DFF6FF; }
.lumi-anel-glow    { fill:var(--peito); opacity:.3; }
.lumi-orelha-out   { fill:var(--corpo-esc); }
.lumi-orelha-in    { fill:var(--peito); }
.lumi-colar        { fill:var(--detalhe); }
.lumi-mount        { fill:var(--corpo-esc); }
.lumi-aro          { fill:none; stroke:#fff; stroke-width:2.5; opacity:.35; }
.lumi-visor        { fill:none; stroke:var(--corpo-esc); stroke-width:3.5; stroke-linecap:round; opacity:.7; }

/* propulsores: hardware discreto embaixo do traje + jato curto de Faísca */
.lumi-prop-bocal   { fill:var(--corpo-esc); }
.lumi-prop-luz     { fill:#DFF6FF; opacity:.75; }
.lumi-jato-0       { stop-color:var(--peito); stop-opacity:.55; }
.lumi-jato-1       { stop-color:var(--peito); stop-opacity:.22; }
.lumi-jato-2       { stop-color:var(--peito); stop-opacity:0; }
.lumi-prop-jato    { transform-box:fill-box; transform-origin:center top;
                     animation:lumi-jato 1.4s ease-in-out infinite; }
.lumi-prop:nth-of-type(2) .lumi-prop-jato { animation-delay:-.7s; }

/* DECOLAGEM (só na comemoração): chama quente + fumaça no chão.
   Apagadas por padrão — se ficassem sempre ligadas, a comemoração
   perderia o impacto de "aconteceu algo agora". */
.lumi-prop-fogo  { opacity:0; transform-box:fill-box; transform-origin:center top; }
.lumi-fogo-nucleo{ fill:#FFFDF0; opacity:.92; }   /* miolo branco-quente */

/* mochila propulsora — só visível de costas, no meio da pirueta */
.lumi-mochila    { fill:var(--corpo-esc); stroke:#7A8296; stroke-width:2; }
.lumi-tanque     { stroke:#9098A9; stroke-width:2; }   /* fill = gradiente */
.lumi-mochila-luz{ fill:var(--peito); }
.lumi-mochila-led{ fill:var(--peito); opacity:.85; }
.lumi-costura    { fill:none; stroke:var(--corpo-esc); stroke-width:3; stroke-linecap:round; opacity:.4; }
.lumi-costas     { opacity:0; }   /* a nuca não existe até ele girar */
.lumi-puff       { fill:#BFB4D4; opacity:0; transform-box:fill-box; transform-origin:center; }
/* Faíscas: em Alumia pensamento claro vira luz, e elas voam como vaga-lume */
.lumi-faisca-p   { fill:#FFFBEB; opacity:0; transform-box:fill-box; transform-origin:center;
                   filter:drop-shadow(0 0 6px var(--amarelo)) drop-shadow(0 0 14px #FBBF24); }

/* sobrancelhas: só entram quando a emoção precisa delas.
   Num capacete elas leem como HUD/luz, não como pelo — por isso finas. */
.lumi-sobra-l { fill:none; stroke:#241052; stroke-width:5; stroke-linecap:round; }
.lumi-sobra   { opacity:0; transition:opacity .25s, transform .4s cubic-bezier(.34,1.4,.64,1); }

/* bocas: todas no mesmo lugar, o estado acende a certa */
.lumi-boca         { fill:none; stroke:var(--boca); stroke-width:5.5; stroke-linecap:round;
                     stroke-linejoin:round; opacity:0; transition:opacity .15s; }
.lumi-boca--grande { fill:var(--boca); stroke:none; }
.lumi-boca--sorrisao{ stroke-width:6; }
.lumi-boca--o      { fill:var(--boca); stroke:none; }
.lumi-olho-fechado { fill:none; stroke:var(--olho); stroke-width:5; stroke-linecap:round; opacity:0; }

/* ============================================================
   RIG — poses base de cada camada.
   Poses usam TRANSITION (assentam suave ao trocar de estado);
   gestos usam ANIMATION (têm ritmo próprio).
   ============================================================ */
.lumi-flutua   { animation:lumi-bob 3.2s ease-in-out infinite; }
.lumi-acao     { transition:transform .5s cubic-bezier(.34,1.4,.64,1); }
.lumi-giro     { transition:transform .5s cubic-bezier(.34,1.4,.64,1); }
.lumi-corpo-g  { transition:transform .45s cubic-bezier(.34,1.4,.64,1); }
.lumi-cabeca   { transition:transform .5s cubic-bezier(.34,1.5,.64,1); }
.lumi-braco    { transition:transform .45s cubic-bezier(.34,1.5,.64,1); }
.lumi-olho-pisca{ animation:lumi-piscar 4.6s infinite; }
.lumi-olho-esc { transition:transform .3s ease; }
.lumi-pupilas  { transition:transform .32s cubic-bezier(.34,1.4,.64,1); }
.lumi-antena   { animation:lumi-balanca 3.5s ease-in-out infinite; transition:transform .5s cubic-bezier(.34,1.5,.64,1); }
.lumi-faisca   { animation:lumi-brilha 1.8s ease-in-out infinite; }
.lumi-sombra-g { transition:transform .4s ease; }

/* olhar avulso (data-olhar) — não troca a emoção, só a direção do olhar */
.lumi[data-olhar="esquerda"] .lumi-pupilas { transform:translate(-7px,0); }
.lumi[data-olhar="direita"]  .lumi-pupilas { transform:translate(7px,0); }
.lumi[data-olhar="cima"]     .lumi-pupilas { transform:translate(0,-7px); }
.lumi[data-olhar="baixo"]    .lumi-pupilas { transform:translate(0,6px); }

/* ============================================================
   BOCAS POR ESTADO
   ============================================================ */
.lumi[data-estado="dormindo"]  .lumi-boca--sorriso,
.lumi[data-estado="neutro"]    .lumi-boca--sorriso,
.lumi[data-estado="ritual"]    .lumi-boca--sorriso,
.lumi[data-estado="esperando"] .lumi-boca--sorriso,
.lumi[data-estado="acenando"]  .lumi-boca--sorriso,
.lumi[data-estado="apontando"] .lumi-boca--sorriso,
.lumi[data-estado="tchau"]     .lumi-boca--sorriso,
.lumi[data-estado="entendi"]   .lumi-boca--grande,
.lumi[data-estado="comemora"]  .lumi-boca--grande,
.lumi[data-estado="dourada"]   .lumi-boca--grande,
.lumi[data-estado="literal"]   .lumi-boca--grande,
.lumi[data-estado="orgulhoso"] .lumi-boca--sorrisao,
.lumi[data-estado="confuso"]   .lumi-boca--onda,
.lumi[data-estado="pensando"]  .lumi-boca--pequena,
.lumi[data-estado="executando"].lumi-boca--pequena,
.lumi[data-estado="ops"]       .lumi-boca--pequena,
.lumi[data-estado="curioso"]   .lumi-boca--o,
.lumi[data-estado="falando"]   .lumi-boca--o { opacity:1; }

/* ============================================================
   ESTADOS
   ============================================================ */

/* ---- DORMINDO: pousado, sem propulsão, tudo em modo baixo ---- */
.lumi[data-estado="dormindo"] .lumi-olho        { opacity:0; }
.lumi[data-estado="dormindo"] .lumi-olho-fechado{ opacity:1; }
.lumi[data-estado="dormindo"] .lumi-flutua      { animation:lumi-respira 4s ease-in-out infinite; }
.lumi[data-estado="dormindo"] .lumi-antena      { animation:none; transform:rotate(24deg); }
.lumi[data-estado="dormindo"] .lumi-lampada     { filter:saturate(.15) brightness(.6); }
.lumi[data-estado="dormindo"] .lumi-faisca      { animation:none; opacity:.22; }
.lumi[data-estado="dormindo"] .lumi-prop-jato   { animation:none; opacity:0; }
.lumi[data-estado="dormindo"] .lumi-prop-luz    { opacity:.15; }

/* ---- NEUTRO: só o rig base. Nada a declarar — é o estado de repouso. ---- */

/* ---- ACENANDO: braço direito acena, cabeça inclina no contrapé ---- */
.lumi[data-estado="acenando"] .lumi-cabeca     { transform:rotate(-6deg); }
.lumi[data-estado="acenando"] .lumi-braco--d   { animation:lumi-acena 1s ease-in-out infinite; }
.lumi[data-estado="acenando"] .lumi-braco--e   { transform:rotate(-8deg); }
.lumi[data-estado="acenando"] .lumi-olho-esc   { transform:scaleY(.86); }

/* ---- FALANDO: boca abre/fecha em ritmo irregular + acenos de cabeça ----
   O ritmo quebrado é de propósito: boca em compasso fixo lê como robô. */
.lumi[data-estado="falando"] .lumi-boca-o-g   { animation:lumi-fala .62s ease-in-out infinite; }
.lumi[data-estado="falando"] .lumi-cabeca     { animation:lumi-conversa 2.1s ease-in-out infinite; }
.lumi[data-estado="falando"] .lumi-braco--e   { animation:lumi-gesticula 2.1s ease-in-out infinite; }
.lumi[data-estado="falando"] .lumi-antena     { animation:lumi-balanca 2.1s ease-in-out infinite; }

/* ---- RITUAL: "Respira. Olha. Pensa. Zum!" ----
   O feitiço ensinável da bíblia, em 4 tempos iguais, em loop, para a
   criança acompanhar COM O CORPO. É o único comportamento aqui feito
   para ser imitado — por isso os tempos são longos e bem separados:
   1) Respira  — enche o peito, olhos fechados
   2) Olha     — abre os olhos e varre a cena
   3) Pensa    — olhar pra cima, antena carregando
   4) Zum!     — estoura, pulinho, antena no talo                        */
.lumi[data-estado="ritual"] .lumi-corpo-g   { animation:lumi-ritual-peito 4.4s ease-in-out infinite; }
.lumi[data-estado="ritual"] .lumi-acao      { animation:lumi-ritual-corpo 4.4s ease-in-out infinite; }
.lumi[data-estado="ritual"] .lumi-cabeca    { animation:lumi-ritual-cabeca 4.4s ease-in-out infinite; }
.lumi[data-estado="ritual"] .lumi-pupilas   { animation:lumi-ritual-olhar 4.4s ease-in-out infinite; }
.lumi[data-estado="ritual"] .lumi-olho      { animation:lumi-ritual-abre 4.4s ease-in-out infinite; }
.lumi[data-estado="ritual"] .lumi-olho-fechado{ animation:lumi-ritual-fecha 4.4s ease-in-out infinite; }
.lumi[data-estado="ritual"] .lumi-olho-pisca{ animation:none; }
.lumi[data-estado="ritual"] .lumi-antena    { animation:lumi-ritual-antena 4.4s ease-in-out infinite; }
.lumi[data-estado="ritual"] .lumi-lampada   { animation:lumi-ritual-lampada 4.4s ease-in-out infinite; }
.lumi[data-estado="ritual"] .lumi-braco     { animation:lumi-ritual-bracos 4.4s ease-in-out infinite; }

/* ---- EXECUTANDO: "Diz que eu faço!" — ele é o executor ----
   Entre "esperando instrução" e "entendi" faltava o FAZENDO. Braços em
   contratempo (um sobe enquanto o outro desce) e antena vibrando curto:
   ocupado, não agitado.                                                 */
.lumi[data-estado="executando"] .lumi-acao     { animation:lumi-trabalha 0.62s ease-in-out infinite; }
.lumi[data-estado="executando"] .lumi-braco--e { animation:lumi-maos 0.62s ease-in-out infinite; }
.lumi[data-estado="executando"] .lumi-braco--d { animation:lumi-maos 0.62s ease-in-out infinite reverse; }
.lumi[data-estado="executando"] .lumi-cabeca   { transform:rotate(4deg) translateY(2px); }
.lumi[data-estado="executando"] .lumi-pupilas  { transform:translate(0,5px); }
.lumi[data-estado="executando"] .lumi-olho-esc { transform:scaleY(.86); }
.lumi[data-estado="executando"] .lumi-antena   { animation:lumi-foco .28s ease-in-out infinite; }
.lumi[data-estado="executando"] .lumi-faisca   { animation:lumi-brilha .7s ease-in-out infinite; }
.lumi[data-estado="executando"] .lumi-sobra    { opacity:1; transform:translateY(2px); }

/* ---- LITERAL: faz AO PÉ DA LETRA o que foi mal pedido ----
   Traço fixo nº2 da bíblia e o motor de comédia da marca. O segredo é
   que ele NÃO parece confuso: antena reta e acesa, sorrisão, marcha
   decidida. A graça mora na certeza absoluta de quem está fazendo a
   coisa errada — e é isso que ensina a criança a pedir com clareza.    */
.lumi[data-estado="literal"] .lumi-acao      { animation:lumi-marcha .78s ease-in-out infinite; }
.lumi[data-estado="literal"] .lumi-corpo-g   { animation:lumi-marcha-corpo .78s ease-in-out infinite; }
.lumi[data-estado="literal"] .lumi-cabeca    { animation:lumi-marcha-cabeca .78s ease-in-out infinite; }
.lumi[data-estado="literal"] .lumi-braco--e  { animation:lumi-marcha-braco .78s ease-in-out infinite; }
.lumi[data-estado="literal"] .lumi-braco--d  { animation:lumi-marcha-braco .78s ease-in-out infinite reverse; }
.lumi[data-estado="literal"] .lumi-antena    { animation:none; transform:rotate(0) scaleY(1.14); }
.lumi[data-estado="literal"] .lumi-lampada   { filter:brightness(1.4) drop-shadow(0 0 12px var(--amarelo)); }
.lumi[data-estado="literal"] .lumi-olho-esc  { transform:scale(1.06); }
.lumi[data-estado="literal"] .lumi-sobra     { opacity:1; transform:translateY(-6px); }
.lumi[data-estado="literal"] .lumi-prop-jato { animation:lumi-jato .5s ease-in-out infinite; }

/* ============================================================
   AÇÕES — o que a criança MANDA ele fazer.
   Não são emoções: são o repertório de comandos do brinquedo.
   ============================================================ */

/* PULANDO: mesmo peso do 'entendi' (antecipação → squash), sem a
   leitura de "compreendi" — aqui é só alegria de pular. */
.lumi[data-estado="pulando"] .lumi-acao    { animation:lumi-pulo .9s cubic-bezier(.3,.7,.4,1) both; }
.lumi[data-estado="pulando"] .lumi-corpo-g { animation:lumi-squash .9s ease-out both; }
.lumi[data-estado="pulando"] .lumi-cabeca  { animation:lumi-cabeca-pulo .9s ease-out both; }
.lumi[data-estado="pulando"] .lumi-antena  { animation:lumi-chicote .9s cubic-bezier(.3,.8,.4,1.2) .07s both; }
.lumi[data-estado="pulando"] .lumi-braco   { animation:lumi-bracos-cima .9s ease-out .05s both; }
.lumi[data-estado="pulando"] .lumi-sombra-g{ animation:lumi-sombra-pulo .9s ease-out both; }
.lumi[data-estado="pulando"] .lumi-olho-esc{ animation:lumi-olhos-alegria .9s ease-out both; }
.lumi[data-estado="pulando"] .lumi-prop-jato{ animation:lumi-jato-forte .45s ease-in-out infinite; }

/* RODOPIANDO: ele orbita PELO ESPAÇO em vez de girar no próprio eixo.
   Num desenho chapado, girar em torno de si mesmo não existe — mas
   voar em círculo existe, e para uma criança lê como rodopio igual.
   É o mesmo problema do parafuso, resolvido pela via que funciona. */
.lumi[data-estado="rodopiando"] .lumi-acao     { animation:lumi-rodopio .95s ease-in-out both; }
.lumi[data-estado="rodopiando"] .lumi-giro     { animation:lumi-rodopio-tilt .95s ease-in-out both; }
.lumi[data-estado="rodopiando"] .lumi-cabeca   { animation:lumi-rodopio-cabeca .95s ease-in-out both; }
.lumi[data-estado="rodopiando"] .lumi-braco    { animation:lumi-bracos-abre .95s ease-in-out both; }
.lumi[data-estado="rodopiando"] .lumi-sombra-g { animation:lumi-sombra-pulo .95s ease-out both; }
.lumi[data-estado="rodopiando"] .lumi-olho-esc { transform:scaleY(.7); }
.lumi[data-estado="rodopiando"] .lumi-prop-jato{ animation:lumi-jato-forte .3s ease-in-out infinite; }

/* DANÇANDO: gingado lateral com a cabeça em contratempo. O contratempo
   é o que separa "dançar" de "balançar": corpo pra um lado, cabeça pro
   outro. */
.lumi[data-estado="dancando"] .lumi-acao    { animation:lumi-danca 1.15s ease-in-out infinite; }
.lumi[data-estado="dancando"] .lumi-corpo-g { animation:lumi-danca-corpo 1.15s ease-in-out infinite; }
.lumi[data-estado="dancando"] .lumi-cabeca  { animation:lumi-danca-cabeca 1.15s ease-in-out infinite; }
.lumi[data-estado="dancando"] .lumi-braco--e{ animation:lumi-danca-braco 1.15s ease-in-out infinite; }
.lumi[data-estado="dancando"] .lumi-braco--d{ animation:lumi-danca-braco 1.15s ease-in-out infinite reverse; }
.lumi[data-estado="dancando"] .lumi-antena  { animation:lumi-balanca 1.15s ease-in-out infinite; }
.lumi[data-estado="dancando"] .lumi-olho-esc{ transform:scaleY(.7); }

/* ZUM: a assinatura da marca. Curto, seco, muita luz. */
.lumi[data-estado="zum"] .lumi-acao      { animation:lumi-zum .62s cubic-bezier(.3,.8,.4,1.3) both; }
.lumi[data-estado="zum"] .lumi-corpo-g   { animation:lumi-zum-corpo .62s ease-out both; }
.lumi[data-estado="zum"] .lumi-antena    { animation:lumi-chicote .62s cubic-bezier(.3,.8,.4,1.2) .04s both; }
.lumi[data-estado="zum"] .lumi-lampada   { animation:lumi-flash .3s ease 2; }
.lumi[data-estado="zum"] .lumi-braco     { animation:lumi-bracos-cima .62s ease-out .04s both; }
.lumi[data-estado="zum"] .lumi-olho-esc  { animation:lumi-olhos-alegria .62s ease-out both; }
.lumi[data-estado="zum"] .lumi-faisca-p  { animation:lumi-voa-faisca .9s ease-out both; }
.lumi[data-estado="zum"] .lumi-prop-jato { animation:lumi-jato-forte .3s ease-in-out infinite; }

/* ---- ESPERANDO: inclina PARA a criança, varre a tela com o olhar ----
   O ciclo tem pausa longa e um cutucão no fim: convida sem apressar. */
.lumi[data-estado="esperando"] .lumi-acao      { animation:lumi-espera 3.6s ease-in-out infinite; }
.lumi[data-estado="esperando"] .lumi-cabeca    { animation:lumi-espera-cabeca 3.6s ease-in-out infinite; }
.lumi[data-estado="esperando"] .lumi-pupilas   { animation:lumi-varredura 3.6s ease-in-out infinite; }
.lumi[data-estado="esperando"] .lumi-lampada   { animation:lumi-pulsa 1s ease-in-out infinite; }
.lumi[data-estado="esperando"] .lumi-sobra     { opacity:1; transform:translateY(-4px); }

/* ---- PENSANDO: olha pra cima, antena varre como radar ---- */
.lumi[data-estado="pensando"] .lumi-cabeca     { transform:rotate(-9deg); }
.lumi[data-estado="pensando"] .lumi-pupilas    { animation:lumi-pensa-olhos 3s ease-in-out infinite; }
.lumi[data-estado="pensando"] .lumi-antena     { animation:lumi-radar 2.6s ease-in-out infinite; }
.lumi[data-estado="pensando"] .lumi-lampada    { animation:lumi-processa 1.3s ease-in-out infinite; }
.lumi[data-estado="pensando"] .lumi-faisca     { animation:lumi-brilha .8s ease-in-out infinite; }
.lumi[data-estado="pensando"] .lumi-olho-esc   { transform:scaleY(.88); }
.lumi[data-estado="pensando"] .lumi-sobra--e   { opacity:1; transform:translateY(-5px) rotate(-9deg); }
.lumi[data-estado="pensando"] .lumi-sobra--d   { opacity:1; transform:translateY(2px) rotate(6deg); }
.lumi[data-estado="pensando"] .lumi-braco--e   { transform:rotate(14deg); }
.lumi[data-estado="pensando"] .lumi-braco--d   { transform:rotate(-14deg); }

/* ---- CURIOSO: chega mais perto, olhos crescem, cabeça tomba ----
   Aproximar + aumentar o olho é o truque mais barato e mais eficaz
   de "interesse" que existe em animação de personagem. */
.lumi[data-estado="curioso"] .lumi-acao        { transform:scale(1.05) translateY(-4px); }
.lumi[data-estado="curioso"] .lumi-cabeca      { transform:rotate(13deg); }
.lumi[data-estado="curioso"] .lumi-olho-esc    { transform:scale(1.13); }
.lumi[data-estado="curioso"] .lumi-antena      { animation:none; transform:rotate(-14deg); }
.lumi[data-estado="curioso"] .lumi-olho-pisca  { animation:lumi-piscar 6s infinite; }
.lumi[data-estado="curioso"] .lumi-sobra       { opacity:1; transform:translateY(-6px); }
.lumi[data-estado="curioso"] .lumi-boca-o-g    { transform:scale(.7); }

/* ---- APONTANDO: braço estende e insiste, o olhar segue a mão ----
   A cabeça acompanha o braço: apontar sem olhar não convence ninguém. */
.lumi[data-estado="apontando"] .lumi-braco--d  { animation:lumi-aponta 1.6s ease-in-out infinite; }
.lumi[data-estado="apontando"] .lumi-braco--e  { transform:rotate(12deg); }
.lumi[data-estado="apontando"] .lumi-cabeca    { transform:rotate(-7deg); }
.lumi[data-estado="apontando"] .lumi-pupilas   { transform:translate(7px,-2px); }
.lumi[data-estado="apontando"] .lumi-acao      { transform:translateX(-5px); }
.lumi[data-estado="apontando"] .lumi-lampada   { animation:lumi-pulsa 1.6s ease-in-out infinite; }

/* ---- ENTENDI: agacha, dispara, aterrissa amassando ----
   Cada camada tem sua curva: o corpo deforma, a cabeça atrasa,
   a antena chega por último. É a soma disso que lê como peso. */
.lumi[data-estado="entendi"] .lumi-acao        { animation:lumi-pulo .9s cubic-bezier(.3,.7,.4,1) both; }
.lumi[data-estado="entendi"] .lumi-corpo-g     { animation:lumi-squash .9s ease-out both; }
.lumi[data-estado="entendi"] .lumi-cabeca      { animation:lumi-cabeca-pulo .9s ease-out both; }
.lumi[data-estado="entendi"] .lumi-antena      { animation:lumi-chicote .9s cubic-bezier(.3,.8,.4,1.2) .07s both; }
.lumi[data-estado="entendi"] .lumi-braco       { animation:lumi-bracos-cima .9s ease-out .05s both; }
.lumi[data-estado="entendi"] .lumi-sombra-g    { animation:lumi-sombra-pulo .9s ease-out both; }
.lumi[data-estado="entendi"] .lumi-lampada     { animation:lumi-flash .45s ease 2; }
.lumi[data-estado="entendi"] .lumi-olho-esc    { animation:lumi-olhos-alegria .9s ease-out both; }
.lumi[data-estado="entendi"] .lumi-boca-g      { animation:lumi-boca-pulo .9s ease-out both; }

/* ---- COMEMORA: pulo alto + parafuso, com segundo pulinho no fim ----
   O segundo pulinho é o "settle": sem ele o giro termina seco. */
.lumi[data-estado="comemora"] .lumi-acao       { animation:lumi-festa 1.5s cubic-bezier(.3,.7,.4,1) both; }
/* SEM giro. Tentamos pirueta em Y via scaleX e o resultado lê como
   "afinou", não como girou: comprimir um desenho chapado comprime tudo
   por igual, enquanto numa virada real o lado próximo cresce, o distante
   encolhe e os traços deslizam pela curva. Isso só sai com poses
   DESENHADAS (3/4, perfil) ou com 3D de verdade — não com transform.
   O que faz a comemoração funcionar é peso e foguete, não rotação. */
.lumi[data-estado="comemora"] .lumi-giro       { animation:lumi-inclina 1.5s ease-in-out both; }
.lumi[data-estado="comemora"] .lumi-corpo-g    { animation:lumi-squash-festa 1.5s ease-out both; }
.lumi[data-estado="comemora"] .lumi-cabeca     { animation:lumi-cabeca-festa 1.5s ease-out both; }
.lumi[data-estado="comemora"] .lumi-braco      { animation:lumi-bracos-festa 1.5s ease-out .06s both; }
.lumi[data-estado="comemora"] .lumi-antena     { animation:lumi-chicote 1.5s cubic-bezier(.3,.8,.4,1.2) .09s both; }
.lumi[data-estado="comemora"] .lumi-sombra-g   { animation:lumi-sombra-festa 1.5s ease-out both; }
.lumi[data-estado="comemora"] .lumi-lampada    { animation:lumi-flash .3s ease 5; }
.lumi[data-estado="comemora"] .lumi-olho-esc   { animation:lumi-olhos-alegria 1.5s ease-out both; }
.lumi[data-estado="comemora"] .lumi-boca-g     { animation:lumi-boca-festa 1.5s ease-out both; }
.lumi[data-estado="comemora"] .lumi-blushes    { opacity:1; }
/* a decolagem: chama nos dois bocais + estouro de fumaça no chão */
.lumi[data-estado="comemora"] .lumi-prop-fogo  { animation:lumi-fogo 1.5s ease-out both; }
.lumi[data-estado="comemora"] .lumi-prop:nth-of-type(2) .lumi-prop-fogo { animation-delay:.04s; }
.lumi[data-estado="comemora"] .lumi-puff       { animation:lumi-fumaca 1.5s ease-out both; }

/* ---- DOURADA: acertou DEPOIS de errar ----
   Regra 5 do mundo: "erro ajustado vale mais — acende uma Faísca Dourada,
   a mais forte que existe". Então esta comemoração tem que ser
   VISIVELMENTE maior que a comum, senão a regra é só texto na bíblia.
   Mesma coreografia do 'comemora', mas tudo vira ouro (inclusive o
   núcleo do peito e os jatos, via --peito) e nascem Faíscas voando.    */
.lumi[data-estado="dourada"]{ --peito:#FBBF24; }
.lumi[data-estado="dourada"] .lumi-acao       { animation:lumi-festa 2s cubic-bezier(.3,.7,.4,1) both; }
.lumi[data-estado="dourada"] .lumi-corpo-g    { animation:lumi-squash-festa 2s ease-out both; }
.lumi[data-estado="dourada"] .lumi-cabeca     { animation:lumi-cabeca-festa 2s ease-out both; }
.lumi[data-estado="dourada"] .lumi-braco      { animation:lumi-bracos-festa 2s ease-out .06s both; }
.lumi[data-estado="dourada"] .lumi-antena     { animation:lumi-chicote 2s cubic-bezier(.3,.8,.4,1.2) .09s both; }
.lumi[data-estado="dourada"] .lumi-giro       { animation:lumi-inclina 2s ease-in-out both; }
.lumi[data-estado="dourada"] .lumi-sombra-g   { animation:lumi-sombra-festa 2s ease-out both; }
.lumi[data-estado="dourada"] .lumi-olho-esc   { animation:lumi-olhos-alegria 2s ease-out both; }
.lumi[data-estado="dourada"] .lumi-boca-g     { animation:lumi-boca-festa 2s ease-out both; }
.lumi[data-estado="dourada"] .lumi-prop-fogo  { animation:lumi-fogo 2s ease-out both; }
.lumi[data-estado="dourada"] .lumi-prop-jato  { animation:lumi-jato-forte .45s ease-in-out infinite; }
.lumi[data-estado="dourada"] .lumi-puff       { animation:lumi-fumaca 2s ease-out both; }
.lumi[data-estado="dourada"] .lumi-faisca-p   { animation:lumi-voa-faisca 2s ease-out both; }
.lumi[data-estado="dourada"] .lumi-lampada    { animation:lumi-flash .3s ease 7; }
.lumi[data-estado="dourada"] .lumi-blushes    { opacity:1; }

/* ---- ORGULHOSO: peito estufado, braços na cintura, queixo erguido ---- */
.lumi[data-estado="orgulhoso"] .lumi-corpo-g   { animation:lumi-peito 2.4s ease-in-out infinite; }
.lumi[data-estado="orgulhoso"] .lumi-cabeca    { transform:rotate(0) translateY(-4px); }
.lumi[data-estado="orgulhoso"] .lumi-braco--e  { transform:rotate(38deg) translateY(-6px); }
.lumi[data-estado="orgulhoso"] .lumi-braco--d  { transform:rotate(-38deg) translateY(-6px); }
.lumi[data-estado="orgulhoso"] .lumi-olho-esc  { transform:scaleY(.62); }
.lumi[data-estado="orgulhoso"] .lumi-sobra     { opacity:1; transform:translateY(-5px); }
.lumi[data-estado="orgulhoso"] .lumi-lampada   { filter:brightness(1.35) drop-shadow(0 0 10px var(--amarelo)); }
.lumi[data-estado="orgulhoso"] .lumi-flutua    { animation:lumi-bob 2.6s ease-in-out infinite; }
.lumi[data-estado="orgulhoso"] .lumi-blushes   { opacity:1; }

/* ---- CONFUSO: tomba a cabeça, PARA pra pensar, tomba pro outro lado ----
   A pausa entre os dois lados é o que transforma balanço em dúvida.
   Nunca triste: ombros sobem (dar de ombros), não descem. */
.lumi[data-estado="confuso"] .lumi-cabeca      { animation:lumi-duvida 2.8s ease-in-out infinite; }
.lumi[data-estado="confuso"] .lumi-pupilas     { animation:lumi-duvida-olhos 2.8s ease-in-out infinite; }
.lumi[data-estado="confuso"] .lumi-braco       { animation:lumi-ombros 2.8s ease-in-out infinite; }
.lumi[data-estado="confuso"] .lumi-antena      { animation:lumi-antena-murcha 2.8s ease-in-out infinite; }
.lumi[data-estado="confuso"] .lumi-lampada     { filter:saturate(.25) brightness(.65); }
.lumi[data-estado="confuso"] .lumi-olho-pisca  { animation:lumi-piscar 3s infinite; }
.lumi[data-estado="confuso"] .lumi-sobra--e    { opacity:1; transform:translateY(-6px) rotate(-12deg); }
.lumi[data-estado="confuso"] .lumi-sobra--d    { opacity:1; transform:translateY(1px) rotate(8deg); }

/* ---- OPS: encolhe e afunda um pouco, olha pra baixo, se recompõe ----
   Rubor mais forte + antena que TORNA a levantar: erro sem punição. */
.lumi[data-estado="ops"] .lumi-acao            { animation:lumi-encolhe 1.3s ease-out both; }
.lumi[data-estado="ops"] .lumi-cabeca          { animation:lumi-cabeca-baixa 1.3s ease-out both; }
.lumi[data-estado="ops"] .lumi-antena          { animation:lumi-antena-ops 1.3s ease-out both; }
.lumi[data-estado="ops"] .lumi-pupilas         { transform:translate(0,7px); }
.lumi[data-estado="ops"] .lumi-olho-esc        { transform:scaleY(.8); }
.lumi[data-estado="ops"] .lumi-braco--e        { transform:rotate(-16deg); }
.lumi[data-estado="ops"] .lumi-braco--d        { transform:rotate(16deg); }
.lumi[data-estado="ops"] .lumi-lampada         { filter:saturate(.3) brightness(.7); }
.lumi[data-estado="ops"] .lumi-blushes         { opacity:1; }
/* pontas INTERNAS erguidas = constrangimento. Invertido vira bravo —
   e o Lumi nunca fica bravo com a criança. */
.lumi[data-estado="ops"] .lumi-sobra--e        { opacity:1; transform:translateY(3px) rotate(-11deg); }
.lumi[data-estado="ops"] .lumi-sobra--d        { opacity:1; transform:translateY(3px) rotate(11deg); }

/* ---- TCHAU: acena, VIRA DE COSTAS e vai embora subindo ----
   Aqui a vista de costas entra sem truque nenhum de rotação: quem vai
   embora naturalmente mostra as costas. A troca é uma dissolvência
   curta, feita enquanto ele já está pequeno e subindo rápido — que é
   quando o olho não consegue cobrar os quadros intermediários. */
.lumi[data-estado="tchau"] .lumi-acao          { animation:lumi-partida 2.6s ease-in both; }
.lumi[data-estado="tchau"] .lumi-braco--d      { animation:lumi-acena .8s ease-in-out infinite; }
.lumi[data-estado="tchau"] .lumi-cabeca        { transform:rotate(-5deg); }
.lumi[data-estado="tchau"] .lumi-olho-esc      { transform:scaleY(.8); }
.lumi[data-estado="tchau"] .lumi-sombra-g      { animation:lumi-sombra-partida 2.6s ease-in both; }
.lumi[data-estado="tchau"] .lumi-frente        { animation:lumi-vira-frente 2.6s ease-in-out both; }
.lumi[data-estado="tchau"] .lumi-costas        { animation:lumi-vira-costas 2.6s ease-in-out both; }
.lumi[data-estado="tchau"] .lumi-prop-fogo     { animation:lumi-fogo-partida 2.6s ease-in both; }
.lumi[data-estado="tchau"] .lumi-prop-jato     { animation:lumi-jato-forte .5s ease-in-out infinite; }

/* propulsores reagem ao empuxo pedido pelo gesto */
.lumi[data-estado="entendi"]  .lumi-prop-jato,
.lumi[data-estado="comemora"] .lumi-prop-jato { animation:lumi-jato-forte .45s ease-in-out infinite; }
.lumi[data-estado="ops"]      .lumi-prop-jato { animation:none; opacity:.35; }

/* ============================================================
   VIDA — micro-comportamentos no ocioso (data-micro, via JS)
   Rodam só no neutro, em intervalos irregulares. É o que impede
   o loop base de virar papel de parede.
   ============================================================ */
.lumi[data-micro="olhar"] .lumi-pupilas       { animation:lumi-micro-olhar 2.2s ease-in-out; }
.lumi[data-micro="olhar"] .lumi-cabeca        { animation:lumi-micro-olhar-cabeca 2.2s ease-in-out; }
.lumi[data-micro="tiltinho"] .lumi-cabeca     { animation:lumi-micro-tilt 2.2s cubic-bezier(.34,1.5,.64,1); }
.lumi[data-micro="tiltinho"] .lumi-antena     { animation:lumi-micro-antena 2.2s cubic-bezier(.34,1.5,.64,1); }
.lumi[data-micro="piscada-dupla"] .lumi-olho-pisca { animation:lumi-piscar-duplo 2.2s ease-in-out; }
.lumi[data-micro="suspiro"] .lumi-corpo-g     { animation:lumi-micro-suspiro 2.2s ease-in-out; }
.lumi[data-micro="suspiro"] .lumi-flutua      { animation:lumi-bob 3.2s ease-in-out infinite, lumi-micro-sobe 2.2s ease-in-out; }

/* ============================================================
   KEYFRAMES
   ============================================================ */

/* --- base / idle --- */
@keyframes lumi-bob    { 0%,100%{ transform:translateY(0) rotate(0); } 50%{ transform:translateY(-9px) rotate(-1.5deg); } }
@keyframes lumi-respira{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.02); } }
@keyframes lumi-piscar { 0%,93%,100%{ transform:scaleY(1); } 96%{ transform:scaleY(.08); } }
@keyframes lumi-piscar-duplo{ 0%,18%,30%,42%,100%{ transform:scaleY(1); } 24%,36%{ transform:scaleY(.08); } }
@keyframes lumi-balanca{ 0%,100%{ transform:rotate(-8deg); } 50%{ transform:rotate(8deg); } }
@keyframes lumi-brilha { 0%,100%{ transform:scale(.82); opacity:.7; } 50%{ transform:scale(1.06); opacity:1; } }
@keyframes lumi-pulsa  { 0%,100%{ opacity:.5; transform:scale(.9); } 50%{ opacity:1; transform:scale(1.18); } }
@keyframes lumi-flash  { 0%,100%{ filter:none; } 50%{ filter:brightness(1.8) drop-shadow(0 0 14px var(--amarelo)); } }
@keyframes lumi-jato   { 0%,100%{ transform:scaleY(.82) scaleX(.95); opacity:.75; } 50%{ transform:scaleY(1.12) scaleX(1.05); opacity:1; } }
@keyframes lumi-jato-forte{ 0%,100%{ transform:scaleY(1.15); opacity:.9; } 50%{ transform:scaleY(1.75) scaleX(1.1); opacity:1; } }

/* --- ENTENDI: pulo com peso --- */
@keyframes lumi-pulo {
  0%  { transform:translateY(0); }
  11% { transform:translateY(7px); }     /* antecipação: agacha */
  24% { transform:translateY(-16px); }
  44% { transform:translateY(-42px); }   /* ápice */
  56% { transform:translateY(-38px); }   /* flutua no topo (hang) */
  76% { transform:translateY(0); }       /* pouso */
  86% { transform:translateY(5px); }     /* absorve o impacto */
  94% { transform:translateY(-2px); }
  100%{ transform:translateY(0); }
}
/* Extremos contidos de propósito: passando de ~10% o traje vira borracha
   e o Lumi deixa de parecer um robô de casco rígido. */
@keyframes lumi-squash {
  0%,100%{ transform:scale(1,1); }
  11% { transform:scale(1.07,.91); }     /* amassa antes de subir */
  30% { transform:scale(.93,1.10); }     /* estica na subida */
  56% { transform:scale(1,1); }
  78% { transform:scale(1.10,.89); }     /* amassa no pouso */
  90% { transform:scale(.98,1.03); }
}
/* A cabeça ACOMPANHA o squash do corpo (translateY casado com o scaleY de
   lumi-squash), senão o corpo amassa, o topo dele desce e a cabeça fica
   boiando com o colar aparecendo por trás. Como bônus é o beat certo:
   na aterrissagem a cabeça afunda nos ombros. A rotação é o atraso. */
@keyframes lumi-cabeca-pulo {
  0%,100%{ transform:rotate(0) translateY(0); }
  11% { transform:rotate(-2deg) translateY(8.6px); }
  30% { transform:rotate(-4deg) translateY(-9.6px); }
  56% { transform:rotate(3deg) translateY(0); }
  78% { transform:rotate(-2deg) translateY(10.6px); }   /* afunda nos ombros */
  90% { transform:rotate(2deg) translateY(-2.9px); }
}
@keyframes lumi-cabeca-festa {
  0%,100%{ transform:rotate(0) translateY(0); }
  9%  { transform:rotate(-2deg) translateY(11.5px); }
  26% { transform:rotate(-5deg) translateY(-11.5px); }
  60% { transform:rotate(2deg) translateY(0); }
  82% { transform:rotate(-3deg) translateY(11.5px); }
  93% { transform:rotate(2deg) translateY(-4.8px); }
}
@keyframes lumi-chicote {
  0%  { transform:rotate(0); }
  20% { transform:rotate(19deg); }       /* fica pra trás na largada */
  45% { transform:rotate(-15deg); }
  65% { transform:rotate(9deg); }
  82% { transform:rotate(-5deg); }
  100%{ transform:rotate(0); }
}

/* O rosto tem que ACOMPANHAR o gesto. Squint fixo durante um pulo é o
   que mais denuncia animação de CSS: o corpo age, a cara fica parada. */
@keyframes lumi-olhos-alegria {
  0%  { transform:scaleY(1); }
  12% { transform:scaleY(1.12); }   /* arregala na antecipação */
  34% { transform:scaleY(.62); }    /* fecha de alegria na subida */
  74% { transform:scaleY(.58); }
  86% { transform:scaleY(.72); }    /* alivia no impacto */
  100%{ transform:scaleY(.64); }
}
@keyframes lumi-boca-pulo {
  0%  { transform:scale(.45,.35); }   /* a boca ABRE junto com o salto */
  22% { transform:scale(1.08,1.12); }
  50% { transform:scale(1,1); }
  80% { transform:scale(1.14,.82); }  /* achata no impacto do pouso */
  92% { transform:scale(.97,1.05); }
  100%{ transform:scale(1,1); }
}
@keyframes lumi-boca-festa {
  0%  { transform:scale(.4,.3); }
  18% { transform:scale(1.12,1.16); }
  60% { transform:scale(1,1); }
  84% { transform:scale(1.16,.8); }
  94% { transform:scale(.96,1.06); }
  100%{ transform:scale(1,1); }
}
@keyframes lumi-bracos-cima {
  0%,100%{ transform:rotate(0); }
  35% { transform:rotate(-26deg) translateY(-5px); }
  70% { transform:rotate(10deg); }
}
@keyframes lumi-sombra-pulo {
  0%,100%{ transform:scale(1); opacity:1; }
  44% { transform:scale(.62); opacity:.5; }   /* longe do chão = sombra pequena */
  78% { transform:scale(1.12); }
}

/* --- COMEMORA: pulo + parafuso + settle --- */
@keyframes lumi-festa {
  0%  { transform:translateY(0); }
  9%  { transform:translateY(9px); }         /* antecipação */
  26% { transform:translateY(-48px); }
  48% { transform:translateY(-56px); }       /* ápice: é aqui que ele roda */
  68% { transform:translateY(-26px); }
  80% { transform:translateY(0); }
  86% { transform:translateY(6px); }
  93% { transform:translateY(-11px); }       /* segundo pulinho: o settle */
  100%{ transform:translateY(0); }
}
/* PIRUETA no eixo vertical, simulada num desenho chapado: a largura
   aparente de um cartão girando é cos(θ), e o SINAL de cos diz que face
   você vê. Então scaleX percorre cos(θ) e as duas vistas se revezam nos
   cruzamentos por zero (25% e 75% da janela de giro).

   Os 12 passos existem porque interpolar scaleX linearmente de 1 a -1
   dá velocidade constante, e aí não lê como rotação — lê como o desenho
   sendo espremido. cos concentra o tempo perto de ±1, que é onde um
   objeto girando de verdade fica mais tempo visível de frente. */
/* inclinação lateral: dá peso ao pulo sem nunca inverter o rosto */
@keyframes lumi-inclina {
  0%,9%{ transform:rotate(0); }
  26% { transform:rotate(-9deg); }
  55% { transform:rotate(7deg); }
  80% { transform:rotate(-3deg); }
  100%{ transform:rotate(0); }
}
@keyframes lumi-squash-festa {
  0%,100%{ transform:scale(1,1); }
  9%  { transform:scale(1.09,.88); }
  26% { transform:scale(.91,1.12); }
  60% { transform:scale(1,1); }
  82% { transform:scale(1.12,.88); }
  93% { transform:scale(.96,1.05); }
}
@keyframes lumi-bracos-festa {
  0%,100%{ transform:rotate(0); }
  26% { transform:rotate(-40deg) translateY(-8px); }
  70% { transform:rotate(-30deg) translateY(-6px); }
  88% { transform:rotate(14deg); }
}
/* Chama: pico na largada, afina no ápice (já subiu, corta empuxo),
   e um segundo jorro na descida pra frear. Chama constante lê como
   adesivo colado no pé; chama que responde ao arco lê como propulsão. */
@keyframes lumi-fogo {
  0%  { opacity:0; transform:scaleY(.15) scaleX(.7); }
  7%  { opacity:1; transform:scaleY(1.4) scaleX(1.15); }    /* IGNIÇÃO */
  /* Com a pirueta no eixo vertical o bocal nunca aponta pro céu, então a
     chama QUEIMA O TEMPO TODO — só tremula. Era o giro em Z que obrigava
     a apagá-la no meio; o corte foi remendo, não escolha. */
  15% { opacity:1; transform:scaleY(1.08) scaleX(.95); }
  22% { opacity:1; transform:scaleY(1.32) scaleX(1.06); }   /* tremula */
  33% { opacity:1; transform:scaleY(1.05) scaleX(.94); }
  44% { opacity:1; transform:scaleY(1.28) scaleX(1.04); }
  56% { opacity:.9; transform:scaleY(.9) scaleX(.92); }     /* alivia no ápice */
  68% { opacity:1; transform:scaleY(1.15) scaleX(1); }
  79% { opacity:1; transform:scaleY(1.35) scaleX(1.08); }   /* jorro pra frear */
  90% { opacity:.45; transform:scaleY(.5) scaleX(.85); }
  100%{ opacity:0; transform:scaleY(.15) scaleX(.7); }
}
/* Fumaça: nasce pequena e opaca, incha e some. O --dx de cada baforada
   vem do JS, então cada uma abre pra um lado — leque, não coluna. */
@keyframes lumi-fumaca {
  0%  { opacity:0; transform:translate(0,0) scale(.2); }
  10% { opacity:.8; }
  55% { opacity:.5; }
  100%{ opacity:0; transform:translate(var(--dx), var(--dy)) scale(var(--sc)); }
}
@keyframes lumi-sombra-festa {
  0%,100%{ transform:scale(1); opacity:1; }
  48% { transform:scale(.5); opacity:.42; }
  82% { transform:scale(1.15); }
}

/* --- RITUAL: 4 tempos de 25% cada, bem separados para a criança copiar ---
   1) 0–25% RESPIRA · 2) 25–50% OLHA · 3) 50–75% PENSA · 4) 75–100% ZUM! */
@keyframes lumi-ritual-peito {
  0%  { transform:scale(1,1); }
  22% { transform:scale(.95,1.09); }   /* enche o peito devagar */
  50% { transform:scale(1,1); }
  72% { transform:scale(.97,1.04); }
  80% { transform:scale(1.1,.9); }     /* comprime pro Zum */
  88% { transform:scale(.92,1.12); }
  100%{ transform:scale(1,1); }
}
@keyframes lumi-ritual-corpo {
  0%,72%{ transform:translateY(0); }
  80% { transform:translateY(6px); }
  90% { transform:translateY(-26px); } /* ZUM! */
  100%{ transform:translateY(0); }
}
@keyframes lumi-ritual-cabeca {
  0%,25%{ transform:rotate(0); }
  33% { transform:rotate(-10deg); }    /* OLHA pra um lado */
  44% { transform:rotate(9deg); }      /* e pro outro */
  55% { transform:rotate(-4deg); }     /* PENSA */
  75% { transform:rotate(-4deg); }
  90% { transform:rotate(2deg); }
  100%{ transform:rotate(0); }
}
@keyframes lumi-ritual-olhar {
  0%,26%{ transform:translate(0,0); }
  34% { transform:translate(-7px,0); }
  45% { transform:translate(7px,0); }
  56% { transform:translate(-3px,-7px); }  /* olhar de quem pensa */
  76% { transform:translate(-3px,-7px); }
  100%{ transform:translate(0,0); }
}
/* olhos fechados só no primeiro tempo — respirar é de olho fechado */
@keyframes lumi-ritual-abre  { 0%,4%{ opacity:1; } 5%,24%{ opacity:0; } 25%,100%{ opacity:1; } }
@keyframes lumi-ritual-fecha { 0%,4%{ opacity:0; } 5%,24%{ opacity:1; } 25%,100%{ opacity:0; } }
@keyframes lumi-ritual-antena {
  0%,25%{ transform:rotate(8deg); }
  50% { transform:rotate(4deg); }
  75% { transform:rotate(-2deg); }     /* vai endireitando enquanto pensa */
  84% { transform:rotate(16deg); }     /* recua pro disparo */
  92% { transform:rotate(-12deg); }
  100%{ transform:rotate(8deg); }
}
@keyframes lumi-ritual-lampada {
  0%,25%{ opacity:.35; transform:scale(.85); }
  50% { opacity:.5; transform:scale(.95); }
  74% { opacity:1; transform:scale(1.2); }   /* carrega durante o PENSA */
  84% { opacity:1; transform:scale(1.1); }
  90% { opacity:1; transform:scale(1.5); filter:brightness(1.9) drop-shadow(0 0 16px var(--amarelo)); }
  100%{ opacity:.35; transform:scale(.85); }
}
@keyframes lumi-ritual-bracos {
  0%,25%{ transform:rotate(0); }
  50% { transform:rotate(0); }
  75% { transform:rotate(6deg); }
  90% { transform:rotate(-28deg) translateY(-6px); }   /* braços pro alto no Zum */
  100%{ transform:rotate(0); }
}

/* --- EXECUTANDO: ocupado, não agitado --- */
@keyframes lumi-trabalha {
  0%,100%{ transform:translateY(0) rotate(0); }
  50% { transform:translateY(-3px) rotate(1.5deg); }
}
@keyframes lumi-maos {
  0%,100%{ transform:rotate(-14deg) translateY(-3px); }
  50% { transform:rotate(10deg) translateY(3px); }
}
@keyframes lumi-foco {   /* vibração curta = concentração, não nervosismo */
  0%,100%{ transform:rotate(-3deg); }
  50% { transform:rotate(3deg); }
}

/* --- LITERAL: marcha decidida (a graça está na certeza) --- */
@keyframes lumi-marcha {
  0%,100%{ transform:translate(0,0) rotate(0); }
  25% { transform:translate(-4px,-7px) rotate(-3deg); }
  50% { transform:translate(0,0) rotate(0); }
  75% { transform:translate(4px,-7px) rotate(3deg); }
}
@keyframes lumi-marcha-corpo {
  0%,50%,100%{ transform:scale(1,1); }
  25%,75%{ transform:scale(1.05,.95); }   /* pisa firme */
}
@keyframes lumi-marcha-cabeca {
  0%,100%{ transform:rotate(0) translateY(0); }
  25% { transform:rotate(4deg) translateY(2px); }
  75% { transform:rotate(-4deg) translateY(2px); }
}
@keyframes lumi-marcha-braco {
  0%,100%{ transform:rotate(-24deg) translateY(-4px); }
  50% { transform:rotate(20deg) translateY(4px); }
}

/* --- FAÍSCA DOURADA: as luzinhas saem voando feito vaga-lume --- */
@keyframes lumi-voa-faisca {
  0%  { opacity:0; transform:translate(0,0) scale(.2); }
  10% { opacity:1; transform:translate(0,0) scale(1.35); }
  70% { opacity:1; }                 /* segura acesa: some cedo demais não lê */
  100%{ opacity:0; transform:translate(var(--dx), var(--dy)) scale(.8); }
}

/* --- AÇÕES --- */
@keyframes lumi-rodopio {          /* órbita: sobe, contorna e volta */
  0%  { transform:translate(0,0); }
  20% { transform:translate(30px,-16px); }
  40% { transform:translate(38px,-40px); }
  60% { transform:translate(0,-50px); }
  80% { transform:translate(-34px,-26px); }
  92% { transform:translate(-10px,-4px); }
  100%{ transform:translate(0,0); }
}
@keyframes lumi-rodopio-tilt {     /* inclina PARA DENTRO da curva, como quem faz curva */
  0%,100%{ transform:rotate(0); }
  25% { transform:rotate(15deg); }
  60% { transform:rotate(0); }
  85% { transform:rotate(-15deg); }
}
@keyframes lumi-rodopio-cabeca {
  0%,100%{ transform:rotate(0); }
  30% { transform:rotate(-8deg); }
  75% { transform:rotate(8deg); }
}
@keyframes lumi-bracos-abre {
  0%,100%{ transform:rotate(0); }
  50% { transform:rotate(-34deg) translateY(-6px); }
}
@keyframes lumi-danca {
  0%,100%{ transform:translate(0,0) rotate(0); }
  25% { transform:translate(-16px,-6px) rotate(-8deg); }
  50% { transform:translate(0,-2px) rotate(0); }
  75% { transform:translate(16px,-6px) rotate(8deg); }
}
@keyframes lumi-danca-corpo {
  0%,50%,100%{ transform:scale(1,1); }
  25%,75%{ transform:scale(1.06,.94); }
}
@keyframes lumi-danca-cabeca {     /* contratempo: cabeça contra o corpo */
  0%,100%{ transform:rotate(0); }
  25% { transform:rotate(10deg); }
  75% { transform:rotate(-10deg); }
}
@keyframes lumi-danca-braco {
  0%,100%{ transform:rotate(-30deg) translateY(-5px); }
  50% { transform:rotate(26deg) translateY(5px); }
}
@keyframes lumi-zum {
  0%  { transform:translateY(0); }
  14% { transform:translateY(8px); }     /* agacha */
  46% { transform:translateY(-30px); }
  78% { transform:translateY(0); }
  90% { transform:translateY(3px); }
  100%{ transform:translateY(0); }
}
@keyframes lumi-zum-corpo {
  0%,100%{ transform:scale(1,1); }
  14% { transform:scale(1.1,.89); }
  40% { transform:scale(.92,1.11); }
  80% { transform:scale(1.11,.88); }
  92% { transform:scale(.98,1.03); }
}

/* --- ESPERANDO: convite com pausa --- */
@keyframes lumi-espera {
  0%,60%,100%{ transform:rotate(0) translateY(0); }
  70% { transform:rotate(2.5deg) translateY(-5px); }   /* cutucão no fim do ciclo */
  80% { transform:rotate(0) translateY(0); }
  88% { transform:rotate(2deg) translateY(-3px); }
}
@keyframes lumi-espera-cabeca {
  0%,100%{ transform:rotate(0); }
  22% { transform:rotate(-7deg); }
  45% { transform:rotate(-7deg); }   /* segura: está olhando mesmo */
  62% { transform:rotate(6deg); }
  80% { transform:rotate(6deg); }
}
@keyframes lumi-varredura {
  0%,100%{ transform:translate(0,0); }
  22% { transform:translate(-6px,1px); }
  45% { transform:translate(-6px,1px); }
  62% { transform:translate(6px,1px); }
  80% { transform:translate(6px,1px); }
}

/* --- PENSANDO --- */
@keyframes lumi-pensa-olhos {
  0%,100%{ transform:translate(-5px,-6px); }
  35% { transform:translate(-5px,-6px); }
  55% { transform:translate(4px,-7px); }
  85% { transform:translate(4px,-7px); }
}
@keyframes lumi-radar {
  0%,100%{ transform:rotate(-30deg); }
  50% { transform:rotate(30deg); }
}
@keyframes lumi-processa {
  0%,100%{ opacity:.35; transform:scale(.86); }
  50% { opacity:1; transform:scale(1.1); }
}

/* --- FALANDO --- */
@keyframes lumi-fala {
  0%,100%{ transform:scaleY(1) scaleX(1); }
  18% { transform:scaleY(.3) scaleX(1.15); }
  36% { transform:scaleY(.9) scaleX(1); }
  55% { transform:scaleY(.35) scaleX(1.1); }
  74% { transform:scaleY(.75) scaleX(1.04); }
}
@keyframes lumi-conversa {
  0%,100%{ transform:rotate(0) translateY(0); }
  25% { transform:rotate(-4deg) translateY(-2px); }
  55% { transform:rotate(3deg) translateY(1px); }
  80% { transform:rotate(-2deg); }
}
@keyframes lumi-gesticula {
  0%,100%{ transform:rotate(0); }
  30% { transform:rotate(-22deg) translateY(-4px); }
  60% { transform:rotate(-6deg); }
  85% { transform:rotate(-16deg) translateY(-2px); }
}

/* --- ACENANDO: a mão sobe e balança em torno da posição alta ---
   O braço sobe UMA vez e oscila lá em cima; descer a cada ciclo
   viraria remada, não aceno. */
@keyframes lumi-acena {
  0%,100%{ transform:rotate(-46deg) translate(2px,-6px); }
  50% { transform:rotate(-72deg) translate(6px,-9px); }
}

/* --- APONTANDO: estende e insiste --- */
@keyframes lumi-aponta {
  0%,100%{ transform:rotate(-58deg) translate(0,-2px); }
  30% { transform:rotate(-64deg) translate(4px,-5px); }   /* jab */
  45% { transform:rotate(-58deg) translate(0,-2px); }
  62% { transform:rotate(-64deg) translate(4px,-5px); }
}

/* --- ORGULHOSO --- */
@keyframes lumi-peito {
  0%,100%{ transform:scale(1.05,1.03); }
  50% { transform:scale(1.09,1.05); }
}

/* --- CONFUSO: dúvida com pausa + dar de ombros --- */
@keyframes lumi-duvida {
  0%,100%{ transform:rotate(0); }
  14% { transform:rotate(-15deg); }
  38% { transform:rotate(-15deg); }   /* pausa: está processando */
  56% { transform:rotate(14deg); }
  80% { transform:rotate(14deg); }
}
@keyframes lumi-duvida-olhos {
  0%,100%{ transform:translate(0,-4px); }
  14% { transform:translate(5px,-6px); }
  38% { transform:translate(5px,-6px); }
  56% { transform:translate(-5px,-6px); }
  80% { transform:translate(-5px,-6px); }
}
@keyframes lumi-ombros {
  0%,100%{ transform:translateY(0) rotate(0); }
  20% { transform:translateY(-7px) rotate(-6deg); }   /* ombros SOBEM: dúvida, não tristeza */
  70% { transform:translateY(-7px) rotate(-6deg); }
}
@keyframes lumi-antena-murcha {
  0%,100%{ transform:rotate(20deg) translateY(3px); }
  30% { transform:rotate(26deg) translateY(5px); }
  60% { transform:rotate(14deg) translateY(2px); }
}

/* --- OPS: encolhe e se recompõe --- */
@keyframes lumi-encolhe {
  0%  { transform:scale(1) translateY(0); }
  22% { transform:scale(.93) translateY(9px); }
  70% { transform:scale(.95) translateY(7px); }
  100%{ transform:scale(1) translateY(2px); }   /* já voltando: erro não é fim */
}
@keyframes lumi-cabeca-baixa {
  0%  { transform:rotate(0) translateY(0); }
  25% { transform:rotate(11deg) translateY(4px); }
  70% { transform:rotate(10deg) translateY(4px); }
  100%{ transform:rotate(3deg) translateY(1px); }
}
@keyframes lumi-antena-ops {
  0%  { transform:rotate(0); }
  18% { transform:rotate(42deg); }    /* murcha rápido */
  70% { transform:rotate(38deg); }
  100%{ transform:rotate(16deg); }    /* e começa a levantar de novo */
}

/* --- TCHAU: acena, vira e decola --- */
@keyframes lumi-partida {
  0%,34%{ transform:translateY(0) scale(1); }       /* fica acenando */
  46% { transform:translateY(6px) scale(1.02); }    /* agacha pra impulsionar */
  60% { transform:translateY(-30px) scale(.92); }
  100%{ transform:translateY(-150px) scale(.55); }  /* sobe e some ao longe */
}
@keyframes lumi-sombra-partida {
  0%,40%{ transform:scale(1); opacity:1; }
  100%{ transform:scale(.35); opacity:0; }
}
/* dissolvência da virada: 44%→54% do gesto, ~0,26s, já em movimento */
@keyframes lumi-vira-frente {
  0%,44%{ opacity:1; } 54%,100%{ opacity:0; }
}
@keyframes lumi-vira-costas {
  0%,44%{ opacity:0; } 54%,100%{ opacity:1; }
}
@keyframes lumi-fogo-partida {
  0%,40%{ opacity:0; transform:scaleY(.2); }
  50% { opacity:1; transform:scaleY(1.4); }    /* acende junto com a virada */
  100%{ opacity:1; transform:scaleY(1.15); }
}

/* --- VIDA: micro-comportamentos --- */
@keyframes lumi-micro-olhar {
  0%,100%{ transform:translate(0,0); }
  20% { transform:translate(-7px,0); }
  45% { transform:translate(-7px,0); }
  60% { transform:translate(6px,-2px); }
  85% { transform:translate(6px,-2px); }
}
@keyframes lumi-micro-olhar-cabeca {
  0%,100%{ transform:rotate(0); }
  20%,45%{ transform:rotate(-3deg); }
  60%,85%{ transform:rotate(3deg); }
}
@keyframes lumi-micro-tilt {
  0%,100%{ transform:rotate(0); }
  25%,70%{ transform:rotate(10deg); }
}
@keyframes lumi-micro-antena {
  0%,100%{ transform:rotate(0); }
  25%,70%{ transform:rotate(-16deg); }
}
@keyframes lumi-micro-suspiro {
  0%,100%{ transform:scale(1,1); }
  35% { transform:scale(.97,1.06); }   /* enche o peito */
  75% { transform:scale(1.04,.96); }   /* e solta */
}
@keyframes lumi-micro-sobe {
  0%,100%{ transform:translateY(0); }
  35% { transform:translateY(-5px); }
}

/* ============================================================
   ACESSIBILIDADE — quem pediu menos movimento recebe as POSES,
   não a ausência de personagem: o Lumi continua expressivo parado.
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .lumi *{ animation:none !important; }
  .lumi[data-estado="entendi"]   .lumi-acao    { transform:translateY(-14px); }
  .lumi[data-estado="comemora"]  .lumi-acao    { transform:translateY(-16px) rotate(-8deg); }
  .lumi[data-estado="comemora"]  .lumi-braco,
  .lumi[data-estado="entendi"]   .lumi-braco   { transform:rotate(-30deg) translateY(-6px); }
  .lumi[data-estado="confuso"]   .lumi-cabeca  { transform:rotate(-15deg); }
  .lumi[data-estado="esperando"] .lumi-cabeca  { transform:rotate(-7deg); }
  .lumi[data-estado="apontando"] .lumi-braco--d{ transform:rotate(-58deg) translate(0,-2px); }
  .lumi[data-estado="ops"]       .lumi-acao    { transform:scale(.95) translateY(7px); }
  .lumi[data-estado="ops"]       .lumi-cabeca  { transform:rotate(10deg) translateY(4px); }
  .lumi[data-estado="falando"]   .lumi-boca-o-g{ transform:scaleY(.5); }
}