/* TáNaFila · animações do balão (identidade v2, 25/10/2026). Usar no site, nos painéis e no manual.
   Marcação: <div class="bal cla|esc a1">…</div> (ver manual.html, seção 10). Tudo para quando o aparelho pede menos movimento.
   Cores: --noite, --papel e --senha precisam existir (tokens.css). */
.anim .palco{height:190px;border-radius:16px;display:grid;place-items:center;margin-bottom:12px;overflow:hidden;position:relative}
.escuro{background:var(--noite)}.claro{background:var(--papel)}.laranja{background:var(--senha)}
/* o balão: corpo + rabicho + três pontos */
.bal{position:relative;width:132px;height:96px}
.bal .corpo{position:absolute;left:0;top:0;width:132px;height:84px;border-radius:26px}
.bal .rabo{position:absolute;left:18px;bottom:0;width:0;height:0;border-left:0 solid transparent;border-right:34px solid transparent;border-top:30px solid}
.bal .p{position:absolute;top:30px;width:24px;height:24px;border-radius:50%}
.bal .p:nth-of-type(1){left:24px}.bal .p:nth-of-type(2){left:54px}.bal .p:nth-of-type(3){left:84px}
.esc .corpo{background:var(--noite)}.esc .rabo{border-top-color:var(--noite)}.esc .p{background:var(--papel)}
.cla .corpo{background:var(--papel)}.cla .rabo{border-top-color:var(--papel)}.cla .p{background:var(--noite)}

/* 1 · a vez passa (ideia do Dickson): o laranja anda de um ponto para o outro e volta ao começo */
@keyframes vez{0%,30%{background:var(--senha)}33.4%,100%{background:var(--cor)}}
.a1 .p{--cor:var(--papel);animation:vez 1.8s steps(1,end) infinite}
.a1.cla .p{--cor:var(--noite)}
.a1 .p:nth-of-type(2){animation-delay:.6s}.a1 .p:nth-of-type(3){animation-delay:1.2s}

/* 2 · digitando: os pontos sobem em sequência, o primeiro sempre laranja */
@keyframes sobe{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-10px)}}
.a2 .p{animation:sobe 1.2s ease-in-out infinite}.a2 .p:nth-of-type(1){background:var(--senha)}
.a2 .p:nth-of-type(2){animation-delay:.15s}.a2 .p:nth-of-type(3){animation-delay:.3s}

/* 3 · a fila anda: o primeiro (laranja) sai pela esquerda, os outros andam, um novo entra no fim; o novo primeiro fica laranja */
.a3 .trilho{position:absolute;left:24px;top:30px;width:84px;height:24px;overflow:hidden}
.a3 .trilho i{position:absolute;top:0;width:24px;height:24px;border-radius:50%;background:var(--noite);animation:anda 2.4s cubic-bezier(.6,.05,.3,1) infinite}
@keyframes anda{0%{transform:translateX(0)}35%,100%{transform:translateX(-30px)}}
.a3 .trilho i:nth-child(1){left:0;animation-name:anda1}.a3 .trilho i:nth-child(2){left:30px;animation-name:anda2}.a3 .trilho i:nth-child(3){left:60px}.a3 .trilho i:nth-child(4){left:90px}
@keyframes anda1{0%{transform:translateX(0);background:var(--senha);opacity:1}35%,100%{transform:translateX(-30px);background:var(--senha);opacity:0}}
@keyframes anda2{0%{transform:translateX(0);background:var(--noite)}35%,100%{transform:translateX(-30px);background:var(--senha)}}

/* 4 · chamada: o ponto da vez pulsa, como notificação de cliente novo */
@keyframes pulso{0%{box-shadow:0 0 0 0 rgba(240,88,42,.7)}70%{box-shadow:0 0 0 18px rgba(240,88,42,0)}100%{box-shadow:0 0 0 0 rgba(240,88,42,0)}}
.a4 .p:nth-of-type(1){background:var(--senha);animation:pulso 1.6s ease-out infinite}

/* 5 · vinheta (abertura ou final de vídeo): balão entra, pontos acendem um a um, o nome escreve "Tá", "Na", "Fila" */
.vin{display:flex;align-items:center;gap:18px;transform:scale(.62)}
.vin .bal{animation:entra 4.8s cubic-bezier(.2,1.3,.4,1) infinite}
@keyframes entra{0%{transform:scale(0) rotate(-12deg);opacity:0}10%,88%{transform:scale(1) rotate(0);opacity:1}100%{transform:scale(1);opacity:0}}
.vin .p{opacity:0;animation:acende 4.8s infinite}.vin .p:nth-of-type(1){background:var(--senha);animation-delay:0s}
.vin .p:nth-of-type(2){animation-name:acende2}.vin .p:nth-of-type(3){animation-name:acende3}
@keyframes acende{0%,12%{opacity:0;transform:scale(.3)}17%,88%{opacity:1;transform:scale(1)}100%{opacity:0}}
@keyframes acende2{0%,18%{opacity:0;transform:scale(.3)}23%,88%{opacity:1;transform:scale(1)}100%{opacity:0}}
@keyframes acende3{0%,24%{opacity:0;transform:scale(.3)}29%,88%{opacity:1;transform:scale(1)}100%{opacity:0}}
.vin .nome{font:400 92px/1 Anton,sans-serif;display:flex;color:var(--papel)}
.vin .nome span{opacity:0;transform:translateY(24px);display:inline-block}
.vin .nome span:nth-child(1){animation:letra1 4.8s cubic-bezier(.2,.9,.3,1) infinite}
.vin .nome span:nth-child(2){color:var(--senha);animation:letra2 4.8s cubic-bezier(.2,.9,.3,1) infinite}
.vin .nome span:nth-child(3){animation:letra3 4.8s cubic-bezier(.2,.9,.3,1) infinite}
@keyframes letra1{0%,32%{opacity:0;transform:translateY(24px)}40%,88%{opacity:1;transform:none}100%{opacity:0}}
@keyframes letra2{0%,40%{opacity:0;transform:translateY(24px)}48%,88%{opacity:1;transform:none}100%{opacity:0}}
@keyframes letra3{0%,48%{opacity:0;transform:translateY(24px)}56%,88%{opacity:1;transform:none}100%{opacity:0}}

/* 6 · carregando no painel: a vez passa, pequeno, com a frase */
.load{display:flex;align-items:center;gap:12px;font:500 14px Inter;color:var(--noite)}
.load .mini{display:flex;gap:6px}.load .mini i{width:10px;height:10px;border-radius:50%;background:#C9CED6;animation:vez 1.8s steps(1,end) infinite;--cor:#C9CED6}
.load .mini i:nth-child(2){animation-delay:.6s}.load .mini i:nth-child(3){animation-delay:1.2s}


/* 7 · lead quente (pedido do Dickson, 25/10): o balão pega fogo, as bolinhas ficam agitadas e o balão treme de vez em quando */
.quente{position:relative;width:132px;height:160px;display:flex;align-items:flex-end;justify-content:center}
.quente .bal{animation:treme 2.6s infinite}
@keyframes treme{0%,72%,100%{transform:none}74%{transform:translate(-3px,1px) rotate(-3deg)}76%{transform:translate(3px,-1px) rotate(3deg)}78%{transform:translate(-3px,0) rotate(-2deg)}80%{transform:translate(2px,1px) rotate(2deg)}82%{transform:translate(-1px,0) rotate(-1deg)}84%{transform:none}}
.quente .corpo{box-shadow:0 0 0 0 rgba(240,88,42,.6);animation:brasa 1.3s ease-in-out infinite}
@keyframes brasa{0%,100%{box-shadow:0 0 14px 2px rgba(240,88,42,.35)}50%{box-shadow:0 0 30px 8px rgba(255,140,40,.6)}}
.quente .p{transition:none}
.quente .p:nth-of-type(1){background:var(--senha);animation:louca1 .7s ease-in-out infinite}
.quente .p:nth-of-type(2){animation:louca2 .55s ease-in-out infinite}
.quente .p:nth-of-type(3){animation:louca3 .8s ease-in-out infinite}
@keyframes louca1{0%,100%{transform:translate(0,0)}25%{transform:translate(4px,-12px)}50%{transform:translate(-3px,8px)}75%{transform:translate(6px,4px)}}
@keyframes louca2{0%,100%{transform:translate(0,0)}25%{transform:translate(-5px,9px)}50%{transform:translate(4px,-11px)}75%{transform:translate(-6px,-3px)}}
@keyframes louca3{0%,100%{transform:translate(0,0)}25%{transform:translate(-4px,-10px)}50%{transform:translate(5px,7px)}75%{transform:translate(-2px,10px)}}
.fogo{position:absolute;left:50%;top:-14px;width:176px;height:92px;transform:translateX(-50%);pointer-events:none}
.fogo path{transform-box:fill-box;transform-origin:50% 100%}
.fogo .f1{animation:chama 0.9s ease-in-out infinite}.fogo .f2{animation:chama 0.7s ease-in-out infinite reverse}.fogo .f3{animation:chama 1.1s ease-in-out infinite}
.fogo .n1{animation:chama .6s ease-in-out infinite}.fogo .n2{animation:chama .8s ease-in-out infinite reverse}
@keyframes chama{0%,100%{transform:scale(1,1) skewX(0)}30%{transform:scale(.92,1.12) skewX(-6deg)}60%{transform:scale(1.06,.9) skewX(5deg)}}

@media (prefers-reduced-motion:reduce){*{animation:none!important}.vin .p,.vin .nome span{opacity:1;transform:none}}