/* ============================================================
   Melhor Passagem · CRM — Camada LETREIRO (opt-in, aditiva)
   ------------------------------------------------------------
   Uma tira de destinos que atravessa a base da TELA DE ENTRADA,
   devagar, como o painel de embarque de um aeroporto. É a ideia
   do @spell/marquee reescrita aqui: nada de React, nada de
   `<style jsx>` — e, ao contrário do original, a velocidade mora
   numa variável POR INSTÂNCIA (--ds-letreiro-tempo), então duas
   tiras na mesma página nunca se atropelariam.

   ONDE entra, e só aqui: a tela de entrada, o único momento em
   que ninguém está operando. Dentro do sistema — tabela, placar,
   modal, papel — nada se mexe, pela mesma razão do ds-plasma.css.

   O conteúdo é DECORATIVO e público: código de aeroporto e nome
   de cidade, os destinos que a agência mais emite. Nenhum nome de
   cliente, nenhuma data, nenhuma chamada de API (a tela de entrada
   é anterior ao login e assim deve continuar).

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

   Ele sai de cena sozinho quando: a pessoa pediu "menos animação"
   (fica parado, sem sumir), a janela é baixa demais, alguém toca
   num campo do login (o teclado do celular sobe e a tira desce) e
   no papel.

   Regra da casa preservada: todo hex vive no bloco de tokens.
   ============================================================ */

@media screen {

/* ════════════════════════════════════════════════════════════
   TOKENS — dois contrastes, porque a entrada tem dois fundos:
   com o plasma atrás (escuro) e sem ele (claro).
   ════════════════════════════════════════════════════════════ */
body.ds-letreiro {
  --ds-letreiro-codigo:  #4a5b74;   /* entrada clara, sem plasma */
  --ds-letreiro-cidade:  #8494a9;
  --ds-letreiro-risco:   rgba(74,91,116,.28);
  --ds-letreiro-tempo:   90s;       /* recalculado pelo JS pela largura real */
  --ds-letreiro-altura:  56px;
}
body.ds-letreiro.ds-plasma-entrada {
  --ds-letreiro-codigo:  rgba(255,255,255,.80);
  --ds-letreiro-cidade:  rgba(255,255,255,.46);
  --ds-letreiro-risco:   rgba(255,255,255,.26);
}

/* ════════════════════════════════════════════════════════════
   A TIRA — encostada na base da janela, largura inteira, acima
   do plasma e abaixo do cartão de entrada. Nunca pega clique:
   é cenário, não interface (e é isso que protege o botão
   "Entrar" se o teclado do celular empurrar a tela).
   ════════════════════════════════════════════════════════════ */
#ds-letreiro {
  position:fixed; left:0; right:0; bottom:0; z-index:1;
  height:var(--ds-letreiro-altura);
  display:flex; align-items:center;
  overflow:hidden;
  pointer-events:none;
  user-select:none;
  /* o esfumaçado das pontas — o `fade` do marquee original, aqui
     em máscara de opacidade (não é cor, então não tem tema) */
  -webkit-mask-image:linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
          mask-image:linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
  opacity:0;
  transform:translateY(8px);
  transition:opacity .9s ease, transform .5s ease;
}
/* `aceso` é posto pelo JS depois de medir: entra desbotando, sem piscar */
#ds-letreiro.aceso { opacity:1; transform:none; }

/* alguém tocou num campo do login: a tira desce e sai da frente
   do teclado do celular, e volta sozinha quando o campo é solto */
body.ds-letreiro-recuado #ds-letreiro {
  opacity:0;
  transform:translateY(100%);
}

/* ── a trilha ────────────────────────────────────────────────
   O truque do loop sem emenda, que veio do @spell/marquee: os
   itens são escritos DUAS vezes e a trilha anda até -50% — no
   instante em que a segunda cópia chega onde a primeira começou,
   a animação reinicia e ninguém vê a emenda. */
#ds-letreiro .trilha {
  display:flex;
  flex:0 0 auto;
  width:max-content;
  align-items:center;
  animation:ds-letreiro-rola var(--ds-letreiro-tempo) linear infinite;
}
@keyframes ds-letreiro-rola {
  from { transform:translateX(0); }
  to   { transform:translateX(-50%); }
}

/* ── cada destino ───────────────────────────────────────────── */
#ds-letreiro .destino {
  display:flex; align-items:baseline; gap:8px;
  padding:0 18px;
  white-space:nowrap;
}
#ds-letreiro .destino .codigo {
  font-size:15px; font-weight:800; letter-spacing:.18em;
  color:var(--ds-letreiro-codigo);
  font-variant-numeric:tabular-nums;
}
#ds-letreiro .destino .cidade {
  font-size:11.5px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ds-letreiro-cidade);
}
/* o risquinho entre um destino e o outro, no lugar de um ícone:
   currentColor-like, some junto com o resto quando o tema muda */
#ds-letreiro .destino + .destino::before {
  content:"";
  width:4px; height:4px; border-radius:50%;
  background:var(--ds-letreiro-risco);
  margin-right:18px; margin-left:-18px;
  align-self:center;
}

/* ── celular ─────────────────────────────────────────────────
   Tira mais baixa e itens mais juntos; em janela baixa (paisagem
   no celular, teclado aberto) ela simplesmente não aparece. */
@media (max-width:760px) {
  body.ds-letreiro { --ds-letreiro-altura:46px; }
  #ds-letreiro .destino { padding:0 13px; }
  #ds-letreiro .destino .codigo { font-size:13px; }
  #ds-letreiro .destino .cidade { font-size:10px; }
}
@media (max-height:560px) {
  #ds-letreiro { display:none !important; }
}

/* ── menos animação ──────────────────────────────────────────
   Quem pediu isso no sistema recebe o letreiro PARADO, não uma
   tela vazia: a tira continua ali, só não anda. */
@media (prefers-reduced-motion: reduce) {
  #ds-letreiro .trilha { animation:none !important; }
}

} /* @media screen */

/* ════════════════════════════════════════════════════════════
   PAPEL — fatura, bilhete, voucher e roteiro não levam cenário.
   (Sem o `screen` lá em cima esta regra já mordeu a fatura antes.)
   ════════════════════════════════════════════════════════════ */
@media print {
  #ds-letreiro { display:none !important; }
}