/* S05 — Comunidade é conexão. MOBILE-FIRST (ADR-023): a base é o celular; o desktop só acrescenta, a partir de 900 px de contêiner.
   Arte-mãe (faixa de 682 px): retrato 0–184 | título e texto 178–340 | constelação 355–675.
   Celular: retrato, texto e a malha 3×3 (S05-002 no centro). Desktop: 3 colunas e a constelação da arte-mãe.
   Os avatares e as pontas das linhas saem do MESMO dado em PHP (parcial), então coincidem em qualquer largura.
   Cena ESCURA. Sem JS, com movimento reduzido ou sem GSAP a cena aparece completa e parada. */
.d05{--acc:#e72b6c;--ink:#fff;position:relative;z-index:1;overflow:hidden;background:#050407;color:var(--ink);font-family:var(--font-body,"Helvetica Neue",Helvetica,Arial,sans-serif);container-type:inline-size}
.d05::before{content:"";position:absolute;inset:0;background:radial-gradient(55% 70% at 70% 55%,rgba(231,43,108,.12),transparent 70%);pointer-events:none}
.d05-in{box-sizing:border-box;position:relative;z-index:1;max-width:1320px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr);row-gap:clamp(18px,4.5cqw,34px);padding:0 0 clamp(32px,8cqw,56px)}

/* retrato: janela larga no topo, dissolvendo no escuro embaixo (a foto já tem fundo noir; sem recorte) */
.d05-ph{position:relative;aspect-ratio:4/3;overflow:hidden;background:#0b090d;-webkit-mask-image:linear-gradient(to bottom,#000 60%,transparent);mask-image:linear-gradient(to bottom,#000 60%,transparent)}
.d05-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 24%;display:block}

.d05-copy{padding:0 clamp(16px,3.87cqw,48px)}
.d05 .d05-copy h2{color:var(--ink)}   /* especificidade (0,2,1): vence [data-bx-mode=light] h2 do tema, que vem depois na folha; só a COR sobe, para não vencer o tamanho do desktop */
.d05-copy h2{margin:0 0 clamp(10px,1.4cqw,18px);font-family:var(--font-title,inherit);font-size:clamp(24px,3.39cqw,42px);line-height:1.1;letter-spacing:-.01em}
.d05-h-l{display:block;font-weight:300}
.d05-h-b{display:block;font-weight:800;color:var(--acc)}
.d05-copy p{margin:0;max-width:44ch;font-size:clamp(14px,1.45cqw,18px);line-height:1.5;color:rgba(255,255,255,.82)}

/* constelação: contêiner de proporção fixa; as linhas ocupam 100% dele e usam as mesmas porcentagens dos avatares */
.d05-net{position:relative;box-sizing:border-box;width:calc(100% - clamp(32px,7.74cqw,96px));margin:0 auto;aspect-ratio:1/1}
.d05-edges,.d05-glow,.d05-pulses{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.d05-glow{filter:drop-shadow(0 0 2px rgba(255,79,143,.7)) drop-shadow(0 0 7px rgba(231,43,108,.45))}   /* brilho: camada ESTÁTICA, nunca anima (filtro sobre algo que anima repinta a cena toda: medido 40% de CPU contra 5%) */
.d05-glow path{fill:none;stroke:#ff8fb8;stroke-width:.3;opacity:.55;stroke-linecap:round}
.d05-edges path{fill:none;stroke-linecap:round}
/* feixe de 3 fibras: a principal é a mais clara; as satélites são mais finas e mais rosadas. Unidades do viewBox (proporção real). */
.d05-edges .f0{stroke:#ff8fb8;stroke-width:.3;opacity:.55}
.d05-edges .f1,.d05-edges .f2{stroke:#e72b6c;stroke-width:.2;opacity:.5}
/* pulsos de luz (criados pelo JS): cometa com cauda = 3 traços do mesmo percurso, do mais longo e fraco ao mais curto e forte. Sem filtro. */
.d05-pulses path{fill:none;stroke-linecap:round}
.d05-pulses .p-halo{stroke:#ff3d86;stroke-width:2.4;opacity:.3}
.d05-pulses .p-tail{stroke:#ffb3d0;stroke-width:1.1;opacity:.9}
.d05-pulses .p-core{stroke:#ffffff;stroke-width:.75;opacity:1}
.d05-edges--d,.d05-glow--d,.d05-pulses--d{display:none}
/* o nó só posiciona (translate nunca é tocado pelo GSAP); o .d05-av dentro é o que anima */
.d05-node{position:absolute;z-index:1;left:calc(var(--mx) * 1%);top:calc(var(--my) * 1%);width:calc(var(--md) * 1%);aspect-ratio:1;translate:-50% -50%}
.d05-av{width:100%;height:100%;border-radius:50%;overflow:hidden;box-sizing:border-box;border:2px solid var(--acc);background:#16131a;box-shadow:0 0 14px rgba(231,43,108,.55),0 0 0 1px rgba(0,0,0,.4)}
.d05-av{position:relative}
.d05-av::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 2px #fff,0 0 26px 7px rgba(255,95,152,.9),0 0 52px 12px rgba(231,43,108,.45);opacity:0;transition:opacity .45s ease-out;pointer-events:none}
.d05-av.is-fire::after{opacity:1;transition-duration:.12s}
.d05-av img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 22%}

@media (prefers-reduced-motion:reduce){.d05 *{animation:none!important;transition:none!important}}

/* a partir de 600 px (tablet): retrato e texto lado a lado em cima; embaixo a constelação orgânica em largura inteira (a malha 3×3 é só do celular) */
@container (min-width:600px){
  .d05-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;column-gap:clamp(12px,3cqw,32px)}
  .d05-ph{aspect-ratio:auto;align-self:stretch;min-height:clamp(220px,40cqw,340px);-webkit-mask-image:linear-gradient(to right,#000 60%,transparent);mask-image:linear-gradient(to right,#000 60%,transparent)}
  .d05-ph img{object-position:50% 22%}
  .d05-copy{padding:0 clamp(16px,3.87cqw,48px) 0 0}
  /* a arte-mãe deixa a faixa direita livre para os nós de ícone: na largura inteira a constelação parece deslocada, então compensa 7% (o translate do contêiner nunca é animado) */
  .d05-net{grid-column:1 / -1;width:calc(100% - clamp(32px,7.74cqw,96px));aspect-ratio:1.76/1;translate:7% 0}
  .d05-edges--m,.d05-glow--m,.d05-pulses--m{display:none}
  .d05-edges--d,.d05-glow--d,.d05-pulses--d{display:block}
  .d05-node{left:calc(var(--dx) * 1%);top:calc(var(--dy) * 1%);width:calc(var(--dd) * 1%)}
}

/* a partir de 900 px: 3 colunas da arte-mãe e a constelação orgânica */
@container (min-width:900px){
  .d05-in{grid-template-columns:minmax(0,27fr) minmax(0,25fr) minmax(0,48fr);align-items:center;column-gap:0;row-gap:0;padding:clamp(24px,4cqw,48px) clamp(8px,1.2cqw,16px) clamp(24px,4cqw,48px) 0}
  /* o retrato sangra até a borda esquerda, o topo e a base da seção (como na arte-mãe); acima de 1320 px a caixa é centrada, então o recuo é calculado */
  .d05-ph{align-self:stretch;aspect-ratio:auto;margin-block:calc(-1 * clamp(24px,4cqw,48px));margin-left:calc(-1 * max(0px, (100cqw - 1320px) / 2));-webkit-mask-image:linear-gradient(to right,#000 58%,transparent);mask-image:linear-gradient(to right,#000 58%,transparent)}
  .d05-copy h2{font-size:clamp(22px,2.55cqw,36px)}
  .d05-ph img{object-position:50% 20%}
  .d05-copy{padding:0 clamp(8px,1.4cqw,20px) 0 clamp(4px,0.6cqw,10px)}
  .d05-copy p{max-width:30ch}
  .d05-net{grid-column:auto;width:100%;margin:0;translate:none}
}