/* brand-names.css (v62) — coloração dos NOMES (LAxy · Live · Quant · DAXV · Dashboard).
   As letras usam o MESMO espectro das molduras dos posts 3D do cyberspace: hsl(h) → hsl(h + r) → hsl(h),
   100% de saturação, com a mesma volta de 6 s (o anel dos posts gira em 6 s; aqui o espectro corre pela palavra).
   Cada nome ganha uma das paletas reais dos posts:
     · LAxy         → arco-íris cheio  (moldura do post aberto / raridade 3): h 165, r 300
     · Live         → ciano → azul     (raridade 1):                          h 180, r 90
     · Quant        → azul → violeta → rosa (raridade 2):                     h 235, r 125
   Para trocar a cor de um nome, mude só os 3 números da paleta abaixo.
   Uso: <span class="nm nm-laxy|nm-live|nm-quant|nm-daxv|nm-dashboard|nm-evolution">Nome</span>  — ou data-nm="laxy|live|quant|daxv|dashboard|evolution" num ancestral
   (o nav-hub.js usa data-nm no <a> e a classe .nm no rótulo).
   Letras soltas do LAxy (que caem uma a uma): <span class="nm nm-laxy nm-l" style="--p0:33.333%">x</span>. */

/* paletas = molduras dos posts 3D (--ring-h / --ring-r / --ring-s / --ring-l do cyberspace) */
.nm-laxy,  [data-nm="laxy"]  { --nh: 165; --nr: 300; --nsl: 100% 68%; }
.nm-live,  [data-nm="live"]  { --nh: 180; --nr: 90;  --nsl: 100% 62%; }
.nm-quant, [data-nm="quant"] { --nh: 235; --nr: 125; --nsl: 100% 70%; }
.nm-daxv,  [data-nm="daxv"]  { --nh: 25;  --nr: 100; --nsl: 100% 62%; }
.nm-dashboard, [data-nm="dashboard"] { --nh: 300; --nr: 75; --nsl: 100% 70%; }   /* violeta → magenta → rosa */
.nm-evolution, [data-nm="evolution"] { --nh: 100; --nr: 70; --nsl: 100% 62%; }   /* verde-limão → verde → turquesa */
.nm-radar,     [data-nm="radar"]     { --nh: 40;  --nr: 330; --nsl: 100% 64%; }  /* Radar: âmbar → laranja → vermelho */
.nm-comparador, [data-nm="comparador"] { --nh: 255; --nr: 80; --nsl: 100% 70%; }  /* Comparador: índigo → azul → ciano */
.nm-risco,     [data-nm="risco"]     { --nh: 350; --nr: 60;  --nsl: 100% 66%; }  /* Risco: carmim → laranja → âmbar */
.nm-dca,       [data-nm="dca"]       { --nh: 140; --nr: 90;  --nsl: 100% 60%; }  /* DCA: verde → turquesa → azul */
.nm-scorecard, [data-nm="scorecard"] { --nh: 62;  --nr: 330; --nsl: 100% 62%; }  /* Scorecard: ouro → âmbar → coral */
.nm-swot,      [data-nm="swot"]      { --nh: 316; --nr: 70;  --nsl: 100% 70%; }  /* SWOT: magenta → rosa → coral */
.nm-status,    [data-nm="status"]    { --nh: 140; --nr: 80;  --nsl: 100% 55%; }  /* LAxy Status: verde → turquesa */
.nm-backtest,  [data-nm="backtest"]  { --nh: 175; --nr: 90;  --nsl: 100% 55%; }  /* Backtest: turquesa → azul */
.nm-projecao,  [data-nm="projecao"]  { --nh: 300; --nr: 120; --nsl: 100% 68%; }  /* Projeção: magenta → violeta → azul */
.nm-otimizador,[data-nm="otimizador"]{ --nh: 50;  --nr: 110; --nsl: 100% 58%; }  /* Otimizador: âmbar → verde */
.nm-journal,   [data-nm="journal"]   { --nh: 88;  --nr: 100; --nsl: 100% 60%; }  /* Journal: lima → verde → turquesa */
.nm-fluent,    [data-nm="fluent"]    { --nh: 270; --nr: 190; --nsl: 100% 70%; }  /* Fluent: violeta → azul → ciano */
.nm-doc,       [data-nm="doc"]       { --nh: 212; --nr: 170; --nsl: 100% 66%; }  /* LAxy Doc: azul de documento → ciano */
.nm-chat,      [data-nm="chat"]      { --nh: 22;  --nr: 300; --nsl: 100% 66%; }  /* Chat: coral → rosa → violeta */
.nm-aistore,   [data-nm="aistore"]   { --nh: 35;  --nr: 290; --nsl: 100% 66%; }  /* cinema: âmbar/ouro → rubi → magenta → violeta */
.nm-sobre,     [data-nm="sobre"]     { --nh: 200; --nr: 260; --nsl: 100% 70%; }  /* Sobre = manual: azul-céu → lilás */
.nm-code,      [data-nm="code"]      { --nh: 165; --nr: 300; --nsl: 100% 68%; }  /* Code = a antiga home: mesma paleta do LAxy */

/* As 13 paradas do espectro (sobe e volta ao início, sem emenda) — UMA fonte só,
   reusada no texto (.nm, linear) e na moldura (.lx-logo, cônica). Resolve por elemento:
   cada --nh/--nr/--nsl acima gera a sua paleta. Mudar a curva aqui muda tudo de uma vez. */
.nm, .lx-logo {
  --lx-spectrum:
    hsl(var(--nh) var(--nsl)),
    hsl(calc(var(--nh) + var(--nr) * .166667) var(--nsl)),
    hsl(calc(var(--nh) + var(--nr) * .333333) var(--nsl)),
    hsl(calc(var(--nh) + var(--nr) * .5) var(--nsl)),
    hsl(calc(var(--nh) + var(--nr) * .666667) var(--nsl)),
    hsl(calc(var(--nh) + var(--nr) * .833333) var(--nsl)),
    hsl(calc(var(--nh) + var(--nr)) var(--nsl)),
    hsl(calc(var(--nh) + var(--nr) * .833333) var(--nsl)),
    hsl(calc(var(--nh) + var(--nr) * .666667) var(--nsl)),
    hsl(calc(var(--nh) + var(--nr) * .5) var(--nsl)),
    hsl(calc(var(--nh) + var(--nr) * .333333) var(--nsl)),
    hsl(calc(var(--nh) + var(--nr) * .166667) var(--nsl)),
    hsl(var(--nh) var(--nsl));
}

@keyframes nmFlow  { to { background-position: 200% 0; } }                                   /* tile 200% → 1 volta */
@keyframes nmFlowL { from { background-position: var(--p0, 0%) 0; }                          /* letras: tile 400% */
                     to   { background-position: calc(var(--p0, 0%) + 133.333%) 0; } }

html .nm {
  /* 13 paradas do espectro: ver --lx-spectrum (fonte única) */
  background-image: linear-gradient(90deg, var(--lx-spectrum));
  background-size: 200% 100%;
  background-repeat: repeat-x;
  background-position: 0 0;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: none !important;          /* sombra por trás do texto "suja" o recorte do gradiente */
  animation: nmFlow 6s linear infinite;
  animation-delay: var(--nd, 0s);
}
html .nm.nm-l { background-size: 400% 100%; background-position: var(--p0, 0%) 0; animation-name: nmFlowL; }

/* nav-hub: ícone, ponto e brilho do item atual acompanham a cor do nome */
.hub-bar .hub-it[data-nm], .hub-dock .hub-it[data-nm] { color: hsl(calc(var(--nh) + var(--nr) * .3333) var(--nsl)); }
.hub-bar .hub-it[data-nm][aria-current] svg, .hub-dock .hub-it[data-nm][aria-current] svg { filter: drop-shadow(0 0 4px hsl(calc(var(--nh) + var(--nr) * .3333) 100% 60% / .7)); }
.hub-bar .hub-it[data-nm] .hub-dot { background: hsl(calc(var(--nh) + var(--nr) * .3333) var(--nsl)); box-shadow: 0 0 6px hsl(calc(var(--nh) + var(--nr) * .3333) var(--nsl)); }

/* celular / sem mouse / reduzir movimento: as cores ficam, o espectro para (mesma política dos anéis) */
/* celular: animações ligadas como no computador (pedido do LAxy); fora da tela elas pausam sozinhas (mobile-perf.js) */
@media (prefers-reduced-motion: reduce)  { html .nm, html .nm.nm-l { animation: none; } }


/* ===== v63 · identidade LAxy no index: logo, botões e BETA com o mesmo espectro e a mesma animação do nome =====
   Tudo reaproveita as variáveis da paleta .nm-laxy (--nh / --nr / --nsl) e o fluxo nmFlow de 6 s:
   mudar os 3 números da paleta lá em cima recolore nome, logo, botões e anéis de uma vez.
     · .nm.lx-fill → o mesmo gradiente fluindo, mas preenchendo a caixa (botão / etiqueta) com texto preto
     · .lx-logo    → moldura = espectro em conic-gradient girando 6 s (igual ao anel dos posts) + 2 facetas
                     (clara e escura) recortadas por máscara e preenchidas pelo mesmo fluxo das letras
     · .lx-ghost / .lx-glow → botão vazado e brilho do botão branco, no tom médio do espectro (--lx-h) */
.nm-laxy, [data-nm="laxy"] { --lx-h: calc(var(--nh) + var(--nr) * .3333); }

html .lx-fill { -webkit-background-clip: border-box; background-clip: border-box; color: #000; -webkit-text-fill-color: #000; }
html .lx-glow { box-shadow: 0 8px 24px -6px hsl(var(--lx-h) 100% 66% / .45); }
html .lx-ghost { color: hsl(var(--lx-h) 100% 70%); border-color: hsl(var(--lx-h) 100% 66% / .5); }
html .lx-ghost:hover { border-color: hsl(var(--lx-h) 100% 70%); box-shadow: 0 0 18px -4px hsl(var(--lx-h) 100% 66% / .5); }

@property --lx-ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes lxSpin  { to { --lx-ang: 360deg; } }
@keyframes lxPulse {
  0%, 100% { box-shadow: 0 0 10px hsl(var(--lx-h) 100% 66% / .25); }
  50%      { box-shadow: 0 0 22px hsl(var(--lx-h) 100% 66% / .55), 0 0 30px hsl(var(--lx-h) 100% 66% / .22); }
}
.lx-logo {
  position: relative; isolation: isolate; flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px;
  background: hsl(var(--lx-h) 100% 66% / .08);
  animation: lxPulse 3.4s ease-in-out infinite;
}
.lx-logo::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--lx-ang), var(--lx-spectrum));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: lxSpin 6s linear infinite;
}
.lx-facet { position: absolute; inset: 6px; display: block; -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
.lx-facet-l { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'%3E%3Cpolygon points='50.69,17.69 24.97,78.29 50.69,71.22'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'%3E%3Cpolygon points='50.69,17.69 24.97,78.29 50.69,71.22'/%3E%3C/svg%3E"); }
.lx-facet-r { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'%3E%3Cpolygon points='50.69,17.69 50.69,71.22 71.03,65.63'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'%3E%3Cpolygon points='50.69,17.69 50.69,71.22 71.03,65.63'/%3E%3C/svg%3E"); }
@media (prefers-reduced-motion: reduce) { .lx-logo, .lx-logo::before { animation: none; } }
/* desempenho: fora da tela (mobile-perf.js marca .perf-off) a moldura e o pulso pausam. */
.lx-logo.perf-off, .lx-logo.perf-off::before { animation-play-state: paused; }


/* ===== v64 · .lx-tcolor — o MESMO espectro do nome, mas correndo no TEMPO (o texto inteiro muda de cor em 6 s).
   Serve para textos cujas palavras já têm animação própria (ex.: as frases que entram palavra por palavra abaixo do logo):
   background-clip:text não enxerga filhos animados, e .nm sobrescreveria a animação deles; aqui só a cor do pai muda. ===== */
@keyframes lxColor {
  0% { color: hsl(calc(var(--nh) + var(--nr) * 0) var(--nsl)); }
  8.333% { color: hsl(calc(var(--nh) + var(--nr) * 0.166667) var(--nsl)); }
  16.667% { color: hsl(calc(var(--nh) + var(--nr) * 0.333333) var(--nsl)); }
  25% { color: hsl(calc(var(--nh) + var(--nr) * 0.5) var(--nsl)); }
  33.333% { color: hsl(calc(var(--nh) + var(--nr) * 0.666667) var(--nsl)); }
  41.667% { color: hsl(calc(var(--nh) + var(--nr) * 0.833333) var(--nsl)); }
  50% { color: hsl(calc(var(--nh) + var(--nr) * 1) var(--nsl)); }
  58.333% { color: hsl(calc(var(--nh) + var(--nr) * 0.833333) var(--nsl)); }
  66.667% { color: hsl(calc(var(--nh) + var(--nr) * 0.666667) var(--nsl)); }
  75% { color: hsl(calc(var(--nh) + var(--nr) * 0.5) var(--nsl)); }
  83.333% { color: hsl(calc(var(--nh) + var(--nr) * 0.333333) var(--nsl)); }
  91.667% { color: hsl(calc(var(--nh) + var(--nr) * 0.166667) var(--nsl)); }
  100% { color: hsl(calc(var(--nh) + var(--nr) * 0) var(--nsl)); }
}
html .lx-tcolor { color: hsl(var(--lx-h) 100% 72%); animation: lxColor 6s linear infinite; }

@media (prefers-reduced-motion: reduce)  { html .lx-tcolor { animation: none; } }