/* ============================================================
   Turma Elmar — animações stop motion
   elmar.bio · SVG + CSS, sem GIF e sem vídeo

   Base: design_handoff_mascotes_elmar/assets/css/mascotes-elmar.css
   Cores, durações e curvas mantidas exatamente como no handoff.

   Divergências do arquivo original (todas documentadas inline,
   marcadas com [FIX]) existem porque o CSS entregue não roda como
   está: faltavam classes, o gate de viewport não segurava os
   filhos e o bloco reduced-motion apagava transform de desenho.
   ============================================================ */

/* --- Tokens ------------------------------------------------ */
:root {
    --elmar-verde: #005851;
    --elmar-verde-claro: #0E7A6E;
    --elmar-verde-agua: #A9D6CB;
    --elmar-creme: #F1EADA;
    --elmar-areia: #F4EAD5;
    --elmar-ambar: #E8A93F;

    --mascote-nico: #8A5A33;
    --mascote-cran: #C22B3F;
    --mascote-cravinho: #C77E4A;
    --mascote-flor: #B32357;
    --mascote-tonico: #EAD7B0;
    --mascote-gigi: #E8536E;

    --mascote-nico-bg: #EDE2CE;
    --mascote-cran-bg: #F6DEDA;
    --mascote-cravinho-bg: #EFE0CC;
    --mascote-flor-bg: #F4DCE4;
    --mascote-tonico-bg: #E6EDDF;
    --mascote-gigi-bg: #F6E0E6;
}

/* --- Keyframes ---------------------------------------------
   IMPORTANTE: todas as animações usam steps() — é isso que dá
   o aspecto de stop motion (8–12 quadros/s). Nunca troque por
   ease/linear: fica suave e vira banner.
   ----------------------------------------------------------- */

/* tremor de massinha — aplicar no wrapper de QUALQUER mascote animado */
@keyframes elmar-boil {
    0%   { transform: translate(0,0) rotate(0deg); }
    50%  { transform: translate(.7px,-.7px) rotate(.55deg); }
    100% { transform: translate(-.5px,.5px) rotate(-.45deg); }
}
@keyframes elmar-hop {
    0%,16%   { transform: translateY(0) scale(1,1); }
    22%      { transform: translateY(2px) scale(1.1,.86); }
    34%      { transform: translateY(-22px) scale(.94,1.08); }
    46%      { transform: translateY(-34px) scale(1,1); }
    58%      { transform: translateY(-20px) scale(.96,1.05); }
    70%      { transform: translateY(2px) scale(1.12,.84); }
    80%,100% { transform: translateY(0) scale(1,1); }
}
/* O handoff fixava o percurso em 230px — valor calibrado na largura do
   protótipo. Em qualquer fileira mais larga o caminhão parava no meio do
   passo 2. As proporções (as três paradas em 32%, 66% e 100% do trajeto,
   que é o que sincroniza com os 4 passos) são as mesmas; só a distância
   virou variável. Definir --elmar-vito-dist = centro do passo 1 até o
   centro do passo 4. */
@keyframes elmar-drive {
    0%      { transform: translateX(0); }
    8%      { transform: translateX(calc(var(--elmar-vito-dist) * .1130)); }
    16%     { transform: translateX(calc(var(--elmar-vito-dist) * .2261)); }
    24%,30% { transform: translateX(calc(var(--elmar-vito-dist) * .3217)); }
    38%     { transform: translateX(calc(var(--elmar-vito-dist) * .4522)); }
    46%     { transform: translateX(calc(var(--elmar-vito-dist) * .5652)); }
    54%,60% { transform: translateX(calc(var(--elmar-vito-dist) * .6609)); }
    68%     { transform: translateX(calc(var(--elmar-vito-dist) * .7913)); }
    76%     { transform: translateX(calc(var(--elmar-vito-dist) * .9043)); }
    84%,100%{ transform: translateX(var(--elmar-vito-dist)); }
}
@keyframes elmar-wheel { to { transform: rotate(360deg); } }
@keyframes elmar-station-on {
    0%,20%  { opacity: .28; }
    26%,46% { opacity: 1; }
    52%,72% { opacity: .28; }
}
/* [FIX 5] Variante de passagem única. A original acende e apaga de
   novo — faz sentido em loop (o protótipo), mas na home deixaria os
   4 passos permanentemente a 28% de opacidade depois de 8,4s, com o
   texto de verdade ilegível. Mesmos dois valores do handoff (.28 → 1),
   mesma janela de acendimento; só o rabo de apagar foi removido. */
@keyframes elmar-station-once {
    0%,20%   { opacity: .28; }
    26%,100% { opacity: 1; }
}
@keyframes elmar-blink {
    0%,88%   { transform: scaleY(1); }
    92%      { transform: scaleY(.12); }
    96%,100% { transform: scaleY(1); }
}
@keyframes elmar-scan {
    0%,20%   { transform: translateX(-5px); }
    30%,50%  { transform: translateX(5px); }
    60%,80%  { transform: translateX(-5px); }
    90%,100% { transform: translateX(0); }
}
@keyframes elmar-antenna {
    0%,40%   { opacity: 1; }
    50%      { opacity: .35; }
    60%,100% { opacity: 1; }
}
@keyframes elmar-typing {
    0%,20%   { opacity: .2; }
    30%,60%  { opacity: 1; }
    70%,100% { opacity: .2; }
}
@keyframes elmar-tick {
    0%,60%   { transform: scale(1); }
    70%      { transform: scale(1.16); }
    80%,100% { transform: scale(1); }
}
@keyframes elmar-pop {
    0%       { opacity: 0; transform: translateY(14px) scale(.6); }
    12%      { opacity: 1; transform: translateY(0) scale(1.14); }
    20%      { transform: translateY(0) scale(.94); }
    28%,100% { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes elmar-wave {
    0%,30%   { transform: rotate(0deg); }
    40%      { transform: rotate(-26deg); }
    50%      { transform: rotate(12deg); }
    60%      { transform: rotate(-22deg); }
    70%,100% { transform: rotate(0deg); }
}
@keyframes elmar-fill-bar {
    0%   { width: 8%; }
    25%  { width: 32%; }
    50%  { width: 58%; }
    75%  { width: 82%; }
    100% { width: 100%; }
}

/* --- Utilitários -------------------------------------------
   [FIX 3] transform-box/transform-origin: as animações que rodam
   DENTRO de um <svg> (roda, braço, olhos) precisam de origem em
   coordenadas do viewBox. Sem isto o navegador usa o canto do
   viewport SVG e a roda gira em órbita em vez de girar no eixo.
   ----------------------------------------------------------- */
.elmar-boil { animation: elmar-boil .28s steps(2,end) infinite; }
.elmar-hop  { animation: elmar-hop 1.4s steps(1,end) infinite; transform-origin: 50% 100%; }
.elmar-hop--contador { animation-duration: 1.1s; }  /* bate junto com o segundo virando */
.elmar-hop--rapido   { animation-duration: .8s; }   /* faltando menos de 1h (README §4) */
/* fora da ultima hora o Cran fica parado: movimento so' quando significa
   alguma coisa. A classe vai no wrapper de fora e alcanca o boil junto,
   senao sobraria o tremor de massinha sem o pulo. */
.elmar-cran--parado, .elmar-cran--parado * { animation: none !important; }

/* [FIX 5] O handoff declara drive/wheel como `infinite`, mas o próprio
   README manda "animações de seção rodam uma vez". Uma volta só, e a
   roda para exatamente junto com o caminhão: 4.8s / .5s = 9.6 voltas. */
/* fallback = o valor do handoff; o JS de medição sobrescreve com a
   distância real entre o passo 1 e o passo 4 */
.elmar-drive {
    --elmar-vito-dist: 230px;
    width: fit-content;   /* o box tem que abraçar o SVG: e' o centro dele que o JS alinha com o passo 1 */
    animation: elmar-drive 4.8s steps(1,end) 1 both;
}
.elmar-wheel { animation: elmar-wheel .5s steps(6,end) 9.6 both; transform-box: view-box; }

.elmar-blink        { animation: elmar-blink 2.6s steps(1,end) infinite; transform-box: view-box; }
.elmar-blink--lento { animation-duration: 6s; }  /* estado vazio: piscar a cada 6s (README §6) */

.elmar-scan { animation: elmar-scan 2.4s steps(1,end) infinite; transform-box: view-box; }
.elmar-tick { animation: elmar-tick 1s steps(1,end) infinite; }
.elmar-pop  { animation: elmar-pop .9s steps(1,end) both; }

/* [FIX 5] O aceno também vinha `infinite`; o README pede "acena 2s ao
   abrir, depois só o piscar. Nunca loop agressivo." */
.elmar-wave { animation: elmar-wave 2.2s steps(1,end) 1 both; transform-box: view-box; }

/* [FIX 4] Classes que faltavam no handoff — os keyframes vinham, as
   classes não, então as etapas 4 e 5 não tinham como rodar. */
.elmar-antenna { animation: elmar-antenna 1.2s steps(1,end) infinite; }

.elmar-typing > i          { animation: elmar-typing 1.1s steps(1,end) infinite; }
.elmar-typing > i:nth-child(2) { animation-delay: .15s; }
.elmar-typing > i:nth-child(3) { animation-delay: .3s; }

.elmar-station   { animation: elmar-station-once 4.8s steps(1,end) 1 both; }
.elmar-station--1 { animation-delay: 0s; }
.elmar-station--2 { animation-delay: 1.2s; }
.elmar-station--3 { animation-delay: 2.4s; }
.elmar-station--4 { animation-delay: 3.6s; }

/* --- Gate de viewport --------------------------------------
   [FIX 5] animation-play-state NÃO é herdado. No original só o
   elemento com .elmar-once ficava pausado; no Vito as animações
   estão nos filhos (caminhão, rodas, passos), então tudo rodava
   antes da seção entrar na tela. O seletor precisa alcançar os
   descendentes. Quantas vezes cada animação roda é problema de
   cada utilitário acima, não deste gate.

   O gate só existe depois que o JS ARMA (.elmar-once--armed). Sem essa
   trava, um JS que não carrega deixaria a seção pausada no quadro 0 para
   sempre — os 4 passos presos a 28% de opacidade. Sem JS as animações
   simplesmente rodam ao carregar, que é degradação aceitável.
   ----------------------------------------------------------- */
.elmar-once--armed,
.elmar-once--armed * { animation-play-state: paused; }

.elmar-once--armed.is-visible,
.elmar-once--armed.is-visible * { animation-play-state: running; }

/* --- Loading (substitui Content/img/loading.gif) ------------ */
.elmar-loader { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.elmar-loader__bar { width: 190px; height: 7px; border-radius: 99px; background: #E8DCC2; overflow: hidden; }
.elmar-loader__bar > i {
    display: block; height: 100%; border-radius: 99px; background: var(--elmar-verde);
    animation: elmar-fill-bar 1.6s steps(1,end) infinite;
}

/* Variante compacta p/ dentro de botão (14–32px): só o mascote,
   sem barra — a composição de 104px + barra não cabe num botão. */
.elmar-loader--inline { display: inline-flex; gap: 0; vertical-align: middle; }
.elmar-loader--inline .elmar-loader__bar { display: none; }

/* --- Mascote monocromático (mask) ---------------------------
   O 1cor-negativo desenha o mascote em creme e vaza os buracos com
   VERDE — funciona sobre a barra verde, mas em card claro/escuro o
   disco aparece. Estes mono.svg trazem os recortes como transparencia
   de verdade (mask interna), entao o CSS pinta com currentColor e o
   icone acompanha o tema. Sem disco.
   ----------------------------------------------------------- */
.elmar-mono { display: block; width: 100%; height: 100%; }

@supports ((-webkit-mask-image: url("#")) or (mask-image: url("#"))) {
    .elmar-mono {
        background-color: currentColor;
        -webkit-mask: var(--elmar-m) center/contain no-repeat;
                mask: var(--elmar-m) center/contain no-repeat;
    }
}
.elmar-mono--nico     { --elmar-m: url(../img/mascotes/1-nico-naturais/mono.svg); }
.elmar-mono--cran     { --elmar-m: url(../img/mascotes/2-cran-desidratados/mono.svg); }
.elmar-mono--cravinho { --elmar-m: url(../img/mascotes/3-cravinho-especiarias/mono.svg); }
.elmar-mono--flor     { --elmar-m: url(../img/mascotes/4-flor-chas/mono.svg); }
.elmar-mono--tonico    { --elmar-m: url(../img/mascotes/5-tonico-suplementos/mono.svg); }
.elmar-mono--gigi     { --elmar-m: url(../img/mascotes/6-gigi-doces/mono.svg); }

/* --- Pop no hover: um mascote por vez (README §5) ----------- */
@media (hover: hover) {
    .elmar-hover-pop:hover .elmar-pop-alvo { animation: elmar-pop .9s steps(1,end) both; }
}


/* --- Cran no contador de Ofertas do Dia (README §4) ---------
   Fica ao lado do contador, dentro do .el-of-head (que ja' e' flex).
   NAO mexo nas cores dos blocos do contador: o README descreve o
   contador do prototipo (#3A0D14 / #C22B3F), e o nosso vive dentro da
   faixa verde com fundo translucido — trocar brigaria com a faixa.
   ----------------------------------------------------------- */
.elmar-cran { display: block; width: 84px; height: 84px; }
@media (max-width: 640px) { .elmar-cran { width: 60px; height: 60px; } }

/* --- Bit no bloco de IA ------------------------------------- */
.elmar-plat-bit { display: flex; justify-content: center; margin: 0 0 28px; }

/* --- Estado vazio com o Tião (README §6) --------------------
   Medidas do handoff: fundo #F6F2E6, borda 1px #E8DCC2, raio 20px,
   título 17px/600 #1D2A26, apoio 14.5px #5A6862, botão pill #005851
   com texto #F1EADA 14px/600 e padding 10px 20px.
   ----------------------------------------------------------- */
.elmar-tiao { display: block; width: 140px; height: 112px; }

.elmar-vazio {
    background: #F6F2E6; border: 1px solid var(--elmar-borda-vazio, #E8DCC2);
    border-radius: 20px; padding: 28px 20px; text-align: center;
}
.elmar-vazio__arte { display: flex; justify-content: center; margin-bottom: 6px; }
.elmar-vazio__titulo { font-size: 17px; font-weight: 600; color: #1D2A26; margin: 0 0 6px; }
.elmar-vazio__apoio  { font-size: 14.5px; color: #5A6862; margin: 0 0 16px; }
.elmar-vazio__acoes  { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.elmar-vazio__btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--elmar-verde); color: var(--elmar-creme);
    font-size: 14px; font-weight: 600; padding: 10px 20px;
    border: 0; border-radius: 999px; text-decoration: none; cursor: pointer;
}
.elmar-vazio__btn:hover { background: var(--elmar-verde-claro); color: var(--elmar-creme); text-decoration: none; }
.elmar-vazio__btn--ghost {
    background: transparent; color: var(--elmar-verde);
    border: 1px solid rgba(0,88,81,.28);
}
.elmar-vazio__btn--ghost:hover { background: rgba(0,88,81,.06); color: var(--elmar-verde); }

/* dentro de card, faixa estreita (lista de pedidos do painel) */
.elmar-vazio--compacto { padding: 18px 14px; border: 0; background: transparent; border-radius: 0; }
.elmar-vazio--compacto .elmar-tiao { width: 96px; height: 77px; }
.elmar-vazio--compacto .elmar-vazio__titulo { font-size: 14px; }
.elmar-vazio--compacto .elmar-vazio__apoio { font-size: 13px; margin-bottom: 0; }

/* sobre fundo escuro (painel de notificações) */
.elmar-vazio--escuro { background: transparent; border: 0; padding: 22px 16px; }
.elmar-vazio--escuro .elmar-tiao { width: 104px; height: 83px; }
.elmar-vazio--escuro .elmar-vazio__titulo { color: var(--elmar-creme); font-size: 14px; }
.elmar-vazio--escuro .elmar-vazio__apoio { color: var(--elmar-verde-agua); font-size: 12.5px; margin-bottom: 0; }

@media (max-width: 560px) {
    .elmar-tiao { width: 112px; height: 90px; }
    .elmar-vazio { padding: 22px 16px; }
}

/* --- Bit: balões do bloco de IA (README §3) -----------------
   Cores, tamanhos e raios exatamente como especificado. O "revela
   o balão depois de digitar" reaproveita elmar-pop (que já vinha no
   handoff) com atraso de uma volta de digitação — o handoff não
   entregou keyframe próprio para essa revelação.
   ----------------------------------------------------------- */
.elmar-bit { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.elmar-bit__chat { flex: 1; min-width: 240px; max-width: 340px; display: flex; flex-direction: column; gap: 10px; }

.elmar-bit__typing {
    background: var(--elmar-verde-claro);
    border-radius: 16px 16px 16px 5px; padding: 14px 16px; width: fit-content;
}
.elmar-typing { display: flex; gap: 7px; align-items: center; }
.elmar-typing > i { width: 8px; height: 8px; border-radius: 50%; background: var(--elmar-verde-agua); }

.elmar-bit__reply {
    background: var(--elmar-areia); color: #0B3B35;
    font-size: 14.5px; line-height: 1.4;
    border-radius: 16px; padding: 14px 16px;
}

/* O balão e os botões entram depois de uma volta de digitação. O handoff
   descreve a revelação mas não entregou keyframe — reaproveita elmar-pop. */
.elmar-bit__reply.elmar-pop { animation-delay: 1.1s; }
.elmar-bit__acts.elmar-pop  { animation-delay: 1.25s; }

.elmar-bit__acts { display: flex; gap: 8px; flex-wrap: wrap; }
.elmar-bit__btn {
    background: var(--elmar-ambar); color: #3B2416;
    font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: 999px;
}
.elmar-bit__btn--ghost {
    background: transparent; border: 1px solid var(--elmar-verde-agua);
    color: var(--elmar-verde-agua); font-weight: 400;
}

/* --- Acessibilidade: OBRIGATÓRIO ---------------------------
   [FIX 6] O original usava `[class*="elmar-"] * { transform: none
   !important }`. Como `transform` em CSS sobrepõe o ATRIBUTO de
   apresentação transform="..." do SVG, essa regra apagava geometria
   de desenho — a folha do Nico (rotate -20) e o brilho da Cran
   (rotate -32) saltavam de lugar com reduced-motion ligado.
   Aqui só as classes que de fato recebem transform via CSS são
   zeradas; nenhum descendente arbitrário é tocado.
   ----------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .elmar-boil, .elmar-hop, .elmar-drive, .elmar-wheel, .elmar-blink,
    .elmar-scan, .elmar-antenna, .elmar-tick, .elmar-wave, .elmar-pop,
    .elmar-station, .elmar-typing > i, .elmar-loader__bar > i {
        animation: none !important;
    }

    .elmar-boil, .elmar-hop, .elmar-drive, .elmar-wheel, .elmar-blink,
    .elmar-scan, .elmar-tick, .elmar-wave, .elmar-pop {
        transform: none !important;
    }

    /* estado final legível em vez do quadro 0 */
    .elmar-station { opacity: 1 !important; }
    .elmar-typing > i { opacity: 1 !important; }
    .elmar-loader__bar > i { width: 60%; }
}