/* ============================================================
   Melhor Passagem · CRM — camada EMBARALHA (opt-in, aditiva)
   ------------------------------------------------------------
   O nome da marca se monta letra por letra quando a TELA DE
   ENTRADA aparece, como o painel de um aeroporto girando até
   parar na palavra certa.

   É a ideia do @spell/special-text reescrita aqui. O original é
   React + `motion/react` + Tailwind v4 (`h-4.5`), embaralha com
   "_!X$0-+*#", ignora "reduzir movimento" e entrega a sopa de
   símbolos ao leitor de tela. Nada disso passa no CRM. Aqui:
     · JS puro, zero dependência, nada de React;
     · alfabeto A-Z/0-9 (painel de embarque, não terminal hacker),
       e o ESPAÇO nunca embaralha — "MELHOR PASSAGEM" continua
       sendo duas palavras durante a animação inteira;
     · a largura é MEDIDA e travada antes do primeiro quadro, então
       a fonte proporcional da casa não faz o logo pular;
     · quem lê por leitor de tela recebe o texto real, parado, e
       nunca o embaralhado (ver .ds-embaralha-real abaixo);
     · "reduzir movimento" = o texto já nasce escrito.

   ONDE entra, e só aqui: a tela de entrada, pela mesma razão do
   ds-plasma e do ds-letreiro — é o único momento em que ninguém
   está operando. Dentro do sistema, nada se mexe: número que
   embaralha é número que a pessoa lê errado.

   Três níveis de reversão, todos instantâneos:
     1. tirar a classe `ds-embaralha` do <body> do console.html;
     2. tirar o <link> deste arquivo e o <script> do ds-embaralha.js;
     3. quem usa: localStorage `crm-embaralha` = "0" naquele navegador.
   ============================================================ */

/* A caixa do texto. `pre` para o espaço não colapsar enquanto as
   letras ainda não chegaram; a largura em px vem do JS, medida do
   texto final, para a palavra não empurrar o resto do logo. */
.ds-embaralha-caixa {
  display: inline-block;
  white-space: pre;
  text-align: center;
}

/* O que o leitor de tela lê: o texto de verdade, fora da tela mas
   dentro da árvore de acessibilidade (não é display:none). O span
   que dança ao lado é aria-hidden. */
.ds-embaralha-real {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Enquanto gira, a letra fica um tom mais apagada: o olho entende
   que aquilo ainda não é a palavra. currentColor, então segue o
   tema e o fundo do plasma sem repetir cor nenhuma. */
.ds-embaralha-caixa .girando {
  opacity: .55;
}

/* Quem pediu menos movimento não vê nada girar — o JS nem começa,
   e isto aqui é a rede de segurança caso ele tenha começado. */
@media (prefers-reduced-motion: reduce) {
  .ds-embaralha-caixa .girando { opacity: 1; }
}