/* ==========================================================================
   03 — LAYOUT
   Camadas de fundo, contêiner e utilitários de texto.
   ========================================================================== */

/* ---------- camadas de fundo (contínuas, sem corte duro de cor) ---------- */
#bg{position:fixed;inset:0;z-index:var(--z-bg);pointer-events:none}

.aura{position:fixed;inset:0;z-index:var(--z-bg);pointer-events:none;
  background:
    radial-gradient(58% 44% at 80% 6%, rgba(212,175,55,.12), transparent 62%),
    radial-gradient(50% 40% at 10% 44%, rgba(199,201,209,.05), transparent 62%),
    radial-gradient(66% 50% at 58% 90%, rgba(212,175,55,.08), transparent 66%);
  mix-blend-mode:screen;transition:background .6s ease;}

.grain{position:fixed;inset:0;z-index:var(--z-fx);pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

.vignette{position:fixed;inset:0;z-index:var(--z-fx);pointer-events:none;
  background:radial-gradient(120% 80% at 50% 40%, transparent 55%, rgba(0,0,0,.55) 100%);}

/* ---------- conteúdo acima do canvas ---------- */
.wrap{position:relative;z-index:var(--z-content)}
.container{max-width:var(--maxw);margin:0 auto;padding:0 28px}

/* Ritmo vertical de toda seção, em qualquer página.
   Estava repetido nos três arquivos de página. Mora aqui porque é decisão
   de layout do site inteiro, não de uma página. Breakpoint em
   06-responsive.css. */
section{padding:84px 0;position:relative}

/* ---------- utilitários: texto metálico ---------- */
.gold-text{background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.silver-text{background:var(--silver-grad);-webkit-background-clip:text;background-clip:text;color:transparent}


/* ==========================================================================
   ARCO DE LUZ
   Um horizonte luminoso atrás do topo da página. É a peça que dá identidade
   e a primeira coisa que a pessoa vê.

   Como funciona: um radial-gradient em elipse ancorado na base do elemento
   desenha um anel. Como só a metade de cima cabe na caixa, o que aparece é
   um arco. A máscara vertical apaga a parte de baixo, então as pontas do
   arco (que ficam mais embaixo) somem sozinhas e o brilho se concentra no
   centro. Sem filter:blur em elemento grande, que é caro de pintar.

   Ajuste por página com as variáveis, não editando o gradiente:
     --arco-topo   distância do topo
     --arco-alt    altura da caixa, controla a abertura do arco
     --arco-forca  0 a 1, intensidade do brilho
   ========================================================================== */
.arco{
  --arco-topo:44px;
  --arco-alt:300px;
  --arco-forca:1;

  position:absolute;
  top:var(--arco-topo);
  left:50%;
  transform:translateX(-50%);
  width:min(880px,124vw);
  height:var(--arco-alt);
  z-index:0;
  pointer-events:none;

  background:
    /* fio luminoso do arco */
    radial-gradient(ellipse 50% 46% at 50% 100%,
      transparent 0 70%,
      rgba(247,231,166,calc(.95 * var(--arco-forca))) 71.4%,
      rgba(212,175,55,calc(.45 * var(--arco-forca))) 73.6%,
      transparent 82%),
    /* halo difuso acima do fio */
    radial-gradient(ellipse 66% 60% at 50% 100%,
      rgba(212,175,55,calc(.17 * var(--arco-forca))),
      transparent 62%);

  /* O ápice do arco fica por volta de 68% da altura da caixa, porque a elipse
     está ancorada na base. A máscara precisa ser OPACA até passar do ápice e
     só então apagar: as pernas do arco descem, e é isso que faz o brilho se
     concentrar no centro em vez de virar uma elipse fechada. */
  -webkit-mask-image:linear-gradient(to bottom,#000 0 72%,rgba(0,0,0,.5) 86%,transparent 98%);
  mask-image:linear-gradient(to bottom,#000 0 72%,rgba(0,0,0,.5) 86%,transparent 98%);
}

/* Variante sem fio, só o halo. É a das páginas internas.

   O fio do arco é uma linha, e linha atravessando texto é defeito. Ele
   depende de espaço livre acima do conteúdo, e isso só existe no hero: nas
   internas o conteúdo começa logo abaixo da nav, e no artigo ele ainda é
   alinhado à esquerda enquanto o arco é centrado, então a perna do arco
   sobra no vazio. Aqui fica só a luz difusa, que não tem borda para colidir
   com nada e funciona com o texto em qualquer alinhamento. */
.arco-suave{
  --arco-alt:420px;
  width:min(1050px,140vw);

  /* Mancha centrada, não ancorada na base.

     Ancorada na base o degradê tem uma subida longa até desaparecer, e essa
     cauda ia parar atrás da logo, no topo. Centrada, a luz fica contida
     dentro da própria caixa e dá para posicionar exatamente atrás do título
     mexendo só em --arco-topo. */
  background:radial-gradient(ellipse 62% 58% at 50% 50%,
    rgba(212,175,55,calc(.2 * var(--arco-forca))),
    transparent 70%);

  -webkit-mask-image:none;
  mask-image:none;
}


/* o conteúdo precisa subir acima do arco */
.acima-do-arco{position:relative;z-index:1}


/* ==========================================================================
   GRADE DE PONTOS
   Textura de fundo para blocos de dado. Dá contexto de painel sem competir
   com o conteúdo. A máscara evita a borda dura da grade cortada.
   ========================================================================== */
.pontos{
  background-image:radial-gradient(rgba(212,175,55,.17) 1px, transparent 1px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,#000 30%,transparent 78%);
  mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,#000 30%,transparent 78%);
}