/* ============================================================
   TEXTURAS — fundo com presença, escrito como código

   POR QUE CÓDIGO E NÃO IMAGEM
   As duas texturas que o Daniel salvou em docs/Recursos são arte de
   linha: ondas em teal e linhas onduladas em preto. Como arquivo, elas
   estão presas à cor em que foram exportadas — a de ondas serve à Orbis
   e a nenhum outro cliente. Como código, a MESMA textura sai cacau no
   kit moderno e âmbar no kit de saúde, sem exportar nada.

   E o peso: as duas somam 87 KB. Estas quatro somam menos de 2 KB.

   O TRUQUE, e ele é o ponto central deste arquivo:
   variável CSS não funciona dentro de `url("data:image/svg+xml,...")` —
   a data-URI é texto estático, e `var(--x)` ali dentro não é
   interpolado. Então o SVG NÃO carrega cor nenhuma: ele entra como
   `mask-image`, definindo só a FORMA, e a cor vem de `background-color`
   com o token do kit. Máscara recorta, token pinta.

   COMO USAR
   Classe de textura junto da superfície, no mesmo elemento:
     <section class="secao superficie-escura textura-ondas">
   A textura entra num ::before, então não disputa o `background-image`
   que as `.superficie-*` usam para a luz da junta.

   ACESSIBILIDADE
   Tudo aqui é decoração: `aria-hidden` não é preciso porque é
   pseudo-elemento, e `pointer-events: none` garante que nada
   intercepta clique.
   ============================================================ */

[class*="textura-"] { position: relative; isolation: isolate; }

[class*="textura-"]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* A cor da textura: por padrão herda a tinta do contexto, num alfa
     baixo. Cada uso pode sobrescrever com --cor-textura. */
  background-color: var(--cor-textura, currentColor);
  opacity: var(--forca-textura, 0.07);
  mask-repeat: repeat;
  -webkit-mask-repeat: repeat;
}

/* ---------- 1 · ONDAS ----------
   A releitura da "Background waves" do Daniel: feixe de linhas
   paralelas que se cruzam no meio e se abrem nas pontas. No original
   são oito linhas em teal; aqui são cinco, porque em tamanho de seção
   oito viram ruído.

   Fica boa sangrando no rodapé de uma seção escura — que é como a
   referência da Orbis usa. */
.textura-ondas::before {
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 300" preserveAspectRatio="none"><g fill="none" stroke="black" stroke-width="2"><path d="M0 150 C 200 60, 400 240, 600 150 S 1000 60, 1200 150"/><path d="M0 162 C 200 72, 400 252, 600 162 S 1000 72, 1200 162"/><path d="M0 174 C 200 84, 400 264, 600 174 S 1000 84, 1200 174"/><path d="M0 186 C 200 96, 400 276, 600 186 S 1000 96, 1200 186"/><path d="M0 198 C 200 108, 400 288, 600 198 S 1000 108, 1200 198"/></g></svg>');
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 300" preserveAspectRatio="none"><g fill="none" stroke="black" stroke-width="2"><path d="M0 150 C 200 60, 400 240, 600 150 S 1000 60, 1200 150"/><path d="M0 162 C 200 72, 400 252, 600 162 S 1000 72, 1200 162"/><path d="M0 174 C 200 84, 400 264, 600 174 S 1000 84, 1200 174"/><path d="M0 186 C 200 96, 400 276, 600 186 S 1000 96, 1200 186"/><path d="M0 198 C 200 108, 400 288, 600 198 S 1000 108, 1200 198"/></g></svg>');
  mask-size: 100% auto;
  -webkit-mask-size: 100% auto;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center bottom;
  -webkit-mask-position: center bottom;
  --forca-textura: 0.16;
}

/* ---------- 2 · LINHAS ONDULADAS ----------
   A releitura da "LINHAS-ONDULADAS-TEXTURA": padrão que se repete nos
   dois eixos. O ladrilho tem 60x40 e a onda fecha exatamente na borda,
   senão a emenda aparece como uma costura vertical.

   Densa. Serve a seção inteira em alfa baixo, nunca atrás de texto
   pequeno — linha fina sob letra fina disputa a leitura. */
.textura-linhas::before {
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="60" height="40" viewBox="0 0 60 40"><g fill="none" stroke="black" stroke-width="1.2"><path d="M0 6 Q 15 -4, 30 6 T 60 6"/><path d="M0 16 Q 15 6, 30 16 T 60 16"/><path d="M0 26 Q 15 16, 30 26 T 60 26"/><path d="M0 36 Q 15 26, 30 36 T 60 36"/></g></svg>');
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="60" height="40" viewBox="0 0 60 40"><g fill="none" stroke="black" stroke-width="1.2"><path d="M0 6 Q 15 -4, 30 6 T 60 6"/><path d="M0 16 Q 15 6, 30 16 T 60 16"/><path d="M0 26 Q 15 16, 30 26 T 60 26"/><path d="M0 36 Q 15 26, 30 36 T 60 36"/></g></svg>');
  mask-size: 60px 40px;
  -webkit-mask-size: 60px 40px;
  --forca-textura: 0.05;
}

/* ---------- 3 · GRÃO ----------
   O item que a redesign-existing-projects chama de "flat design with
   zero texture feels sterile", e que a impeccable também pede: ruído
   fino quebrando a chapada digital.

   `feTurbulence` gera o ruído no próprio navegador — não existe arquivo.
   `baseFrequency` alta (0,9) dá grão fino; abaixo de 0,4 vira mancha.

   Este NÃO usa máscara: o ruído já é a imagem, e ele funciona em cima
   de qualquer cor. Por isso sobrescreve o background-color da base. */
.textura-grao::before {
  background-color: transparent;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="140" height="140"><filter id="r"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="3" stitchTiles="stitch"/></filter><rect width="140" height="140" filter="url(%23r)"/></svg>');
  opacity: var(--forca-textura, 0.055);
  mix-blend-mode: overlay;
}

/* ---------- 4 · RÉGUA ----------
   Este não precisa de SVG nenhum: é gradiente repetido, que já repinta
   com token nativamente. É o motivo do kit — as marcas de medida — e o
   mesmo desenho do favicon.

   Traço a cada 12px, e um mais forte a cada 60px: a marca longa da
   régua de verdade, que aparece a cada cinco. */
.textura-regua::before {
  background-color: transparent;
  background-image:
    repeating-linear-gradient(90deg,
      var(--cor-textura, currentColor) 0 1px, transparent 1px 12px),
    repeating-linear-gradient(90deg,
      var(--cor-textura, currentColor) 0 1px, transparent 1px 60px);
  background-size: 100% 10px, 100% 22px;
  background-repeat: repeat-x;
  background-position: left top, left top;
  opacity: var(--forca-textura, 0.2);
}

/* Movimento reduzido não desliga textura — textura é estática. Mas
   contraste alto, sim: quem pede mais contraste não quer padrão
   competindo com o texto. */
@media (prefers-contrast: more) {
  [class*="textura-"]::before { display: none; }
}