/* Hub do cliente · Fundação visual e linguagem de movimento — Design System DevSecOps Pointer v1.0
   Carregar depois de css/pointer.css. Regras da casa: só transform e opacity são animados; nenhum estilo em linha;
   respeita prefers-reduced-motion, o atributo data-movimento="reduzido" e o controle "Pausar movimento"
   (data-pausa="ativa" no <html>), exigido pelo eMAG / WCAG 2.2.2 para movimento automático acima de 5 s. */

/* 1. Tokens de movimento ------------------------------------------------------------------------------------------- */
:root {
  --dur-instantaneo: 100ms;   /* pressionar */
  --dur-rapido: 160ms;        /* borda de hover, realce */
  --dur-medio: 240ms;         /* elevação do cartão, saída dos demais cartões */
  --dur-lento: 420ms;         /* entrada de cartão e de texto */
  --dur-cena: 640ms;          /* linha de parceria */
  --dur-micro: 900ms;         /* micro-interação de ícone */
  --dur-saida: 420ms;         /* do clique à navegação */
  --dur-mascote: 2700ms;      /* entrada do mascote */
  --dur-respiracao: 5200ms;   /* repouso: respiração */
  --dur-orelha: 9000ms;       /* repouso: intervalo do movimento de orelha */
  --dur-brilho: 28s;          /* gradiente do cabeçalho */
  --dur-padrao: 90s;          /* padrão diagonal: 240 px por ciclo */

  --curva-padrao: cubic-bezier(.2, 0, 0, 1);        /* mudança de estado */
  --curva-entrada: cubic-bezier(0, 0, .2, 1);       /* o que chega à tela */
  --curva-saida: cubic-bezier(.4, 0, 1, 1);         /* o que sai da tela */
  --curva-enfase: cubic-bezier(.3, 0, 0, 1);        /* gesto principal: linha, cortina, cão se acomodando */
  --curva-mola: cubic-bezier(.34, 1.45, .64, 1);    /* micro-interação com leve ultrapassagem */
  --curva-respiracao: cubic-bezier(.45, 0, .55, 1); /* ciclos contínuos */

  --atraso-heroi: 120ms;
  --atraso-cartoes: 480ms;
  --atraso-rodape: 900ms;
  --cascata: 70ms;            /* entre cartões */
  --cascata-texto: 60ms;      /* entre linhas do herói */
  --cascata-micro: 60ms;      /* entre partes de um ícone */

  --desloc-entrada: 16px;
  --desloc-elevacao: -4px;
  --desloc-saida: 8px;
}

/* 2. Cabeçalho: gradiente e padrão diagonal em movimento lento ---------------------------------------------------- */
.hub-container { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.hub-cabecalho { position: relative; overflow: hidden; isolation: isolate; background: var(--azul-700, #00056D);
  color: var(--branco, #FFFFFF); }
.hub-cabecalho-fundo { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.hub-brilho { position: absolute; width: 1200px; height: 1200px; border-radius: 50%; will-change: transform, opacity; }
.hub-brilho--a { top: -760px; right: -420px;
  background: radial-gradient(closest-side, rgba(20, 68, 211, .9), rgba(20, 68, 211, 0));
  animation: hub-brilho-a var(--dur-brilho) var(--curva-respiracao) infinite alternate; }
.hub-brilho--b { bottom: -900px; left: -520px;
  background: radial-gradient(closest-side, rgba(88, 199, 237, .18), rgba(88, 199, 237, 0));
  animation: hub-brilho-b calc(var(--dur-brilho) * 1.3) var(--curva-respiracao) infinite alternate; }
@keyframes hub-brilho-a { from { transform: translate3d(0, 0, 0) scale(1); opacity: .8; }
  to { transform: translate3d(-220px, 90px, 0) scale(1.1); opacity: 1; } }
@keyframes hub-brilho-b { from { transform: translate3d(0, 0, 0); opacity: .6; }
  to { transform: translate3d(260px, -70px, 0); opacity: 1; } }

.hub-topo { position: relative; overflow: hidden; }
.hub-padrao { position: absolute; top: -240px; left: -240px; right: 0; bottom: 0; pointer-events: none;
  background: url("../img/padrao-diagonal-tile-240-transparente.png") repeat;
  animation: hub-padrao var(--dur-padrao) linear infinite; will-change: transform; }
@keyframes hub-padrao { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(240px, 240px, 0); } }
.hub-topo-conteudo { position: relative; display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding-top: 22px; padding-bottom: 22px; }

/* Logotipo montado: mascote (SVG em linha) + nome (recorte do arquivo oficial). 227 + 440 = 667 px do logotipo. */
.hub-marca { display: inline-flex; align-items: center; height: 48px; text-decoration: none; }
.hub-marca .pm-mascote { display: block; height: 100%; width: auto; }
.hub-marca-nome { display: block; height: 100%; width: auto; }
.hub-cliente { font-family: var(--mono, "JetBrains Mono", Consolas, "Courier New", monospace); font-weight: 500;
  font-size: 14px; letter-spacing: .16em; color: var(--texto-sobre-escuro, #C9D3F2); }
@media (max-width: 760px) { .hub-marca { height: 36px; } }

/* Linha laranja de parceria: 4 px, largura total, desenha da esquerda para a direita uma vez */
.hub-linha-parceria { display: block; height: 4px; background: var(--parceiro-acento, #FC6D26); transform-origin: 0 50%; }
[data-hub-cena="entrada"] .hub-linha-parceria { animation: hub-linha var(--dur-cena) var(--curva-enfase) 200ms backwards; }
@keyframes hub-linha { from { transform: scaleX(0); } }

/* Herói: entra em cascata curta */
.hub-heroi { position: relative; padding: 48px 0 56px; }
.hub-heroi-item:nth-child(2) { --ordem: 1; }
.hub-heroi-item:nth-child(3) { --ordem: 2; }
.hub-heroi-item:nth-child(4) { --ordem: 3; }
[data-hub-cena="entrada"] .hub-heroi-item { animation: hub-sobe var(--dur-lento) var(--curva-entrada) backwards;
  animation-delay: calc(var(--atraso-heroi) + var(--ordem, 0) * var(--cascata-texto)); }
@keyframes hub-sobe { from { opacity: 0; transform: translate3d(0, 10px, 0); } }

/* 3. Mascote -------------------------------------------------------------------------------------------------------- */
.pm-mascote { overflow: visible; }
.pm-mascote g, .pm-mascote use { transform-box: view-box; transform-origin: 0 0; }
/* repouso: respiração quase imperceptível + orelha a cada 9 s */
.pm-mascote[data-estado="repouso"] .pm-superior { animation: pm-respira var(--dur-respiracao) var(--curva-respiracao) infinite; }
.pm-mascote[data-estado="repouso"] .pm-orelha { animation: pm-orelha var(--dur-orelha) linear 1.2s infinite; }
@keyframes pm-respira { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(0, -.55px); } }
@keyframes pm-orelha {
  0%, 84%, 100% { transform: translate(189px, 33px) rotate(0deg) translate(-189px, -33px); }
  86% { transform: translate(189px, 33px) rotate(-7deg) translate(-189px, -33px); }
  88% { transform: translate(189px, 33px) rotate(2deg) translate(-189px, -33px); }
  90% { transform: translate(189px, 33px) rotate(-4deg) translate(-189px, -33px); }
  93% { transform: translate(189px, 33px) rotate(0deg) translate(-189px, -33px); }
}

/* 4. Cartões das áreas: entrada, hover, foco, pressionar ---------------------------------------------------------- */
.hub-grade { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.hub-grade > li:nth-child(2) { --ordem: 1; }
.hub-grade > li:nth-child(3) { --ordem: 2; }
.hub-grade > li:nth-child(4) { --ordem: 3; }
.hub-grade > li:nth-child(5) { --ordem: 4; }
.hub-grade > li:nth-child(n+6) { --ordem: 5; }
[data-hub-cena="entrada"] .hub-grade > li { animation: hub-entra var(--dur-lento) var(--curva-entrada) backwards;
  animation-delay: calc(var(--atraso-cartoes) + var(--ordem, 0) * var(--cascata)); }
@keyframes hub-entra { from { opacity: 0; transform: translate3d(0, var(--desloc-entrada), 0); } }

.hub-area { position: relative; display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 24px;
  border: 1px solid var(--borda-200, #E5E7EB); border-radius: var(--raio-card, 24px); background: var(--branco, #FFFFFF);
  color: var(--grafite-900, #0E0F0F); text-decoration: none; font-family: var(--fonte, Urbanist, Aptos, Calibri, Arial, sans-serif);
  transition: transform var(--dur-medio) var(--curva-padrao); }
.hub-area::after { content: ""; position: absolute; inset: -1px; border: 2px solid var(--ciano-400, #58C7ED);
  border-radius: inherit; opacity: 0; transition: opacity var(--dur-rapido) linear; pointer-events: none; }
.hub-area-icone { display: block; width: 48px; height: 48px; color: var(--azul-500, #1444D3); }
.hub-area-icone svg { display: block; width: 100%; height: 100%; overflow: visible; }
.hub-area-titulo { font-size: 21px; font-weight: 600; line-height: 1.2; margin-top: 6px; }
.hub-area-texto { font-size: 15px; line-height: 1.5; color: var(--texto-secundario, #4A4F5C); }
.hub-area-rodape { margin-top: auto; padding-top: 10px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.hub-area-acesso { font-family: var(--mono, "JetBrains Mono", Consolas, "Courier New", monospace); font-weight: 500;
  font-size: 12px; letter-spacing: .06em; white-space: nowrap; border-radius: 999px; padding: 3px 12px; background: var(--tonal-azul, #E8EDFB);
  color: var(--azul-700, #00056D); }
.hub-area-seta { display: block; width: 24px; height: 24px; color: var(--azul-500, #1444D3);
  transition: transform var(--dur-medio) var(--curva-padrao); }
.hub-area-seta svg { display: block; width: 100%; height: 100%; }
@media (hover: hover) {
  .hub-area:hover { transform: translate3d(0, var(--desloc-elevacao), 0); }
  .hub-area:hover::after { opacity: 1; }
  .hub-area:hover .hub-area-seta { transform: translate3d(4px, 0, 0); }
}
.hub-area:focus-visible { outline: 3px solid var(--azul-500, #1444D3); outline-offset: 3px;
  transform: translate3d(0, var(--desloc-elevacao), 0); }
.hub-area:focus-visible::after { opacity: 1; }
.hub-area:focus-visible .hub-area-seta { transform: translate3d(4px, 0, 0); }
.hub-area:active { transform: translate3d(0, -1px, 0) scale(.985); transition-duration: var(--dur-instantaneo); }

/* 5. Micro-interações dos ícones (disparadas por data-micro="ativo", que o script põe no hover e no foco) --------- */
.ic g, .ic line, .ic path, .ic circle, .ic polyline { transform-box: view-box; transform-origin: 0 0; }

/* Diagnóstico e levantamento: a lupa percorre o documento e as linhas acendem em sequência */
[data-micro="ativo"] .ic-diagnostico .ic-lupa { animation: ic-lupa var(--dur-micro) var(--curva-padrao); }
[data-micro="ativo"] .ic-diagnostico .ic-realce-1 { animation: ic-realce-1 var(--dur-micro) linear; }
[data-micro="ativo"] .ic-diagnostico .ic-realce-2 { animation: ic-realce-2 var(--dur-micro) linear; }
[data-micro="ativo"] .ic-diagnostico .ic-realce-3 { animation: ic-realce-3 var(--dur-micro) linear; }
@keyframes ic-lupa { 0%, 100% { transform: translate(0, 0); } 28% { transform: translate(-5.5px, -7.5px); }
  52% { transform: translate(-6px, -4.2px); } 74% { transform: translate(-6.5px, -1px); } }
@keyframes ic-realce-1 { 0%, 14%, 50%, 100% { opacity: 0; } 24%, 38% { opacity: 1; } }
@keyframes ic-realce-2 { 0%, 38%, 72%, 100% { opacity: 0; } 48%, 60% { opacity: 1; } }
@keyframes ic-realce-3 { 0%, 60%, 94%, 100% { opacity: 0; } 70%, 82% { opacity: 1; } }

/* Capacitação: o capelo sobe e assenta; a borla balança como pêndulo */
[data-micro="ativo"] .ic-capacitacao .ic-capelo { animation: ic-capelo var(--dur-micro) var(--curva-padrao); }
[data-micro="ativo"] .ic-capacitacao .ic-borla { animation: ic-borla var(--dur-micro) var(--curva-respiracao); }
@keyframes ic-capelo {
  0%, 100% { transform: translate(12px, 13.5px) rotate(0deg) translate(-12px, -13.5px); }
  30% { transform: translate(12px, 11.3px) rotate(-6deg) translate(-12px, -13.5px); }
  55% { transform: translate(12px, 13.8px) rotate(1.5deg) translate(-12px, -13.5px); }
  72% { transform: translate(12px, 13.2px) rotate(-1deg) translate(-12px, -13.5px); }
}
@keyframes ic-borla {
  0%, 100% { transform: translate(21.5px, 9px) rotate(0deg) translate(-21.5px, -9px); }
  30% { transform: translate(21.5px, 9px) rotate(-10deg) translate(-21.5px, -9px); }
  55% { transform: translate(21.5px, 9px) rotate(22deg) translate(-21.5px, -9px); }
  72% { transform: translate(21.5px, 9px) rotate(-12deg) translate(-21.5px, -9px); }
  86% { transform: translate(21.5px, 9px) rotate(6deg) translate(-21.5px, -9px); }
}

/* Painel DORA: as quatro barras (as quatro métricas) sobem em cascata a partir da base */
[data-micro="ativo"] .ic-dora .ic-barra { animation: ic-barra 560ms linear backwards; }
[data-micro="ativo"] .ic-dora .ic-barra-2 { animation-delay: calc(var(--cascata-micro) * 1); }
[data-micro="ativo"] .ic-dora .ic-barra-3 { animation-delay: calc(var(--cascata-micro) * 2); }
[data-micro="ativo"] .ic-dora .ic-barra-4 { animation-delay: calc(var(--cascata-micro) * 3); }
@keyframes ic-barra {
  0% { transform: translate(0, 17.5px) scale(1, 1) translate(0, -17.5px); animation-timing-function: cubic-bezier(.4, 0, 1, 1); }
  22% { transform: translate(0, 17.5px) scale(1, .4) translate(0, -17.5px); animation-timing-function: cubic-bezier(.34, 1.45, .64, 1); }
  100% { transform: translate(0, 17.5px) scale(1, 1) translate(0, -17.5px); }
}

/* Chamados (suporte): o balão pulsa, uma onda sai dele e os pontos piscam como quem digita */
[data-micro="ativo"] .ic-chamados .ic-balao { animation: ic-balao 560ms var(--curva-padrao); }
[data-micro="ativo"] .ic-chamados .ic-pulso { animation: ic-pulso 760ms var(--curva-entrada); }
[data-micro="ativo"] .ic-chamados .ic-ponto { animation: ic-ponto var(--dur-micro) linear backwards; }
[data-micro="ativo"] .ic-chamados .ic-ponto-2 { animation-delay: 90ms; }
[data-micro="ativo"] .ic-chamados .ic-ponto-3 { animation-delay: 180ms; }
@keyframes ic-balao {
  0%, 100% { transform: translate(12px, 12px) scale(1) translate(-12px, -12px); }
  35% { transform: translate(12px, 12px) scale(1.07) translate(-12px, -12px); }
  65% { transform: translate(12px, 12px) scale(.98) translate(-12px, -12px); }
}
@keyframes ic-pulso {
  0% { opacity: .55; transform: translate(12px, 12px) scale(1) translate(-12px, -12px); }
  100% { opacity: 0; transform: translate(12px, 12px) scale(1.38) translate(-12px, -12px); }
}
@keyframes ic-ponto { 0%, 40%, 80%, 100% { opacity: 1; } 20%, 60% { opacity: .2; } }

/* Onboarding do cliente: a trilha acende etapa por etapa e a bandeira tremula na chegada */
[data-micro="ativo"] .ic-onboarding .ic-luz-1 { animation: ic-luz-1 var(--dur-micro) var(--curva-padrao); }
[data-micro="ativo"] .ic-onboarding .ic-luz-2 { animation: ic-luz-2 var(--dur-micro) var(--curva-padrao); }
[data-micro="ativo"] .ic-onboarding .ic-bandeira { animation: ic-bandeira var(--dur-micro) var(--curva-respiracao); }
@keyframes ic-luz-1 {
  0% { opacity: 0; transform: translate(5px, 18px) scale(.2) translate(-5px, -18px); }
  14% { opacity: 1; transform: translate(5px, 18px) scale(1.25) translate(-5px, -18px); }
  24%, 84% { opacity: 1; transform: translate(5px, 18px) scale(1) translate(-5px, -18px); }
  100% { opacity: 0; transform: translate(5px, 18px) scale(1) translate(-5px, -18px); }
}
@keyframes ic-luz-2 {
  0%, 22% { opacity: 0; transform: translate(11px, 18px) scale(.2) translate(-11px, -18px); }
  36% { opacity: 1; transform: translate(11px, 18px) scale(1.25) translate(-11px, -18px); }
  46%, 84% { opacity: 1; transform: translate(11px, 18px) scale(1) translate(-11px, -18px); }
  100% { opacity: 0; transform: translate(11px, 18px) scale(1) translate(-11px, -18px); }
}
@keyframes ic-bandeira {
  0%, 44%, 100% { transform: translate(17.5px, 7.25px) scale(1, 1) translate(-17.5px, -7.25px); }
  58% { transform: translate(17.5px, 7.25px) scale(.7, 1) translate(-17.5px, -7.25px); }
  72% { transform: translate(17.5px, 7.25px) scale(1.06, 1) translate(-17.5px, -7.25px); }
  86% { transform: translate(17.5px, 7.25px) scale(.88, 1) translate(-17.5px, -7.25px); }
}

/* 6. Saída ao clicar numa área: os demais cartões saem e uma cortina azul-700 com o padrão cobre a tela —
      o mesmo fundo do cabeçalho dos sites de destino, para a troca de página parecer contínua --------------------- */
.hub-cortina { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; pointer-events: none;
  background: var(--azul-700, #00056D) url("../img/padrao-diagonal-tile-240.png") repeat; color: var(--branco, #FFFFFF);
  transform: translate3d(0, 101%, 0); }
.hub-cortina--quadro { position: absolute; z-index: 5; }
.hub-cortina-conteudo { display: grid; justify-items: center; gap: 10px; padding: 0 24px; text-align: center; opacity: 0; }
.hub-cortina-rotulo { font-family: var(--mono, "JetBrains Mono", Consolas, "Courier New", monospace); font-weight: 500;
  font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: var(--ciano-400, #58C7ED); }
.hub-cortina-nome { font-family: var(--fonte, Urbanist, Aptos, Calibri, Arial, sans-serif); font-weight: 700;
  font-size: 40px; line-height: 1.1; letter-spacing: -.02em; }

/* 7. Rodapé de parceria e controle de pausa ------------------------------------------------------------------------- */
[data-hub-cena="entrada"] .hub-rodape { animation: hub-aparece var(--dur-lento) linear var(--atraso-rodape) backwards; }
@keyframes hub-aparece { from { opacity: 0; } }
.hub-selo { display: block; height: 44px; width: auto; padding: 11px; box-sizing: content-box; } /* respiro = 25% da altura */
.hub-pausa { display: inline-flex; align-items: center; gap: 8px; font: 600 13px var(--fonte, Urbanist, Aptos, Calibri, Arial, sans-serif);
  color: var(--azul-500, #1444D3); background: var(--branco, #FFFFFF); border: 1px solid var(--borda-200, #E5E7EB);
  border-radius: 999px; padding: 6px 14px 6px 10px; cursor: pointer; }
.hub-pausa:hover { background: var(--tonal-azul, #E8EDFB); }
.hub-pausa:focus-visible { outline: 3px solid var(--azul-500, #1444D3); outline-offset: 2px; }
.hub-pausa svg { width: 16px; height: 16px; display: block; }
.hub-pausa .hub-pausa-retomar { display: none; }
:root[data-pausa="ativa"] .hub-pausa .hub-pausa-pausar { display: none; }
:root[data-pausa="ativa"] .hub-pausa .hub-pausa-retomar { display: block; }

/* 8. Pausar movimento: congela tudo o que se move sozinho (fundo, gradiente, repouso do mascote) ---------------- */
:root[data-pausa="ativa"] .hub-padrao,
:root[data-pausa="ativa"] .hub-brilho,
:root[data-pausa="ativa"] .pm-mascote g { animation-play-state: paused !important; }

/* 9. Reduzir movimento: nada se desloca; o cão fica na pose do logotipo; estados de hover e foco ficam só na borda */
@media (prefers-reduced-motion: reduce) {
  .hub-padrao, .hub-brilho, .hub-linha-parceria, .hub-heroi-item, .hub-grade > li, .hub-rodape,
  .pm-mascote, .pm-mascote g, .pm-mascote use, .ic g, .ic line, .ic path, .ic circle { animation: none !important; }
  .hub-area, .hub-area::after, .hub-area-seta { transition: none !important; }
  .hub-area:hover, .hub-area:focus-visible, .hub-area:active,
  .hub-area:hover .hub-area-seta, .hub-area:focus-visible .hub-area-seta { transform: none !important; }
}
:root[data-movimento="reduzido"] .hub-padrao, :root[data-movimento="reduzido"] .hub-brilho,
:root[data-movimento="reduzido"] .hub-linha-parceria, :root[data-movimento="reduzido"] .hub-heroi-item,
:root[data-movimento="reduzido"] .hub-grade > li, :root[data-movimento="reduzido"] .hub-rodape,
:root[data-movimento="reduzido"] .pm-mascote, :root[data-movimento="reduzido"] .pm-mascote g,
:root[data-movimento="reduzido"] .pm-mascote use, :root[data-movimento="reduzido"] .ic g,
:root[data-movimento="reduzido"] .ic line, :root[data-movimento="reduzido"] .ic path,
:root[data-movimento="reduzido"] .ic circle { animation: none !important; }
:root[data-movimento="reduzido"] .hub-area, :root[data-movimento="reduzido"] .hub-area::after,
:root[data-movimento="reduzido"] .hub-area-seta { transition: none !important; }
:root[data-movimento="reduzido"] .hub-area:hover, :root[data-movimento="reduzido"] .hub-area:focus-visible,
:root[data-movimento="reduzido"] .hub-area:active, :root[data-movimento="reduzido"] .hub-area:hover .hub-area-seta,
:root[data-movimento="reduzido"] .hub-area:focus-visible .hub-area-seta { transform: none !important; }