/* ============================================================
   Melhor Passagem · CRM — Camada PLASMA (opt-in, aditiva)
   ------------------------------------------------------------
   Um fundo VIVO: ondas de cor da marca que se dobram devagar,
   desenhadas pela placa de vídeo (WebGL) em ds-plasma.js.

   ONDE entra, e só aqui:
     1. a TELA DE ENTRADA (#tela-login) — a primeira impressão do
        sistema, e o único momento em que ninguém está operando;
     2. a faixa "QUEM EMBARCA" do Meu placar (.adv-hero) — o bloco
        índigo escuro do Início, bem discreto, atrás dos cartões.

   ONDE NÃO entra, de propósito: tabela, cartão de número, modal,
   lateral e PAPEL. Fundo que se mexe atrás de número é ruído, e
   o CRM é lido o dia inteiro.

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

   Ele se apaga sozinho, sem ninguém pedir, quando: a aba sai da
   frente, o bloco sai da tela, o navegador não tem WebGL, a pessoa
   pediu "menos animação" no sistema, o aparelho avisa que está
   economizando dados/bateria, ou a máquina é fraca. Nesses casos
   sobra o degradê parado daqui de baixo — que já é bonito.

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

@media screen {

/* ════════════════════════════════════════════════════════════
   TOKENS — a paleta do plasma é a da marca: azul-noite de fundo,
   índigo e azul de marca nas cristas, e o âmbar das milhas como
   acento raro (o mesmo papel que ele tem no resto do sistema).
   ════════════════════════════════════════════════════════════ */
body.ds-plasma {
  --ds-plasma-fundo:  #071231;
  --ds-plasma-c1:     #0f2a6b;
  --ds-plasma-c2:     #2f56d8;
  --ds-plasma-c3:     #5b62d6;
  --ds-plasma-acento: #d99b2b;
}

/* ════════════════════════════════════════════════════════════
   A TELA — o mesmo <canvas> nos dois lugares. Sempre no fundo da
   pilha e sem pegar clique: é papel de parede, não interface.
   ════════════════════════════════════════════════════════════ */
.ds-plasma-tela {
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block;
  border:0;
  pointer-events:none;
  opacity:0;                      /* entra desbotando: nada "pisca" ao abrir */
  transition:opacity .9s ease;
}
.ds-plasma-tela.aceso { opacity:1; }

/* ────────────────────────────────────────────────────────────
   1) TELA DE ENTRADA — o plasma toma a janela inteira, por trás
   do cartão. O degradê fica no próprio fundo: se o WebGL não
   subir, a tela continua sendo esta, só que parada.
   ──────────────────────────────────────────────────────────── */
#ds-plasma-fundo {
  position:fixed; inset:0; z-index:0;
  overflow:hidden;
  pointer-events:none;
  background:
    radial-gradient(1200px 780px at 18% 12%,  color-mix(in srgb, var(--ds-plasma-c2) 55%, transparent), transparent 62%),
    radial-gradient(1000px 900px at 84% 78%,  color-mix(in srgb, var(--ds-plasma-c3) 45%, transparent), transparent 60%),
    radial-gradient(760px 620px at 62% 26%,   color-mix(in srgb, var(--ds-plasma-acento) 16%, transparent), transparent 58%),
    var(--ds-plasma-fundo);
}

/* um véu escuro no miolo, por cima do plasma: é ele que garante o
   branco do nome da marca legível em QUALQUER quadro da animação
   (as cristas claras passam por ali) e, de quebra, põe o foco no
   cartão de entrada. Fica no ::after para não brigar com o canvas. */
#ds-plasma-fundo::after {
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(820px 560px at 50% 40%, rgba(3,10,30,.58), rgba(3,10,30,.18) 62%, transparent 78%);
}

/* `ds-plasma-entrada` é posta pelo ds-plasma.js NO MOMENTO em que o
   fundo escuro entra atrás da tela de entrada — e tirada quando ele
   sai. Tudo que depende de haver escuro atrás mora sob ela: se o
   arquivo de script não rodar, a entrada fica igual ao que era.

   O conteúdo do login sobe uma camada e ganha contraste de tela
   escura. O visual novo pinta o #tela-login de cinza-claro e o nome
   da marca de azul-escuro: sobre o plasma isso vira uma caixa
   apagada com texto ilegível, então aqui os dois viram vidro e
   branco. `body.ds-plasma` basta para ganhar do `.ds-advanced`. */
body.ds-plasma-entrada #tela-login {
  position:relative; z-index:1;
  background:transparent;
  /* no celular o cartão encostava nas duas bordas: com o plasma atrás,
     esse respiro deixa o fundo emoldurar a entrada */
  padding-inline:16px;
}
body.ds-plasma-entrada #tela-login .logo-login,
body.ds-plasma-entrada #tela-login .logo-login .logo-nome-marca { color:#fff; }
body.ds-plasma-entrada #tela-login .logo-login span,
body.ds-plasma-entrada #tela-login .logo-login #marca-legenda-login {
  color:rgba(255,255,255,.78);
  text-shadow:0 1px 10px rgba(3,10,30,.5);
}
body.ds-plasma-entrada #tela-login .logo-login .logo-nome-marca {
  text-shadow:0 2px 18px rgba(3,10,30,.55);
}
body.ds-plasma-entrada #tela-login .logo-login .logo-marca {
  box-shadow:0 18px 44px rgba(3,10,30,.55);
}
/* o cartão continua sólido e claro: campo de senha se lê, sempre */
body.ds-plasma-entrada #tela-login .card {
  box-shadow:0 30px 80px rgba(3,10,30,.45);
  border-color:rgba(255,255,255,.28);
}

/* ────────────────────────────────────────────────────────────
   2) FAIXA "QUEM EMBARCA" — aqui o plasma é tempero. Ele entra
   POR CIMA do índigo do .adv-hero com mistura de tela e opacidade
   baixa (o ds-plasma.js pede intensidade menor ao shader), então
   as rotas pontilhadas e os cartões brancos continuam mandando.
   O overflow:hidden e o raio já são do .adv-hero.
   ──────────────────────────────────────────────────────────── */
body.ds-plasma .adv-hero > .ds-plasma-tela {
  mix-blend-mode:screen;
  z-index:0;
}
body.ds-plasma .adv-hero.aceso { will-change:auto; }
body.ds-plasma .adv-hero > .ds-plasma-tela.aceso { opacity:.62; }
/* tudo que é conteúdo do hero fica acima da tela do plasma */
body.ds-plasma .adv-hero > *:not(.ds-plasma-tela) { position:relative; z-index:1; }

/* ────────────────────────────────────────────────────────────
   MENOS ANIMAÇÃO — quem pediu isso no sistema recebe o degradê
   parado. O ds-plasma.js nem chega a criar o canvas.
   ──────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ds-plasma-tela { display:none !important; }
}

} /* @media screen */

/* ════════════════════════════════════════════════════════════
   PAPEL — fatura, bilhete, voucher e roteiro saem do CRM por
   aqui. Nada de plasma na impressão (e sem `screen` na regra de
   cima isto já mordeu a fatura antes).
   ════════════════════════════════════════════════════════════ */
@media print {
  #ds-plasma-fundo, .ds-plasma-tela { display:none !important; }
}