/* ══════════════════════════════════════════════════════════════════════════
   FUNDO — identidade Black Hawk Group

   A marca é monocromática por inteiro: preto, grafite, prata, branco. Nenhum
   acento colorido, em lugar nenhum — é isso que dá o ar de aço do material
   deles. O fundo é feito de três camadas, todas em CSS menos o falcão:

     1. metal escovado   estrias horizontais finíssimas, como o fundo do deck
     2. o falcão         a marca de verdade, extraída do PDF, gigante e quieta
     3. a trama do canto tracinhos na diagonal, do canto superior esquerdo

   O falcão é pintado por MÁSCARA (`mask-image`), não por imagem colorida: a
   mesma peça de 23 KB vira prata no tema escuro e grafite no claro, e ainda
   aceita degradê. Uma peça, dois temas, nenhuma duplicata para divergir.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  /* a paleta do grupo — só cinzas, de propósito */
  --bh-preto:#08080A;--bh-carvao:#121214;--bh-grafite:#1E1F23;
  --bh-aco:#42444B;--bh-prata:#8C9098;--bh-prata-clara:#C6C9CF;
  --bh-gelo:#E9EAEC;--bh-neve:#F6F7F8;

  /* ── tema ESCURO: o padrão, como a capa do material deles ── */
  --f-base:#0A0A0B;          /* chapa ao fundo: L* 3, para a carta (L* 25) ficar 22,6 acima */
  --f-estria-a:rgba(255,255,255,.030);
  --f-estria-b:rgba(255,255,255,.008);
  --f-falcao-1:rgba(255,255,255,.095);
  --f-falcao-2:rgba(255,255,255,.016);
  --f-halo:rgba(190,196,206,.10);
  --f-trama:rgba(255,255,255,.10);
  /* O CHUVISCO. Ruído de televisão fora do ar, gerado por `feTurbulence` num
     SVG de 180px embutido no próprio CSS — sem arquivo, sem pedido de rede.
     Ele não pinta a tela: entra como camada de fundo DENTRO da máscara do
     falcão, então só existe onde o falcão existe. A matriz de cor joga o RGB
     para branco e usa o canal vermelho do ruído como ALFA: o grão fica com a
     cor do tema em vez da cor do ruído. */
  --f-ruido:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1 0 0 0 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23r)' opacity='.16'/%3E%3C/svg%3E");
  /* A PINTURA do falcão. Na chapa preta ele é luz: duas faixas claras com um
     vale entre elas, como aço batendo a luz de lado. */
  --f-pintura:linear-gradient(115deg,
    rgba(255,255,255,.115) 0%, rgba(255,255,255,.022) 34%,
    rgba(255,255,255,.088) 58%, rgba(255,255,255,.016) 100%);

  /* ── A GEOMETRIA DA MARCA, num lugar só ──────────────────────────────────
     A máscara do falcão mora aqui, e não colada no seletor, para quem um dia
     precisar de uma segunda camada recortada pela mesma marca.

     TAMANHO. Mede pela ALTURA, não pela largura: a arte é quase quadrada, e
     medir pela largura deixava a marca pequena em monitor largo. A 112vh ela
     sangrava pelos quatro lados e virava textura — grande demais deixa de ser
     marca. A 74vh ela cabe inteira na tela com respiro, e é a silhueta inteira
     que se reconhece. O `clamp` põe piso e teto: em notebook baixo ela não
     some, em monitor de 4K ela não vira pôster.

     CENTRO. Geométrico, e só. Tentei corrigir pelo centro de MASSA do traço
     (46,9% × 42,2%, porque as penas pesam para a esquerda) e ficou pior: o que
     o olho toma como centro desta marca é a cabeça, não a média das penas, e
     empurrar a arte para a direita afastou as duas coisas. Com a marca inteira
     dentro da tela, centro da caixa é centro — e é o que se lê como centrado. */
  --f-alt:clamp(380px,74vh,820px);
  --f-mask-tam:auto var(--f-alt);
  --f-mask-x:50%;
  --f-mask-y:50%;
}

html{
  background-color:var(--f-base);
  /* metal escovado + halo do canto: as duas camadas planas */
  background-image:
    radial-gradient(120% 80% at 88% -10%, var(--f-halo), transparent 60%),
    repeating-linear-gradient(0deg,
      var(--f-estria-a) 0px, var(--f-estria-a) 1px,
      var(--f-estria-b) 1px, var(--f-estria-b) 2px,
      transparent 2px, transparent 4px);
  background-attachment:fixed;
  background-size:100% 100%, 100% 4px;
}
body{background:transparent;min-height:100dvh}

/* ── o falcão: pintado por máscara, ancorado embaixo à esquerda ──────────── */
html::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  -webkit-mask-image:url(/falcao.png);mask-image:url(/falcao.png);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  /* centralizado: a marca é o eixo da tela, não um enfeite de canto */
  -webkit-mask-size:var(--f-mask-tam);mask-size:var(--f-mask-tam);
  -webkit-mask-position:var(--f-mask-x) var(--f-mask-y);
  mask-position:var(--f-mask-x) var(--f-mask-y);
  /* duas camadas de pintura, ambas recortadas pelo falcão: o CHUVISCO por cima
     e, por baixo, o degradê do bico para a cauda do material impresso */
  background-image:var(--f-ruido),var(--f-pintura);
  background-repeat:repeat,no-repeat;
  background-size:180px 180px,100% 100%;
  /* PARADO (auditoria 14/10/2026). Era um "sinal ruim de televisão" — grão
     pulando, latejo, tranco e varredura — pedido pelo Gustavo em set/2026. Com
     a virada para o premium sóbrio ele deixou a decisão comigo: fundo que pisca
     disputa com o dado durante os 40 minutos de questionário. O efeito antigo
     está no histórico do git (antes do commit da etapa 2 da auditoria). */
  opacity:.55;
}

/* ── a trama do canto: tracinhos na diagonal, sumindo para dentro ───────── */
html::after{
  content:"";position:fixed;top:0;left:0;width:min(46vw,560px);height:min(34vh,340px);
  z-index:-2;pointer-events:none;
  background-image:repeating-linear-gradient(118deg,
    var(--f-trama) 0px, var(--f-trama) 9px, transparent 9px, transparent 26px);
  -webkit-mask-image:radial-gradient(90% 90% at 0% 0%,#000,transparent 72%);
  mask-image:radial-gradient(90% 90% at 0% 0%,#000,transparent 72%);
}

/* ── tema CLARO: prata escovada, falcão em grafite ──────────────────────── */
:root[data-tema="2"], html:has(#tema-2:checked){
  /* O falcão estava com 14% de opacidade sobre um fundo quase branco: virava
     um borrão do tamanho da tela e competia com o conteúdo. No escuro ele pode
     ser ousado porque o fundo é preto; no claro, a mesma presença exige menos
     da metade da tinta. Marca de água é marca d'água: se ela disputa a leitura,
     deixou de ser fundo. */
  --f-base:#BFBFC2;
  --f-estria-a:rgba(255,255,255,.55);
  --f-estria-b:rgba(8,8,10,.016);
  --f-falcao-1:rgba(8,8,10,.068);
  --f-falcao-2:rgba(8,8,10,.012);
  --f-halo:rgba(255,255,255,.55);
  --f-trama:rgba(8,8,10,.07);
  /* no claro o grão é preto: o falcão é tinta escura sobre a prata */
  --f-ruido:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23r)' opacity='.155'/%3E%3C/svg%3E");
  /* Na prata ele não pode ser só tinta escura — tinta chapada sobre prata dá
     carimbo, não metal. Metal é ALTERNÂNCIA: brilho, sombra, brilho. Quatro
     faixas, claras e escuras intercaladas na mesma diagonal das estrias do
     fundo, e o falcão passa a parecer relevo polido em vez de mancha. */
  --f-pintura:linear-gradient(115deg,
    rgba(255,255,255,.34) 0%, rgba(34,38,45,.165) 24%,
    rgba(255,255,255,.30) 46%, rgba(34,38,45,.125) 70%,
    rgba(255,255,255,.22) 100%);
}

@media print{
  html{background:#fff !important}
  html::before,html::after{display:none !important}
}