/* ============================================================
   entrada-afluente.css — a ARTE do Afluente nas telas de entrar (28/10/2026, pedido do Diego: "uma página de login mais bonita e
   que combine com a ideia do Afluente que desenvolvemos no manual de marca").

   Vem DEPOIS do entrada.css do kit (que continua igual nos dois produtos: cartão, campos, botões, avisos e rodapé de ajuda).
   Este arquivo é só do Afluente: o painel com os afluentes chegando ao símbolo (marca/afluente-fluxos.svg), a logo e o slogan.
   A marcação vem de entradaMarca() (backend/enderecos.php): o <div class="af-arte"> mora dentro do cartão e, na tela larga, fica
   fixo do lado esquerdo; na tela estreita, vira a faixa do alto do próprio cartão. Cores do manual da marca: #FF5000, #0F0F0F,
   #212121, #EAEAEA e #F2F2F2.
   ============================================================ */
:root{--af-painel:#0F0F0F;--af-frase:#F2F2F2;--af-apoio:#9D9FA1;--af-largura:min(52vw,760px)}
html[data-tema="claro"]{--af-painel:#EAEAEA;--af-frase:#0F0F0F;--af-apoio:#4B4B4B}

.af-arte{position:fixed;top:0;bottom:0;left:0;width:var(--af-largura);background:var(--af-painel);overflow:hidden;z-index:0}
.af-arte::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46%;background:linear-gradient(to bottom,transparent,var(--af-painel) 78%);pointer-events:none}
.af-fluxos{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right center}
.af-logo{position:absolute;top:40px;left:48px;height:30px;width:auto;z-index:1}
.af-logo-escuro{display:none}
html[data-tema="claro"] .af-logo-claro{display:none}
html[data-tema="claro"] .af-logo-escuro{display:block}
.af-frase{position:absolute;left:48px;right:48px;bottom:92px;max-width:560px;font-size:40px;line-height:46px;font-weight:600;letter-spacing:-.025em;color:var(--af-frase);text-wrap:balance;z-index:1}
.af-frase em{font-style:normal;color:#FF5000;white-space:nowrap}
.af-apoio{position:absolute;left:48px;right:48px;bottom:52px;max-width:460px;font-size:14px;line-height:20px;color:var(--af-apoio);z-index:1}

/* a página: o cartão fica no lado direito, longe do painel */
body:has(.af-arte){padding-left:calc(var(--af-largura) + 20px);background:radial-gradient(700px 480px at 76% -10%,var(--brand-brilho),transparent 62%),var(--paper);background-color:var(--paper)}
.card:has(.af-arte){position:relative}
.card:has(.af-arte) > .logo{display:none}

/* tela estreita (celular, janela pequena): o painel vira a faixa do alto do cartão */
@media (max-width:960px){
  body:has(.af-arte){padding-left:20px;background:var(--paper)}
  .af-arte{position:relative;top:auto;bottom:auto;left:auto;width:auto;height:184px;margin:-36px -32px 26px;border-radius:19px 19px 0 0}
  .af-arte::after{height:70%}
  .af-logo{top:20px;left:24px;height:24px}
  .af-frase{left:24px;right:24px;bottom:18px;font-size:20px;line-height:26px;max-width:none}
  .af-apoio{display:none}
}
@media (max-width:420px){
  .af-arte{margin:-28px -22px 22px;border-radius:17px 17px 0 0;height:172px}
}

/* ============================================================
   29/10/2026: a CENA da tela larga (desenho escolhido pelo Diego: "opção 2 com desfoque em volta"). Liga só quando o
   entrada-afluente.js marca o <html> com .af-viva (sem o script, fica o painel do A como acima). Fundo escuro único na tela toda;
   o A com os afluentes; o sistema por dentro inclinado em perspectiva à direita (a agência de demonstração, dados inventados); a
   linha do A encosta na borda esquerda dele e ali a cor se espalha (bem devagar, 9 s por ciclo); desfoque suave em volta do
   cartão. A cena é sempre escura, nos dois temas (no claro, o cartão continua branco).
   ============================================================ */
.af-cena,.af-halo{display:none}
@media (min-width:961px){
  html.af-viva body:has(.af-arte){background:#0F0F0F}
  html.af-viva .af-cena{display:block;position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
    background:radial-gradient(1100px 700px at 72% 8%,rgba(255,80,0,.07),transparent 65%),#0F0F0F}
  html.af-viva .af-linhas{position:absolute;inset:0;width:100%;height:100%}
  html.af-viva .af-linhas .f{animation:af-corre 5s linear infinite}
  html.af-viva .af-sistema{position:absolute;top:0;bottom:0;right:0;left:var(--af-largura);perspective:2400px;perspective-origin:30% 40%}
  html.af-viva .af-tela{position:absolute;top:9%;left:14%;width:max(1180px,125%);transform:rotateX(16deg) rotateY(-30deg) rotateZ(5deg);transform-origin:0 40%}
  html.af-viva .af-tela img{display:block;width:100%;height:auto;max-width:none;border-radius:18px;
    -webkit-mask-image:linear-gradient(100deg,#000 55%,transparent 98%);mask-image:linear-gradient(100deg,#000 55%,transparent 98%)}
  html.af-viva .af-veu,html.af-viva .af-contorno{position:absolute;inset:0;border-radius:18px;
    -webkit-mask-image:linear-gradient(100deg,#000 55%,transparent 98%);mask-image:linear-gradient(100deg,#000 55%,transparent 98%)}
  html.af-viva .af-veu{background:linear-gradient(120deg,rgba(15,15,15,.10),rgba(15,15,15,.5))}
  html.af-viva .af-contorno{border:1px solid rgba(255,255,255,.10)}
  html.af-viva .af-marca{position:absolute;left:0;width:1px;height:1px}
  html.af-viva .af-banho{position:absolute;inset:0;border-radius:18px;
    background:radial-gradient(360px 420px at 0 var(--toque,40%),rgba(255,80,0,.20),rgba(255,80,0,.06) 45%,transparent 72%);animation:af-respira 9s ease-in-out infinite}
  html.af-viva .af-fio{position:absolute;left:-1.5px;top:2%;bottom:2%;width:3px;border-radius:3px;
    background:linear-gradient(to bottom,transparent 0,rgba(255,110,40,.9) calc(var(--toque,40%) - 4%),#FFB089 var(--toque,40%),rgba(255,110,40,.9) calc(var(--toque,40%) + 4%),transparent 100%);
    filter:drop-shadow(0 0 8px rgba(255,80,0,.9)) drop-shadow(0 0 20px rgba(255,80,0,.45));
    transform-origin:50% var(--toque,40%);animation:af-espalha 9s ease-in-out infinite}
  html.af-viva .af-halo{display:block;position:fixed;z-index:-1;pointer-events:none;border-radius:80px;background:rgba(15,15,15,.22);
    -webkit-backdrop-filter:blur(9px) saturate(.85);backdrop-filter:blur(9px) saturate(.85);
    -webkit-mask-image:radial-gradient(closest-side,#000 72%,transparent 100%);mask-image:radial-gradient(closest-side,#000 72%,transparent 100%)}
  /* o painel do A some (a cena já desenha o A); a logo e a frase ficam, sempre claras sobre o escuro */
  html.af-viva .af-arte{background:transparent}
  html.af-viva .af-arte::after{display:none}
  html.af-viva .af-fluxos{display:none}
  html.af-viva .af-logo-claro{display:block}
  html.af-viva .af-logo-escuro{display:none}
  html.af-viva .af-frase{color:#F2F2F2}
  html.af-viva .af-apoio{color:#9D9FA1}
  html.af-viva .card:has(.af-arte){box-shadow:0 40px 100px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.04)}
}
@keyframes af-corre{to{stroke-dashoffset:-240}}
@keyframes af-espalha{0%{transform:scaleY(.05);opacity:0}35%{opacity:.9}70%{transform:scaleY(1);opacity:.75}100%{transform:scaleY(1);opacity:0}}
@keyframes af-respira{0%,100%{opacity:.2}50%{opacity:.85}}
@media (prefers-reduced-motion:reduce){.af-linhas .f,.af-fio,.af-banho{animation:none!important}}

/* ============================================================
   29/10/2026: a cena do PAINEL da DataWave (pedido do Diego: a tela SIMPLES fica no painel; a do sistema ao fundo, nas agências).
   Fundo escuro; o A grande com "Painel" embaixo e o cartão lado a lado, no meio da tela; a linha do A encosta no cartão entre os
   dois campos e a cor se espalha pela lateral esquerda dele (9 s por ciclo); a frase logo abaixo do cartão. O entrada-afluente.js
   liga com html.af-viva-painel. O cartão é empurrado para a direita na medida do A + o espaço até ele (200px + 15% da altura da tela,
   a mesma conta do script), para o grupo A + cartão ficar centralizado.
   ============================================================ */
.af-banho-cartao,.af-fio-cartao{display:none}
@media (min-width:961px){
  html.af-viva-painel body:has(.af-arte){padding-left:calc(200px + 15vh);padding-bottom:110px;background:#0F0F0F}
  html.af-viva-painel .af-cena-painel{background:radial-gradient(1100px 700px at 50% 0%,rgba(255,80,0,.05),transparent 65%),#0F0F0F}
  html.af-viva-painel .af-arte{right:0;width:auto;pointer-events:none}
  html.af-viva-painel .af-frase{left:0;right:0;max-width:none;text-align:center;font-size:36px;line-height:42px;top:var(--af-frase-top,auto);bottom:auto}
  html.af-viva-painel .af-frase br{display:none}
  html.af-viva-painel .af-apoio{left:0;right:0;max-width:none;text-align:center;top:calc(var(--af-frase-top,0px) + 54px);bottom:auto}
  html.af-viva-painel .af-rotulo{fill:#F2F2F2;font:600 26px var(--body);letter-spacing:-.01em}
  html.af-viva-painel .card > :not(.af-cena):not(.af-arte):not(.af-halo):not(.af-banho-cartao):not(.af-fio-cartao){position:relative;z-index:1}
  html.af-viva-painel .af-banho-cartao{display:block;position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
    background:radial-gradient(260px 300px at 0 var(--toque,40%),rgba(255,80,0,.17),rgba(255,80,0,.05) 45%,transparent 72%);animation:af-respira 9s ease-in-out infinite}
  html.af-viva-painel .af-fio-cartao{display:block;position:absolute;left:-1.5px;top:0;bottom:0;width:2.5px;border-radius:2px;pointer-events:none;z-index:2;
    background:linear-gradient(to bottom,transparent 0,rgba(255,110,40,.9) calc(var(--toque,40%) - 18px),#FFB089 var(--toque,40%),rgba(255,110,40,.9) calc(var(--toque,40%) + 18px),transparent 100%);
    filter:drop-shadow(0 0 6px rgba(255,80,0,.9)) drop-shadow(0 0 14px rgba(255,80,0,.45));
    transform-origin:50% var(--toque,40%);animation:af-espalha 9s ease-in-out infinite}
}
@media (prefers-reduced-motion:reduce){.af-fio-cartao,.af-banho-cartao{animation:none!important}}