/* ==========================================================================
   GRADE DE LOGOS COM MIOLO DE TEXTO
   Prefixo: mesh-
   Tokens usados: --bg --fg-2 --rule --accent --dark --display --sans
                  --sec-gap --ease
   ========================================================================== */

/* ---- a malha ----
   Seis colunas, e as duas do meio mais largas: é o que dá ao miolo uma
   caixa de texto utilizável. Medido na referência — célula de fora 194px,
   do meio 259px, ou seja 1,33 vez. Aqui é 1,5 porque a coluna do projeto
   (--max) é mais estreita que a do site de origem, e sem esse fio a mais
   o título quebraria em cinco linhas.

   As LINHAS DE GRADE são o gap: o fundo da malha é a cor do filete e o
   fundo de cada célula é o da seção, então o vão de 1px vira linha. Assim
   não há borda dupla entre vizinhas nem canto sobrando na ponta — o que
   aconteceria com border em cada célula. */
.mesh-grid{
  --mesh-row:clamp(96px,10.6vw,140px);
  --mesh-line:1px;

  display:grid;
  grid-template-columns:1fr 1fr 1.5fr 1.5fr 1fr 1fr;
  /* minmax e não altura fixa: a linha cresce se o miolo pedir mais que o
     vão reservado. Sem isso o texto transborda e a linha da grade corta a
     última frase — foi o que aconteceu em 768px, onde o miolo passa a
     ocupar a largura inteira e o texto quebra em mais linhas.
     No desktop não muda nada: o miolo cabe nas três linhas de sobra. E como
     nas quebras estreitas ele é o único item da linha dele, crescer não
     distorce célula nenhuma. */
  grid-auto-rows:minmax(var(--mesh-row),auto);
  gap:var(--mesh-line);
  background:var(--rule);
  border:var(--mesh-line) solid var(--rule);
}

/* ---- o miolo ----
   Posição explícita: colunas 3 e 4, linhas 2 a 4. É a única coisa na malha
   que declara onde fica, e é por isso que as células se distribuem sozinhas
   em volta. */
.mesh-core{
  grid-column:3 / span 2;
  grid-row:2 / span 3;
  background:var(--bg);
  display:grid;
  place-items:center;
  padding:clamp(18px,2.4vw,40px);
}
.mesh-head{--head-max:100%}

/* O título e o apoio vêm das primitivas do core (h2.sec-title, .sec-lead).
   Aqui só o que a caixa estreita do miolo pede: o teto de 22ch da primitiva
   deixaria o título com linha órfã dentro de 470px. */
.mesh-title{max-width:none}
.mesh-lead{max-width:38ch;margin-inline:auto}

/* ---- a célula ---- */
.mesh-cell{
  position:relative;
  background:var(--bg);
  display:grid;
  place-items:center;
}

/* ---- hachura da célula vazia ----
   Pseudo-elemento e não background da célula: a hachura precisa de opacidade
   própria para dissolver quando um logo chega ou sai, e mexer na opacidade
   da célula levaria o logo junto.

   Quem liga e desliga o .is-empty é o script, e a hachura nasce apagada.
   Colado num Elementor sem o script.js, a malha fica sem hachura nenhuma:
   linhas e logos, parados. Feio? Não — só mais sóbrio. Foi a escolha certa
   contra a alternativa, que era nascer acesa em toda célula e pintar
   hachura por trás dos logos.

   Não dá para resolver isso com :not(:has(> [data-mesh-logo])): o logo
   nunca sai da sua célula no HTML (ver abaixo), então o seletor acusaria
   como vazia justamente a célula de onde o logo saiu, e brigaria com o
   .is-empty a cada onda. */
.mesh-cell::after{
  content:"";
  position:absolute;inset:0;
  opacity:0;
  transition:opacity .55s var(--ease);
  background-image:repeating-linear-gradient(135deg,
    var(--rule) 0 1px,
    transparent 1px 7px);
}
.mesh-cell.is-empty::after{opacity:1}

/* ---- o logo ----
   O deslocamento vem do script em --mesh-dx/--mesh-dy, em pixels, e é
   medido do centro da célula de CASA até o centro da célula onde o logo
   está agora. O logo nunca sai da sua célula no HTML: só se desloca.

   Por que assim, e não movendo o nó no DOM ou trocando grid-column: porque
   nenhuma das duas alternativas anima. Trocar a coluna reposiciona sem
   transição, e mover o nó exigiria um FLIP à mão com transitionend para
   cada logo, a cada onda. Deslocamento em transform anima de graça, e a
   ordem de leitura do HTML fica estável para leitor de tela. */
/* Caixa em porcentagem da célula, e o object-fit resolve o resto. Foi a
   correção de um erro medido: com height em clamp mais max-width, quem
   mordia primeiro era a largura, e um wordmark de 5,4:1 acabava com 18px de
   altura numa célula de 140. Caixa única serve marca quadrada e wordmark
   comprido sem cada um pedir sua regra. */
.mesh-logo{
  width:66%;
  height:42%;
  object-fit:contain;
  opacity:.5;
  transform:translate3d(var(--mesh-dx,0),var(--mesh-dy,0),0);
  transition:transform 1.05s var(--ease),opacity .3s;
  will-change:transform;
}
.mesh-logo:hover{opacity:1}

/* Logo em viagem passa por cima das linhas e das vizinhas. Sem isto ele
   desaparece por baixo da célula do lado no meio do caminho. */
.mesh-logo.is-moving{z-index:2;position:relative}

/* Selo e marca quadrada pesam menos que wordmark na mesma caixa: ganham
   altura para equilibrar. Mesma lógica do marquee-logos. */
.mesh-logo-tall{height:58%}

/* Reposicionamento sem animação: o script marca a malha durante o resize,
   porque recalcular os centros com transição ligada faz todos os logos
   deslizarem de uma vez a cada pixel arrastado. */
.mesh-grid.is-still .mesh-logo{transition:none}

@media(prefers-reduced-motion:reduce){
  .mesh-logo{transition:none}
  .mesh-cell::after{transition:none}
}

/* ==========================================================================
   MOBILE
   Só duas coisas mudam, e o resto se reorganiza sozinho: o número de
   colunas e a área do miolo. As 24 células não declaram posição nenhuma,
   então o Grid as redistribui em volta da nova área do miolo de graça —
   era esse o ponto de deixá-las automáticas.

   O miolo passa a ocupar a largura inteira: em coluna estreita, um miolo
   de duas colunas no meio da malha deixa uma faixa de células de 40px de
   cada lado, e logo nenhum caberia ali.
   ========================================================================== */
@media(max-width:980px){
  .mesh-grid{
    grid-template-columns:1fr 1fr 1fr 1fr;
    --mesh-row:clamp(88px,14vw,120px);
  }
  .mesh-core{grid-column:1 / -1;grid-row:3 / span 2}
}

@media(max-width:560px){
  .mesh-grid{
    grid-template-columns:1fr 1fr 1fr;
    --mesh-row:clamp(76px,22vw,100px);
  }
  .mesh-core{grid-row:3 / span 3}
  .mesh-logo{width:74%}
}