/* ════════════════════════════════════════════════════════════
   Melhor Passagem · CRM — camada DECOLAGEM (opt-in, aditiva)
   ------------------------------------------------------------
   Enquanto a pessoa digita o e-mail na tela de entrada, saem da
   ponta do texto uns emojis de viagem que sobem, giram devagar,
   caem e desbotam. É o @spell/exploding-input reescrito sem
   React (ver ~/.claude/snippets/spell-ui-exploding-input.tsx).

   UM lugar, só: o campo de E-MAIL da tela de entrada. Não no
   campo de senha (o efeito publicaria o ritmo e a quantidade de
   teclas para quem estiver olhando de lado) e não dentro do
   sistema — a régua do ds-plasma e do ds-letreiro: coisa que se
   mexe perto de número é ruído.

   Este arquivo não tem @keyframes: quem move cada emoji é o
   ds-decolagem.js, quadro a quadro, porque é física (velocidade
   + gravidade), não um caminho fixo. O CSS aqui só posiciona a
   camada, dá o tamanho do emoji e garante que ela nunca pegue
   um clique.

   Desligar naquele navegador: DSDecolagem.desligarNesteNavegador()
   Desligar para todo mundo:   tirar a classe ds-decolagem do <body>,
                               ou este <link> e o <script> do JS.
   ════════════════════════════════════════════════════════════ */

@media screen {

/* ── a camada ──────────────────────────────────────────────────
   Fica presa à JANELA, não ao campo. O componente original punha
   as partículas dentro de um container 0×0 ao lado do input — e
   aí qualquer ancestral com overflow:hidden as decepava (era por
   isso que o demo dele precisava de `z-index:50`). Aqui elas
   nascem em coordenadas de tela: nada corta, nada empurra o
   layout, nenhuma barra de rolagem aparece.

   z-index 3: acima do card da entrada (1) e do letreiro (1),
   abaixo de qualquer modal do CRM (70 e 80). */
#ds-decolagem {
  position:fixed; inset:0;
  z-index:3;
  pointer-events:none;      /* nunca rouba um toque no "Entrar" */
  overflow:hidden;          /* emoji que voa para fora não cria rolagem */
  contain:strict;           /* o que acontece aqui não repagina a tela */
}

/* ── cada emoji ────────────────────────────────────────────────
   O transform inteiro (posição, escala, giro) é escrito pelo JS
   a cada quadro; aqui fica só o que não muda. `will-change` põe
   cada um na sua camada de composição: o navegador move sem
   redesenhar a tela de entrada por baixo. */
#ds-decolagem .particula {
  position:absolute; left:0; top:0;
  font-size:26px; line-height:1;
  user-select:none;
  will-change:transform, opacity;
  transform-origin:50% 50%;
  /* emoji herda a fonte do sistema para não depender da fonte da
     casa (Be Vietnam Pro não tem glifo de emoji) */
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
}

@media (max-width:640px) {
  /* no celular a tela é menor e o teclado come metade dela:
     emoji grande demais vira poluição em cima do campo */
  #ds-decolagem .particula { font-size:20px; }
}

/* ── quem pediu menos animação ─────────────────────────────────
   Aqui, ao contrário do letreiro, não sobra nada parado para ver:
   sem movimento o efeito simplesmente não existe. O JS já nem
   monta a camada; esta regra é o cinto de segurança. */
@media (prefers-reduced-motion: reduce) {
  #ds-decolagem { display: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
   — a armadilha do media query sem `screen`, de 09/ago.)
   ════════════════════════════════════════════════════════════ */
@media print {
  #ds-decolagem { display:none !important; }
}