/* fundo.css — MOVIMENTO DE FUNDO, variações do VIVO (12/09/2026).

   Pedido dele: "com cautela... se for pra colocar mais efeitos, que seja de
   formas diferentes: entrada, algo no fundo que tenha movimento, itens
   decorativos". Este arquivo é o "algo no fundo".

   Escolhido por data-fundo no <html>. Três respostas diferentes para "o que se
   mexe atrás do conteúdo":
     aurora  · luzes quentes derivando         (volta-ev + blobs do open-source-llm)
     grao    · textura de filme + luz de janela (o cinematográfico do lumina-video)
     crescer · o símbolo do LOGO crescendo      (barras + seta, motivo nunca usado)

   REGRAS DE CAUTELA, valem para os três:
   · SUBSTITUI, não soma: o halo do respiro sai quando um fundo vivo entra.
     Dois movimentos de fundo ao mesmo tempo é exatamente o excesso que ele
     pediu para evitar.
   · Lento a ponto de só se perceber que mudou ao voltar a olhar (ciclos de
     45 s para cima), exceto o grão, que por natureza é contínuo e a ~2%.
   · A camada é position:fixed atrás de tudo e não recebe clique.
   · O gerador EMPILHA as luzes no mesmo ponto (luz_sobreposta) e confere o
     texto ali — a régua é a mesma do resto (texto 12, apoio 8,5 sob a luz).
     Na 1ª tentativa, aurora e grão foram RECUSADOS (apoio 7,64 e 7,95).
   · O camada não existe sem data-fundo: nas outras páginas ela é display:none. */

.fundo-vivo { display: none; }

[data-fundo~="aurora"] .fundo-vivo,
[data-fundo~="grao"] .fundo-vivo,
[data-fundo~="crescer"] .fundo-vivo {
  display: block;
  position: fixed; inset: 0;
  z-index: -1; pointer-events: none; overflow: hidden;
}

/* substitui o halo do respiro */
[data-fundo~="aurora"] .hero::after,
[data-fundo~="grao"] .hero::after,
[data-fundo~="crescer"] .hero::after { display: none; }

/* As faixas com fundo próprio tampavam o movimento. Com fundo vivo elas ficam
   translúcidas: a separação entre seções continua, a luz passa. Os BLOCOS
   seguem opacos — o contraste dentro deles não muda. */
[data-fundo~="aurora"] .secao--alt,
[data-fundo~="grao"] .secao--alt,
[data-fundo~="crescer"] .secao--alt { background: rgba(23, 18, 16, .72); }
[data-fundo~="aurora"] .poco,
[data-fundo~="grao"] .poco,
[data-fundo~="crescer"] .poco { background: rgba(12, 9, 8, .78); }
[data-fundo~="aurora"] .faixa-viva,
[data-fundo~="grao"] .faixa-viva,
[data-fundo~="crescer"] .faixa-viva { background: rgba(12, 9, 8, .7); }

/* O SVG do crescer só aparece no crescer */
.fundo-vivo .crescer { display: none; }

/* ============================================================ AURORA ==== */
[data-fundo~="aurora"] .fundo-vivo i {
  position: absolute; display: block; border-radius: 50%;
  filter: blur(70px); will-change: transform;
}
[data-fundo~="aurora"] .fundo-vivo i:nth-child(1) {
  width: 62vmax; height: 62vmax; top: -22vmax; left: -18vmax;
  background: radial-gradient(closest-side, rgba(224, 185, 111, .045), transparent);
  animation: deriva-a 48s ease-in-out infinite alternate;
}
[data-fundo~="aurora"] .fundo-vivo i:nth-child(2) {
  width: 70vmax; height: 70vmax; bottom: -30vmax; right: -24vmax;
  /* era uma mancha CAFE a 35%: clareava o fundo mais que o dourado e quase nao
     aparecia (cafe sobre cafe). Virou SOMBRA: escurecer nao tira contraste de
     texto claro, e a luz ao lado parece mais forte por comparacao. */
  background: radial-gradient(closest-side, rgba(4, 3, 2, .55), transparent);
  animation: deriva-b 62s ease-in-out infinite alternate;
}
[data-fundo~="aurora"] .fundo-vivo i:nth-child(3) {
  width: 42vmax; height: 42vmax; top: 34%; left: 38%;
  background: radial-gradient(closest-side, rgba(234, 223, 198, .027), transparent);
  animation: deriva-c 55s ease-in-out infinite alternate;
}
@keyframes deriva-a { to { transform: translate(22vw, 26vh) scale(1.15); } }
@keyframes deriva-b { to { transform: translate(-26vw, -18vh) scale(.9); } }
@keyframes deriva-c { to { transform: translate(-18vw, 14vh) scale(1.2); } }

/* ============================================================== GRÃO ==== */
/* O grão é um SVG de ruído gerado DENTRO do CSS: nenhum arquivo baixado,
   nenhum servidor de terceiro. Não é grade — grade foi assinatura do SINAL. */
[data-fundo~="grao"] .fundo-vivo::before {
  content: "";
  position: absolute; inset: -60%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .95 0 0 0 0 .86 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .033;
  animation: grao 1.1s steps(6) infinite;
}
@keyframes grao {
  0%   { transform: translate(0, 0); }
  17%  { transform: translate(-4%, 3%); }
  33%  { transform: translate(3%, -5%); }
  50%  { transform: translate(-6%, -2%); }
  67%  { transform: translate(5%, 4%); }
  83%  { transform: translate(-2%, 6%); }
  100% { transform: translate(0, 0); }
}
/* a luz de janela: um feixe quente atravessando o topo da página em 70 s */
[data-fundo~="grao"] .fundo-vivo i:nth-child(1) {
  position: absolute; display: block;
  width: 55vw; height: 90vh; top: -30vh; left: -20vw;
  background: radial-gradient(closest-side, rgba(224, 185, 111, .045), transparent);
  filter: blur(60px); transform: rotate(-18deg);
  animation: janela 70s ease-in-out infinite alternate;
}
@keyframes janela { to { transform: translateX(80vw) rotate(-8deg); } }

/* =========================================================== CRESCER ==== */
/* O logo da Houzzes tem um motivo que nunca foi usado: barras que sobem e uma
   seta. Registrado no dossiê em 11/09 como candidato a assinatura. Aqui ele
   vira fundo, a 3,5%: textura da marca, não conteúdo. */
[data-fundo~="crescer"] .fundo-vivo .crescer {
  display: block;
  position: absolute; right: -2vw; bottom: -2vh;
  width: min(78vw, 960px); height: auto;
  /* era .075, que só passava medindo as barras SEM a seta por cima; somadas,
     o texto de apoio caía para 7,28. Em .035 fica em 8,74. */
  opacity: .035;
}
:is([data-fundo~="crescer"], [data-fundo~="crescer-topo"], [data-fundo~="crescer-secao"]) .crescer rect {
  fill: #E0B96F;
  transform-box: fill-box; transform-origin: 50% 100%;
  animation: subir var(--d, 9s) ease-in-out infinite alternate;
}
:is([data-fundo~="crescer"], [data-fundo~="crescer-topo"], [data-fundo~="crescer-secao"]) .crescer rect:nth-child(1) { --d: 7s; }
:is([data-fundo~="crescer"], [data-fundo~="crescer-topo"], [data-fundo~="crescer-secao"]) .crescer rect:nth-child(2) { --d: 9.5s; }
:is([data-fundo~="crescer"], [data-fundo~="crescer-topo"], [data-fundo~="crescer-secao"]) .crescer rect:nth-child(3) { --d: 8s; }
:is([data-fundo~="crescer"], [data-fundo~="crescer-topo"], [data-fundo~="crescer-secao"]) .crescer rect:nth-child(4) { --d: 11s; }
:is([data-fundo~="crescer"], [data-fundo~="crescer-topo"], [data-fundo~="crescer-secao"]) .crescer rect:nth-child(5) { --d: 10s; }
:is([data-fundo~="crescer"], [data-fundo~="crescer-topo"], [data-fundo~="crescer-secao"]) .crescer rect:nth-child(6) { --d: 12.5s; }
:is([data-fundo~="crescer"], [data-fundo~="crescer-topo"], [data-fundo~="crescer-secao"]) .crescer rect:nth-child(7) { --d: 13s; }
@keyframes subir { from { transform: scaleY(.72); } to { transform: scaleY(1); } }

:is([data-fundo~="crescer"], [data-fundo~="crescer-topo"], [data-fundo~="crescer-secao"]) .crescer .seta,
:is([data-fundo~="crescer"], [data-fundo~="crescer-topo"], [data-fundo~="crescer-secao"]) .crescer .ponta {
  fill: none; stroke: #EADFC6; stroke-width: 4;
  stroke-linecap: round; stroke-linejoin: round;
}
:is([data-fundo~="crescer"], [data-fundo~="crescer-topo"], [data-fundo~="crescer-secao"]) .crescer .seta {
  stroke-dasharray: 760; stroke-dashoffset: 760;
  animation: desenhar 14s var(--curva, ease) infinite;
}
:is([data-fundo~="crescer"], [data-fundo~="crescer-topo"], [data-fundo~="crescer-secao"]) .crescer .ponta {
  opacity: 0; animation: ponta 14s ease infinite;
}
@keyframes desenhar {
  0%   { stroke-dashoffset: 760; opacity: 1; }
  38%  { stroke-dashoffset: 0;   opacity: 1; }
  82%  { stroke-dashoffset: 0;   opacity: 1; }
  100% { stroke-dashoffset: 0;   opacity: 0; }
}
@keyframes ponta {
  0%, 34% { opacity: 0; }
  42%, 82% { opacity: 1; }
  100% { opacity: 0; }
}
@media (max-width: 620px) {
  [data-fundo~="crescer"] .fundo-vivo .crescer { width: 118vw; right: -10vw; }
}

/* ================================================= CRESCER LOCALIZADO ==== */
/* 12/09: "o crescer está interessante, só que eu não deixaria no site
   inteiro... deixaria em alguma seção". Duas colocações para ele escolher:
     crescer-topo  · atrás do lado direito do hero, ao lado dos números
     crescer-secao · atrás de uma seção do meio da página
   É a alavanca ESPACIAL: longe do texto, o desenho pode aparecer mais sem
   tirar contraste de nenhuma letra. No computador fica a 10%, e a geometria é
   conferida no navegador (nenhum texto sobre fundo liso passa por cima). No
   celular, onde o texto ocupa a largura toda, volta a 3,5%, que passa na régua
   EMPILHADA (barras + seta). */
.crescer-local { display: none; }

[data-fundo~="crescer-topo"] .hero,
[data-fundo~="crescer-secao"] #movimento {
  position: relative; isolation: isolate; overflow: hidden;
}
[data-fundo~="crescer-topo"] .hero .crescer-local,
[data-fundo~="crescer-secao"] #movimento .crescer-local {
  display: block; position: absolute; z-index: -1; pointer-events: none; opacity: .10;
}
[data-fundo~="crescer-topo"] .hero .crescer-local { right: -1vw; bottom: 2.5rem; width: min(44vw, 540px); }
[data-fundo~="crescer-secao"] #movimento .crescer-local { right: -2vw; bottom: 0; width: min(40vw, 500px); }
.crescer-local svg { display: block; width: 100%; height: auto; }

/* com o crescer no topo, o halo do respiro disputaria o mesmo lugar */
[data-fundo~="crescer-topo"] .hero::after { display: none; }

@media (max-width: 760px) {
  [data-fundo~="crescer-topo"] .hero .crescer-local,
  [data-fundo~="crescer-secao"] #movimento .crescer-local { width: 92vw; right: -4vw; opacity: .035; }
}

/* =========================================================== respeito ==== */
@media (prefers-reduced-motion: reduce) {
  .fundo-vivo, .fundo-vivo *, .fundo-vivo::before, .crescer-local * { animation: none !important; }
  :is([data-fundo~="crescer"], [data-fundo~="crescer-topo"], [data-fundo~="crescer-secao"]) .crescer .seta { stroke-dashoffset: 0 !important; }
  :is([data-fundo~="crescer"], [data-fundo~="crescer-topo"], [data-fundo~="crescer-secao"]) .crescer .ponta { opacity: 1 !important; }
}