/* O painel da marca do Max: a V2, "No chão", com o nome "Max agentes" (escolha de Alan, 04/11/2026; aprovada nas prévias da entrada e
   das boas-vindas). Componente da Arte Slime (docs/previas/guia_visual/painel_marca.html, commit b79f8ec; a seção 13 do guia é a
   especificação). Usado pela entrada e pelas boas-vindas, com painel_marca.js. Os tokens de cor e de tipo vêm de quem usa (entrada.css). */
:root{
  /* o ritmo do movimento: a entrada em sequência (200 ms por item, 50 ms entre eles) e a troca de tela (sai em 120, entra em 200) */
  --t-item:200ms; --t-passo:50ms; --t-sai:120ms; --t-entra:200ms;
  --curva-entra:cubic-bezier(.2,.8,.2,1); --curva-sai:cubic-bezier(.4,0,1,1);
}

/* o painel: o nome em cima, o Max em pé sobre a sombra, a frase e, embaixo, as fichas (entrada) ou os passos (boas-vindas) */
.pm{min-height:0;display:grid;place-items:center;padding:var(--e8) var(--e12);background:var(--acento-tinta);overflow:hidden}
.pm-pilha{display:grid;justify-items:center;text-align:center;gap:var(--e4);width:100%;max-width:400px}
/* o logo L1b + N1 (escolha de Alan, 04/11): o nome embaixo do Max, em letra pixel (logo.js da Arte Slime); o texto fica para o leitor de tela,
   recortado sem overflow (não é uma caixa que rola) */
.pm-logo{display:grid;justify-items:center;position:relative}
.pm-nome{display:block;image-rendering:pixelated}
.pm-sr{position:absolute;left:0;top:0;clip-path:inset(50%);white-space:nowrap;pointer-events:none}
.pm-max{display:grid;justify-items:center}
.pm-slime{display:block;image-rendering:pixelated}
.pm-chao{display:block;image-rendering:pixelated;margin-top:calc(var(--k) * -2px)}
.pm-frase{font-size:var(--fs-tela);line-height:var(--lh-tela);font-weight:600;margin:0;max-width:360px;text-wrap:balance}
.pm-fichas{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--e2)}
.pm-chip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 var(--e3);border-radius:999px;background:var(--sup);box-shadow:inset 0 0 0 1px var(--borda);font-size:var(--fs-sec)}
.pm-chip svg,.pm-passos svg{width:18px;height:18px;color:var(--acento);flex:none}
/* os passos (boas-vindas): o estado vai escrito; só o passo atual troca de cor */
.pm-passos{list-style:none;margin:0;padding:0;display:grid;gap:var(--e1);width:100%;max-width:320px;text-align:left}
.pm-passos li{display:flex;align-items:center;gap:var(--e3);height:32px;padding:0 var(--e2);border-radius:var(--r-ctl);font-size:var(--fs-corpo);color:var(--suave);
  transition:background-color var(--t-entra) var(--curva-entra),color var(--t-entra) var(--curva-entra)}
.pm-passos .m{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;flex:none;font-size:var(--fs-leg);font-weight:700;box-shadow:inset 0 0 0 1.5px currentColor;
  transition:background-color var(--t-entra) var(--curva-entra)}
.pm-passos .m svg{width:12px;height:12px;color:currentColor}
.pm-passos li.feito{color:var(--texto)} .pm-passos li.feito .m{background:var(--sucesso);color:var(--sup);box-shadow:none}
.pm-passos li[aria-current]{color:var(--acento);font-weight:600;background:color-mix(in srgb,var(--acento) 10%,transparent)}
.pm-passos li[aria-current] .m{background:var(--acento);color:var(--sobre-acento);box-shadow:none}
.pm-passos .est{margin-left:auto;font-size:var(--fs-leg);font-weight:400;color:var(--suave)}
.pm-passo-linha{display:none;margin:0;font-size:var(--fs-sec);color:var(--suave)}
.pm-passo-linha b{color:var(--acento)}
/* celular: o painel vira o alto da tela (o nome e o Max de 64; nas boas-vindas, a linha do passo) */
@media (max-width:899px){
  .pm{flex:none;padding:var(--e4) var(--e4) var(--e3);place-items:center}
  .pm-pilha{gap:var(--e2)}
  .pm-frase,.pm-fichas,.pm-passos{display:none}
  .pm-passo-linha{display:block}
}

/* a troca de tela: as telas ocupam a mesma célula, e a coluna não muda de lugar (nada empurra o layout) */
.pm-form{display:grid;width:100%;max-width:380px;align-content:start}
.pm-form.larga{max-width:520px}
.pm-form > section{grid-area:1/1;min-width:0}

/* movimento: Animado sobe 6 px e aparece; Reduzido só muda a opacidade (e o Max fica parado); Desligado: nada se mexe */
@keyframes pm-entra{from{opacity:0;transform:translateY(6px)}}
@keyframes pm-aparece{from{opacity:0}}
@keyframes pm-sai{to{opacity:0}}
[data-mov="animado"] .seq > *{animation:pm-entra var(--t-item) var(--curva-entra) both;animation-delay:calc(var(--i) * var(--t-passo))}
[data-mov="reduzido"] .seq > *{animation:pm-aparece var(--t-item) linear both;animation-delay:calc(var(--i) * var(--t-passo))}
.pm-form > section.sem-toque{pointer-events:none} /* sem toque durante a entrada (o painel_marca.js tira o .sem-toque no fim) */
[data-mov="animado"] .pm-form > section.entra{animation:pm-entra var(--t-entra) var(--curva-entra) both;animation-delay:60ms}
[data-mov="reduzido"] .pm-form > section.entra{animation:pm-aparece var(--t-entra) linear both;animation-delay:60ms}
[data-mov="animado"] .pm-form > section.sai,[data-mov="reduzido"] .pm-form > section.sai{animation:pm-sai var(--t-sai) var(--curva-sai) both;pointer-events:none}
[data-mov="desligado"] *{animation:none!important;transition:none!important}