/* Letreiro de neon do Grupo RTX — estilos do OBJETO, escopados no container.
   Só o que é do letreiro e da parede. Título, apoio, chamadas e régua são nós
   normais do editor: o painel é para leigos, e conteúdo dentro de nó fechado
   não é editável pelos controles. Mesma divisão do wood3d na Ruah.
   Origem do desenvolvimento: scratchpad/rtx-hero4/hero-neon.html            */

.ec-rtx-letreiro{
  position:relative; width:100%; overflow:hidden;
  background:#060608; color:#e8ecf0;
  --verde:#A0E802; --luz:0;
}
.ec-rtx-letreiro canvas{display:block;width:100%;height:100%}

/* reserva: aparece sem WebGL, com save-data, em 2G, e se o script falhar.
   Ela é SVG no HTML — existe antes de qualquer script rodar.               */
/* A reserva NASCE INVISÍVEL e só aparece depois de 600ms. Antes ela era o primeiro
   desenho da tela: quem carregava a página via a marca CINZA por um instante e só
   então o neon acendia por cima — parecia resquício de uma versão antiga.
   Como o WebGL sobe bem antes disso, na prática ela nunca chega a aparecer: o
   `rtx-vivo` do primeiro quadro desenhado a remove.
   Não é `display:none` com JS ligando: se o script for BLOQUEADO (foi o que a CSP fez
   uma vez), nada rodaria para trazê-la de volta e o hero ficaria vazio. Com o atraso
   em CSS puro, o pior caso continua sendo a reserva aparecendo — que é o trabalho
   dela. Sem fade sob reduced-motion: o atraso é o que importa, não a transição.
   2026-08-19: o atraso subiu de 600ms para 2500ms e a saída virou fade. 600ms não
   cobre a compilação do shader em navegador mais lento — o Hugo via a reserva CINZA
   piscar e sumir a cada recarga ("um jumpscare"). O corte seco de `display:none` era
   metade do susto; a outra metade era ela aparecer. 2500ms é folgado o bastante para
   que só apareça quando o WebGL realmente não vem, que é para o que ela existe. */
.ec-rtx-letreiro .rtx-reserva{position:absolute;inset:0;display:grid;place-items:center;
  padding:5vmin;opacity:0;animation:rtx-reserva-entra .4s ease 2500ms forwards}
/* .85 e nao 1: a reserva agora e o letreiro APAGADO (tubo verde, ver o SVG em
   tree_rtx_marca3d), e nao mais a chapa clara que dava 1,73:1 sob o titulo branco.
   Tubo fino nao disputa com texto, entao ela pode acender quase por inteiro — os 15%
   que faltam sao o que separa "em repouso" de "aceso". */
@keyframes rtx-reserva-entra{to{opacity:.85}}
@media(prefers-reduced-motion:reduce){
  .ec-rtx-letreiro .rtx-reserva{animation-duration:0s}
}
.ec-rtx-letreiro.rtx-vivo .rtx-reserva{animation:none;opacity:0;visibility:hidden;
  pointer-events:none;transition:opacity .45s ease,visibility 0s linear .45s}
/* `rtx-gl` = o navegador TEM WebGL2, e isso se sabe antes de compilar shader nenhum.
   Sem esta regra a reserva aparecia no atraso do CSS e sumia no primeiro quadro
   desenhado — uma marca cinza piscando por cima do hero a cada carregamento. Se o
   primeiro quadro nao vier em 4s, o JS tira a classe e a reserva volta. */
.ec-rtx-letreiro.rtx-gl .rtx-reserva{animation:none;opacity:0;visibility:hidden;
  pointer-events:none;transition:opacity .45s ease,visibility 0s linear .45s}
/* limita pelos DOIS lados: so pela largura, a proporcao da marca (cerca de
   1,5:1) estourava a altura do container e a peca saia cortada em baixo.

   ATENCAO AOS `max-height` DAQUI PARA BAIXO. Desde que a reserva ganhou o REFLEXO,
   a caixa do SVG e 1,5x mais alta que a marca — o reflexo mora no terco de baixo e
   e transparente. Um `max-height` calibrado na caixa antiga passa a limitar a MARCA
   a dois tercos do que media. Ao mexer, lembre: caixa = marca x 1,5. */
.ec-rtx-letreiro .rtx-reserva svg{width:min(70%,860px);max-height:88%;height:auto}

/* o alvo de apagar/acender fica sobre os eletrodos; posição vem da geometria */
.ec-rtx-letreiro .rtx-chave{
  position:absolute;z-index:5;padding:0;border:0;background:none;cursor:pointer;
  border-radius:999px;
}
.ec-rtx-letreiro .rtx-chave:focus-visible{outline:2px solid var(--verde);outline-offset:6px}
.ec-rtx-letreiro .rtx-so-leitor{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;
}

/* erro de WebGL: escondido até haver o que dizer */
.ec-rtx-letreiro .rtx-err{
  position:absolute;inset:0;display:none;place-items:center;padding:6vmin;
  font:500 12px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;color:#9aa3ac;text-align:center;
}
.ec-rtx-letreiro .rtx-err.on{display:grid}

/* O CHAO NAO MORA MAIS AQUI. Ele era `.rtx-chao`: poca de luz + plano mais claro +
   sombra mascarada, tudo em degrade por cima do canvas. Nao podia funcionar — o
   ripado da fachada e desenhado uma camada ABAIXO e ia ate o pe da secao, entao as
   laminas da PAREDE atravessavam a faixa que devia ser piso (medido: sulcos em
   y=672, 675, 680, 704 e 713 dentro do chao). Piso com a textura da parede por
   dentro nao le como piso; degrade nenhum conserta, porque a parede tem de ACABAR.
   Alem disso um degrade vertical nao tem perspectiva, e sem perspectiva o olho le
   "parede mais clara" e nao "plano horizontal".
   Agora o chao nasce no shader: a parede termina numa quina, o piso tem ponto de
   fuga proprio e o letreiro se reflete nele. Ver `uChao` em letreiro.js.        */

/* A RESERVA VAI PARA A DIREITA, como o letreiro aceso faz. Centralizada, a chapa caía
   embaixo do titulo — e foi o que o Hugo viu no notebook dele, que nao roda WebGL:
   "UM GRUPO. MUITAS FRENTES." por cima de uma chapa cinza clara. Empurrada para a
   borda, o texto fica no vazio da esquerda e a marca ocupa a direita, que e a
   composicao que o letreiro aceso ja tem.

   ESTE BLOCO FICA NO FIM DE PROPOSITO. Ele nasceu logo depois da regra base da
   `.rtx-reserva`, e nao aplicava: a regra do `svg` mora mais abaixo, com a MESMA
   especificidade, e em CSS a ultima ganha — media query nao soma especificidade.
   Medi e a marca continuou com os 860px de antes, como se eu nao tivesse mexido.

   So no desktop: no celular a marca desce para baixo do texto, e centrada esta certo. */
@media(min-width:761px){
  /* recuo zero a direita: a marca acesa SANGRA na borda (medida indo ate x=1344 num
     1366 e ate 1894 num 1920). Com os 5vmin de recuo a reserva parava 60px antes e
     lia como uma peca menor, encostada, e nao como a mesma peca. */
  .ec-rtx-letreiro .rtx-reserva{place-items:center end;padding:2vmin 0 2vmin 5vmin}
  /* Medido com WebGL por software, contando pixel verde: a marca ACESA tem 670px num
     1366 (49% da tela) e 975px num 1920 (51%). A reserva tinha 554 e 627 — o teto de
     700px estrangulava o 1920, onde ela ficava 36% menor que a peca que substitui.
     55vw entrega 669 e 940. `vw` e nao `%` porque a % conta a caixa JA recuada, e o
     recuo aqui e assimetrico. max-height 100% porque a caixa cresceu 1,5x com o
     reflexo: com os 88% de antes ela travava pela altura e encolhia de novo. */
  /* o `translateY` desce a MARCA, nao a caixa. Com o reflexo a caixa e 1,5x mais alta
     que a marca, entao centralizar a CAIXA joga a marca para cima: o meio da marca cai
     a 33% da caixa, e nao a 50%. 5% e o que aproxima as duas pontas medidas (1366 e
     1920) sem empurrar a cauda do reflexo para fora da secao. */
  .ec-rtx-letreiro .rtx-reserva svg{width:min(55vw,1500px);max-height:100%;
    transform:translateY(5%)}
}
/* NAO EXISTE UM DEGRAU AQUI, e eu tentei. A altura em que a marca ACESA aparece nao
   segue proporcao nem tamanho: medida no topo dela, da 15,5% da tela num 1366, 19,0%
   num 1280, 15,6% num 1536, 24,7% num 1920 e 19,4% num 2560. Nao e ruido — capturei o
   1920 em 1s, 4s, 9s e 16s e a cena para de mexer aos 4s, sempre no mesmo pixel. E a
   camera do shader enquadrando por conta propria. Uma regra `min-width:1700` acertava
   o 1920 (260 contra 267) e errava o 2560 por 124px para o outro lado, entao ela saiu:
   um deslocamento unico erra pouco em todo lugar, e o degrau errava muito num lugar. */
/* NO CELULAR A MARCA DESCE, que e o que o desenho da secao ja manda (o letreiro aceso
   fica abaixo do texto desde 3094539). A reserva e `position:absolute;inset:0` e se
   centrava na secao inteira: medido a 390px, o tubo atravessava o paragrafo. Ancorada
   embaixo, ela ocupa o vazio que sobra sob o texto. */
@media(max-width:760px){
  /* Os numeros saem de MEDIR o letreiro aceso num 390x844, nao de escolher: la a marca
     tem ~67% da largura e o topo dela cai em y=515 (a base em 660, numa secao de 776).
     A reserva estava com 56% e topo em 616 — menor e mais baixa que a peca que ela
     substitui. 30vmin de recuo embaixo poem a base onde a acesa poe. */
  .ec-rtx-letreiro .rtx-reserva{place-items:end center;padding-bottom:2vmin}
  .ec-rtx-letreiro .rtx-reserva svg{width:min(86%,340px);max-height:64%}
}
/* TELEFONE CURTO: a secao encolhe e o paragrafo cresce, e os dois se encontram. Medido
   num 360x740 com os valores acima: a marca comecava em 448 e o texto terminava em 504
   — 56px de invasao. Aqui ela encolhe e desce para o vao que sobra. O corte de 780 e a
   altura abaixo da qual isso passou a acontecer nas medicoes. */
@media(max-width:760px) and (max-height:780px){
  .ec-rtx-letreiro .rtx-reserva{padding-bottom:2vmin}
  .ec-rtx-letreiro .rtx-reserva svg{width:min(50%,250px);max-height:46%}
}