/* AS TRILHAS DE FUNDO em todas as telas (16/10/2026, pedido do Alexandre: "quero que o desenho
   animado apareça em todas as telas, mesmo que de fundo").

   O desenho mora em src/marca/trilhasDeFundo.ts (as páginas levam a cópia exata); aqui só a posição,
   as cores e o movimento. Ele fica preso no canto da janela, ATRÁS de tudo (z-index -1): aparece no
   vão entre os cartões e some debaixo de qualquer superfície, então nunca disputa com texto.

   O fundo é do Alê MCP: numa instalação vestida com a marca de outra casa (MARCA_DIR, a Lab) ele sai,
   e a casa continua com o estilo e as cores dela, que é o combinado. */

/* ---------------------------------------------------------------------------------------------
   1. AS CORES. Mais apagadas que as da página inicial: aqui o desenho é fundo, não ilustração.
   O console e o relatório (Órbita) são escuros nos dois temas do sistema, então lá vale sempre a
   versão escura.
   --------------------------------------------------------------------------------------------- */
:root {
  --fundo-trilha: #d6ddf4;
  --fundo-ponta: #b7c4ec;
  --fundo-plugue: #bfcaf0;
  --fundo-pulso: rgba(59, 102, 238, 0.55);
}
@media (prefers-color-scheme: dark) {
  :root {
    --fundo-trilha: #1b2446;
    --fundo-ponta: #2b3869;
    --fundo-plugue: #283464;
    --fundo-pulso: rgba(111, 141, 255, 0.6);
  }
}
:root:has(link[href="/orbita.css"]) {
  --fundo-trilha: #1d2045;
  --fundo-ponta: #2e3368;
  --fundo-plugue: #2a2f62;
  --fundo-pulso: rgba(111, 141, 255, 0.6);
}

/* ---------------------------------------------------------------------------------------------
   2. ONDE FICA: no canto de baixo à direita, saindo um pouco da janela, do mesmo tamanho em
   qualquer rolagem. Na página inicial vai para o canto de baixo à esquerda, espelhado, porque o
   canto de cima à direita já é das trilhas do título.
   --------------------------------------------------------------------------------------------- */
.ale-fundo {
  position: fixed; z-index: -1; pointer-events: none;
  right: -7vmin; bottom: -9vmin;
  width: clamp(300px, 58vmin, 680px); height: auto; aspect-ratio: 1;
}
.landing .ale-fundo { right: auto; left: -7vmin; width: clamp(260px, 40vmin, 480px); transform: scaleX(-1); }
/* Tela de celular: o texto ocupa a largura toda e passa por cima do desenho, então ele encolhe e
   apaga mais, para nunca disputar com a leitura. */
@media (max-width: 600px) {
  .ale-fundo, .landing .ale-fundo { width: 240px; opacity: 0.55; }
}

/* ---------------------------------------------------------------------------------------------
   3. O MOVIMENTO, igual ao da página inicial: um pulso sai do plugue por cada fio e acende a ponta
   quando chega, um fio de cada vez. Mais lento (8 s) para não chamar o olho no meio do trabalho.
   --------------------------------------------------------------------------------------------- */
.ale-fundo .trilha { fill: none; stroke: var(--fundo-trilha); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.ale-fundo .plugue { fill: none; stroke: var(--fundo-plugue); stroke-width: 5; }
.ale-fundo .fenda { fill: var(--fundo-plugue); animation: fundo-fenda 8s ease-in-out infinite; }
.ale-fundo .ponta { color: var(--fundo-ponta); animation: fundo-ponta 8s ease-out infinite; }
.ale-fundo .ponta.anel { fill: none; stroke: currentColor; stroke-width: 2.5; }
.ale-fundo .ponta.cheia { fill: currentColor; }
.ale-fundo .pulso {
  fill: none; stroke: var(--fundo-pulso); stroke-width: 3.5; stroke-linecap: round;
  stroke-dasharray: 10 200; stroke-dashoffset: 10;
  animation: fundo-pulso 8s linear infinite;
}

/* Oito fios, oito partidas: 1 s entre uma e outra, então sempre há um pulso no caminho. */
.ale-fundo .f2 { animation-delay: 1s; }
.ale-fundo .f3 { animation-delay: 2s; }
.ale-fundo .f4 { animation-delay: 3s; }
.ale-fundo .f5 { animation-delay: 4s; }
.ale-fundo .f6 { animation-delay: 5s; }
.ale-fundo .f7 { animation-delay: 6s; }
.ale-fundo .f8 { animation-delay: 7s; }

@keyframes fundo-pulso {
  0% { stroke-dashoffset: 10; }
  30% { stroke-dashoffset: -100; }
  100% { stroke-dashoffset: -100; }
}
@keyframes fundo-ponta {
  0%, 27% { color: var(--fundo-ponta); }
  31% { color: var(--fundo-pulso); }
  52%, 100% { color: var(--fundo-ponta); }
}
@keyframes fundo-fenda {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

/* ---------------------------------------------------------------------------------------------
   4. QUANDO SAI OU PARA.
   --------------------------------------------------------------------------------------------- */
/* Quem pediu menos movimento ao sistema vê as trilhas paradas, sem pulso. */
@media (prefers-reduced-motion: reduce) {
  .ale-fundo .pulso { display: none; }
  .ale-fundo .ponta, .ale-fundo .fenda { animation: none; }
}
/* No papel o fundo só gastaria tinta: o relatório impresso sai limpo. */
@media print {
  .ale-fundo { display: none; }
}
/* Instalação vestida com a marca de outra casa (MARCA_DIR): o desenho é do Alê MCP, então ele sai. */
:root[data-marca] .ale-fundo { display: none; }