/* ============================================================
   BRACONARO GROUP — BASE

   O que toda página tem: os tokens, a cena, o menu invisível, o
   controle de pausa, o cubo da marca e a assinatura. Cada página
   acrescenta só o que é dela.

   A regra que sustenta a paleta: BRANCO PURO É RESERVADO PARA A LUZ.
   Só o núcleo do cubo, o item de menu aceso, o nome da marca e a
   face de um cliente iluminado recebem #fff. Todo o resto é cinza.
   É isso que faz o branco significar algo.

   O *respiro* mora em camadas dedicadas que animam apenas `opacity`
   e são promovidas a camada própria, para o compositor resolver o
   quadro sem repintar a tela. `--lux` é o token de intensidade de
   repouso, do qual saem os brilhos que não animam.
   ============================================================ */

:root{
  --breu:     #050506;   /* o fundo */
  --fumo:     #0d0e10;   /* o clarão baixo que levanta o chão da cena */
  --aco:      #8b9199;   /* texto secundário — 5,5:1 sobre o chão iluminado */
  --aceso:    #b9c0c6;   /* texto que a luz alcança — 11,1:1 */
  --lux-cor:  #ffffff;   /* a luz. Reservado. */
  --placa:    #e2e6e9;   /* a face iluminada, onde a cor real do cliente cabe */

  --lux: .86;            /* intensidade de repouso, derivada em tudo */
  --respiro: 5.5s;       /* um relógio só: respiro, halo, facetas, núcleo */

  /* DIN expandido, não condensado: condensado lê como engenharia,
     expandido lê como instituição. */
  --display: "Bahnschrift", "DIN Alternate", "Franklin Gothic Medium", "Segoe UI", system-ui, sans-serif;
  --texto: "Segoe UI Variable Text", "Segoe UI", Inter, system-ui, -apple-system, sans-serif;

  --margem: clamp(1.1rem, 3.5vw, 3.25rem);
  --margem-e: calc(var(--margem) + env(safe-area-inset-left, 0px));
  --margem-d: calc(var(--margem) + env(safe-area-inset-right, 0px));
  --margem-b: calc(clamp(1.1rem, 4vh, 2.4rem) + env(safe-area-inset-bottom, 0px));
  --margem-t: calc(clamp(14px, 2.5vh, 26px) + env(safe-area-inset-top, 0px));
}

*, *::before, *::after{ box-sizing: border-box; }
[hidden]{ display: none !important; }

html{
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgb(255 255 255 / .12);
  /* O controle de pausa é fixo no alto à direita. Numa página que
     rola, o Tab poderia parar num elemento e a rolagem automática
     depositá-lo bem embaixo desse painel — foco existente mas
     invisível (WCAG 2.2, 2.4.11). A folga reserva a faixa dele. */
  scroll-padding-top: calc(var(--margem-t) + 52px);
}

body{
  margin: 0;
  background: var(--breu);
  color: var(--aco);
  font-family: var(--texto);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;      /* contém rolagem lateral sem prender a vertical */
}

img{ display: block; max-width: 100%; }

:focus-visible{
  outline: 2px solid var(--lux-cor);
  outline-offset: 4px;
  border-radius: 2px;
}
.palco:focus{ outline: none; }          /* alvo do link de pulo, não é controle */
.palco:focus-visible{ outline: 2px solid var(--lux-cor); }

/* Texto que existe só para quem lê por leitor de tela ou por foco.
   `clip-path` em vez de `display:none`: continua no fluxo de leitura. */
.so-leitor{
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

.pular{
  position: absolute; left: 10px; top: -120px; z-index: 90;
  background: var(--lux-cor); color: var(--breu);
  padding: .7rem 1rem; text-decoration: none;
  font-family: var(--display); font-size: .82rem;
  letter-spacing: .1em; text-transform: uppercase;
}
.pular:focus{ top: 10px; }

/* ---------- A cena ------------------------------------------- */

.cena{
  position: relative;
  min-height: 100vh;            /* fallback: sem ele, um navegador que */
  min-height: 100svh;           /* não conhece svh descarta as duas     */
  display: grid;
  grid-template-rows: auto 1fr;
  /* Sem `overflow: hidden`. Em zoom de texto 200% ou fonte grande do
     sistema o conteúdo cresce, e cortar sem rota de recuperação seria
     perda irreversível. Ele rola só quando de fato não cabe. */
}

/* Claridade do chão. `background` fixo, `opacity` animada — a camada
   é rasterizada uma vez e o resto é trabalho de GPU. */
.bruma{
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  will-change: opacity;
  background:
    radial-gradient(
      68vmin 58vmin at calc(50% + var(--px, 0px) * .35) calc(46% + var(--py, 0px) * .35),
      rgb(255 255 255 / .085) 0%,
      rgb(255 255 255 / .028) 38%,
      transparent 72%
    ),
    radial-gradient(120vmax 90vmax at 50% 120%, var(--fumo) 0%, transparent 60%);
}

/* Um único par de animações para tudo que respira. A ignição entrega
   exatamente onde o respiro começa: antes ela terminava em .86 e o
   respiro entrava em .72, e a cena dava um solavanco escuro num
   quadro, em todo carregamento. */
.bruma, .halo-luz{
  animation:
    ignicao  1.6s cubic-bezier(.16,.9,.3,1) both,
    respirar var(--respiro) 1.6s ease-in-out infinite alternate;
}
@keyframes ignicao { from{ opacity: 0; }   to{ opacity: .72; } }
@keyframes respirar{ from{ opacity: .72; } to{ opacity: 1; } }

/* A vinheta fecha a cena. Estática: só a luz se move. */
.cena::after{
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: radial-gradient(120% 95% at 50% 45%, transparent 45%, rgb(0 0 0 / .72) 100%);
}

/* ---------- Pausa da luz, sem JavaScript ---------------------- */

/* Fora da tela mas focável: quem navega por teclado alcança. */
.pausa-estado{
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden;
}

.pausa-estado:checked ~ .cena .bruma,
.pausa-estado:checked ~ .cena .halo-luz,
.pausa-estado:checked ~ .cena .faceta,
.pausa-estado:checked ~ .cena .nucleo-luz{ animation-play-state: paused; }

/* `fixed`, não `absolute`: numa página que rola — a de clientes rola
   no celular — um controle exigido pela WCAG 2.2.2 não pode sair de
   alcance enquanto o que ele controla continua visível na tela. */
.pausa{
  position: fixed; z-index: 7;
  top: var(--margem-t); right: var(--margem-d);
  min-height: 32px; padding: .34rem .62rem;
  display: inline-flex; align-items: center;
  /* Mesma alfa da caixa do item atual: toda borda de componente
     nesta página usa .42 (~4:1). É o que dá forma de controle ao
     rótulo — abaixo de 3:1 ele lê como legenda, não como botão. */
  border: 1px solid rgb(255 255 255 / .42);
  background: rgb(5 5 6 / .82);   /* legível quando o conteúdo passa por baixo */
  color: var(--aco);
  font-family: var(--display);
  font-size: clamp(.62rem, .82vw, .72rem);
  letter-spacing: .18em; text-transform: uppercase;
  cursor: pointer;
  transition: color .3s ease, border-color .3s ease;
}
.pausa:hover{ color: var(--aceso); border-color: rgb(255 255 255 / .68); }

/* O foco vive na caixa de seleção; o anel precisa aparecer no rótulo. */
.pausa-estado:focus-visible ~ .cena .pausa{
  outline: 2px solid var(--lux-cor); outline-offset: 4px;
  color: var(--aceso);
}

/* O estado é dito por palavra, nunca só por cor. */
.rot-retomar{ display: none; }
.pausa-estado:checked ~ .cena .rot-pausar{ display: none; }
.pausa-estado:checked ~ .cena .rot-retomar{ display: inline; }

/* ---------- Menu invisível ------------------------------------
   Em repouso os itens têm `opacity: 0` — invisíveis de verdade.
   A exceção "Incidental" da WCAG 1.4.3 exclui texto que não é
   visível para ninguém; um valor baixo mas renderizado (.05) seria
   o único jeito de garantir reprovação: ilegível e ainda assim
   avaliável. Ao aproximar eles acendem direto no tom cheio (11:1),
   não num meio-termo. Hover e foco levam ao branco.

   A pista de que existe algo ali é o item da página atual, sempre
   aceso e com caixa. O fio abaixo é reforço, não a pista principal.
   ------------------------------------------------------------- */

.topo{
  position: relative; z-index: 6;
  padding: var(--margem-t) var(--margem-d) clamp(14px, 2.5vh, 26px) var(--margem-e);
  --revelar: 0;
}
/* A zona de aproximação é o header inteiro, com respiro acima e
   abaixo da barra: ela acende antes de o cursor alcançar os itens. */
.topo:hover, .topo:focus-within{ --revelar: 1; }

.topo::after{
  content: ""; position: absolute; left: var(--margem-e); right: var(--margem-d); bottom: 0;
  height: 1px; background: rgb(255 255 255 / .38);   /* 3:1 */
}

.menu ul{
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(.15rem, 1.5vw, 1.1rem);
  margin: 0; padding: 0; list-style: none;
  padding-right: 7rem;                 /* não passa por baixo da pausa */
}

.menu a{
  display: block;
  padding: .62rem clamp(.7rem, 1.6vw, 1.15rem);
  font-family: var(--display);
  font-stretch: expanded;
  font-weight: 700;
  font-size: clamp(.8rem, 1.15vw, .96rem);
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--aceso);
  border: 1px solid transparent;
  opacity: var(--revelar);
  transition: opacity .5s ease, color .3s ease, border-color .3s ease, background-color .3s ease;
}

.menu a:hover,
.menu a:focus-visible{
  opacity: 1;
  color: var(--lux-cor);
}

/* O item da página atual sempre aparece, com a caixa. É a âncora que
   garante que a navegação nunca some por completo. */
.menu a[aria-current="page"]{
  opacity: 1;
  color: var(--lux-cor);
  border-color: rgb(255 255 255 / .42);   /* 3,2:1 — a caixa precisa existir */
  background: rgb(255 255 255 / .08);
}

/* Aparelho que não faz hover nenhum: o menu fica visível sempre.
   `any-pointer: coarse` seria largo demais — ele é verdadeiro em todo
   notebook com tela sensível ao toque, e desligaria o efeito principal
   em máquinas onde o mouse funciona perfeitamente. O toque nesses
   híbridos é resolvido em base.js, que revela ao primeiro toque. */
@media (hover: none){
  .topo{ --revelar: 1; }
  .menu a{ opacity: 1; }
}
.cena[data-toque="sim"] .topo{ --revelar: 1; }
.cena[data-toque="sim"] .menu a{ opacity: 1; }

/* ---------- Palco --------------------------------------------- */

.palco{
  position: relative; z-index: 5;
  display: grid;
  align-items: center;
  justify-items: center;
  min-height: 0;
  padding-inline: var(--margem-e) var(--margem-d);
  padding-bottom: clamp(4.5rem, 11vh, 6.5rem);   /* faixa da assinatura */
}

/* ---------- O cubo da marca ----------------------------------- */

.cubo{
  position: relative;
  width: clamp(150px, 25vh, 300px);
  aspect-ratio: 1;
}
.cubo svg{ position: relative; width: 100%; height: 100%; display: block; overflow: visible; }

.halo-luz{
  position: absolute; inset: -22%;
  border-radius: 50%;
  pointer-events: none;
  will-change: opacity;
  background: radial-gradient(closest-side,
    rgb(255 255 255 / .42) 0%,
    rgb(255 255 255 / .16) 34%,
    transparent 72%);
}

.estrutura{
  color: var(--aceso);
  stroke-width: 1.4;
  opacity: calc(.28 + var(--lux) * .42);
}

/* As três facetas, acesas em sequência dentro do mesmo relógio do
   respiro. `both` no fill-mode: sem ele as duas facetas atrasadas
   ficavam em 0 até o próprio atraso vencer, em vez de repousar em .1. */
.faceta{ opacity: .1; }
.faceta-topo    { animation: facear var(--respiro) ease-in-out infinite both; }
.faceta-direita { animation: facear var(--respiro) ease-in-out infinite both;
                  animation-delay: calc(var(--respiro) / 3); }
.faceta-esquerda{ animation: facear var(--respiro) ease-in-out infinite both;
                  animation-delay: calc(var(--respiro) / 3 * 2); }

@keyframes facear{
  0%, 62%, 100%{ opacity: .1; }
  22%          { opacity: 1; }
}

/* O núcleo é a coisa mais clara da página inteira.
   `both` no fill-mode: sem ele o núcleo ficava em opacity 1 durante
   o atraso de 1,6s e caía para .78 num quadro — o mesmo solavanco
   que a ignição da bruma existe para evitar. */
.nucleo-luz{ animation: pulsar var(--respiro) 1.6s ease-in-out infinite alternate both; }
@keyframes pulsar{ from{ opacity: .78; } to{ opacity: 1; } }

.face-luz{ fill: var(--lux-cor); }
.f-topo    { opacity: 1; }
.f-direita { opacity: .76; }
.f-esquerda{ opacity: .58; }

/* ---------- Assinatura do grupo ------------------------------- */

.assinatura{
  position: absolute; z-index: 6;
  right: var(--margem-d);
  bottom: var(--margem-b);
  margin: 0;
  display: flex; align-items: center; gap: .7rem;
  font-weight: 400;
}
.marca{
  width: clamp(28px, 3.4vw, 40px); height: auto; flex: none;
  color: var(--aceso);
  opacity: calc(.5 + var(--lux) * .5);
}
.assinatura-texto{ display: grid; gap: .1rem; }
.assinatura-nome{
  font-family: var(--display); font-stretch: expanded; font-weight: 700;
  font-size: clamp(.95rem, 1.5vw, 1.22rem);
  letter-spacing: .07em; text-transform: uppercase;
  line-height: 1; color: var(--lux-cor);
}
.assinatura-tipo{
  font-family: var(--display); font-weight: 400;
  font-size: clamp(.6rem, .82vw, .7rem);
  letter-spacing: .5em; text-transform: uppercase;
  line-height: 1; color: var(--aco);
}

/* ---------- Telas estreitas -----------------------------------
   Sem largura para um canto que não seja o centro, a assinatura
   deixa a direita e vai para o eixo — o mesmo eixo do cubo.
   ------------------------------------------------------------- */

@media (max-width: 900px){
  .assinatura{ right: 0; left: 0; justify-content: center; }
  /* Reservado contra o rótulo LONGO ("Retomar luz", que aparece depois
     do clique), não contra o curto: dimensionar pelo curto deixava
     1,4px de folga a 320px, e sobreposição com fonte substituta. */
  .menu ul{ padding-right: 7.5rem; }
}

/* Paisagem baixa. Encolhe em vez de apagar: sumir com conteúdo era
   perda, e esse mesmo limiar dispara em zoom de 400%. */
@media (max-height: 560px){
  .cubo{ width: clamp(72px, 20vh, 120px); }
  .topo{ padding-block: 8px; }
}

@media (prefers-reduced-motion: reduce){
  .bruma, .halo-luz{ animation: none; opacity: .86; }
  .faceta{ animation: none; opacity: .45; }
  .nucleo-luz{ animation: none; opacity: .92; }
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}