/* ============================================================================
   atlas-lab.css — O LABORATÓRIO DIGITAL do /atlas (par do atlas-lab.js)
   ★ 2026-07-26: camada progressiva sobre o HTML servido pelo worker (_renderAtlas).
   Doutrina da casa: anima-se o que carrega significado de memória/conexão —
   nada de glow, confete, parallax, pop em texto. Easing ÚNICO
   cubic-bezier(.22,.61,.36,1); durações 120/380/420ms. A respiração dos halos
   da rede (4.2s, alternate) é a ÚNICA animação em loop do site inteiro.
   prefers-reduced-motion: TUDO desliga — estado final direto.
   Cores e tipos herdam as CSS vars do worker (claro/escuro automático via
   [data-theme] na raiz): --gold --gold-ink --terra --azul --oliva --slate
   --txt --txt2 --dim --line --bg --surface2 --serif --sans --mono.
   ========================================================================= */

/* ---- 1. A REDE DA CASA (#rede) — a assinatura -------------------------- */
#rede{margin:36px 0 6px;padding:4px 0}
#rede .lab-k{font-family:var(--sans);font-weight:500;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin:0 0 14px}
.rede-box{position:relative}
.rede-svg{display:block;width:100%;height:auto}

.rede-svg .re{fill:none;stroke:var(--line);stroke-width:1.1;
  transition:stroke .38s cubic-bezier(.22,.61,.36,1),stroke-width .38s cubic-bezier(.22,.61,.36,1),opacity .38s cubic-bezier(.22,.61,.36,1)}

.rede-svg .rn{cursor:pointer;text-decoration:none;outline:none;
  transition:opacity .38s cubic-bezier(.22,.61,.36,1)}
.rede-svg .rn .halo{fill:var(--gold);opacity:.12;transform-box:fill-box;transform-origin:center;
  animation:rp-respira 4.2s ease-in-out infinite alternate}
.rede-svg .rn .dot{fill:var(--bg);stroke:var(--txt2);stroke-width:1.3;transform-box:fill-box;transform-origin:center;
  transition:fill .38s cubic-bezier(.22,.61,.36,1),stroke .38s cubic-bezier(.22,.61,.36,1),transform .38s cubic-bezier(.22,.61,.36,1)}
.rede-svg .rn .lb{font-family:var(--serif);font-size:13.5px;fill:var(--txt);
  paint-order:stroke;stroke:var(--bg);stroke-width:3px;stroke-linejoin:round;
  transition:fill .38s cubic-bezier(.22,.61,.36,1)}

/* a respiração do Atlas — amplitude sutil (~4% de raio e de tinta) */
@keyframes rp-respira{from{transform:scale(1);opacity:.11}to{transform:scale(1.04);opacity:.15}}

/* hover/focus num nó: arestas conectadas engrossam e douram, vizinhos acendem
   (tinta plena + leve escala), o resto esmaece a .22; sair restaura */
.rede-svg.lab-dim .rn{opacity:.22}
.rede-svg.lab-dim .rn.on,.rede-svg.lab-dim .rn.nb{opacity:1}
.rede-svg.lab-dim .re{opacity:.22}
.rede-svg.lab-dim .re.on{opacity:1;stroke:var(--gold-ink);stroke-width:1.7}
.rede-svg .rn.on .dot{fill:var(--gold-ink);stroke:var(--gold-ink)}
.rede-svg .rn.on .lb{fill:var(--gold-ink)}
.rede-svg .rn.nb .dot{fill:var(--gold-ink);stroke:var(--gold-ink);transform:scale(1.18)}
.rede-svg .rn.on .halo,.rede-svg .rn.nb .halo{animation:none;opacity:.2;transform:scale(1.05)}
.rede-svg .rn:focus-visible .dot{stroke:var(--gold-ink);stroke-width:2.4}

/* mobile: a rede vira paisagem rolável (viewBox 1080 encolheria os rótulos) */
@media(max-width:760px){
  .rede-box{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .rede-svg{min-width:680px}
  .rede-svg .rn .lb{font-size:16px}
}

/* ---- 2. LINHA DO TEMPO VIVA (#tempo) ----------------------------------- */
/* padding-top = teto para o tooltip respirar dentro do container */
#tempo .tempo-box{position:relative;margin:6px 0 0;padding-top:30px}
.tempo-svg{display:block;width:100%;height:auto}
.tempo-svg .t-axis,.tempo-svg .t-tick{stroke:var(--line);stroke-width:1}
.tempo-svg .t-yr{font-family:var(--mono);font-size:11.5px;fill:var(--dim)}
.tempo-svg .t-pt{text-decoration:none;outline:none}
.tempo-svg .t-pt circle{stroke:var(--bg);stroke-width:1.4;transform-box:fill-box;transform-origin:center;
  transition:opacity .42s cubic-bezier(.22,.61,.36,1),transform .42s cubic-bezier(.22,.61,.36,1),stroke .12s cubic-bezier(.22,.61,.36,1)}
/* os pontos desenham-se em cascata (stagger 60ms via transition-delay inline) */
.tempo-svg .t-pt.pt-cas circle{opacity:0;transform:scale(.35)}
.tempo-svg .t-pt.pt-cas.lab-in circle{opacity:1;transform:scale(1)}
/* hover/focus — declarado DEPOIS da cascata; o JS remove pt-cas ao terminar */
.tempo-svg .t-pt:hover circle,.tempo-svg .t-pt:focus-visible circle{stroke:var(--gold-ink);stroke-width:2;transform:scale(1.25)}
/* tooltip — mesma voz do .pais-tip do worker */
.tempo-tip{position:absolute;pointer-events:none;background:var(--txt);color:var(--bg);
  font-family:var(--mono);font-size:11px;padding:5px 9px;border-radius:3px;opacity:0;
  transform:translate(-50%,-130%);transition:opacity .12s;white-space:nowrap;z-index:5}
.tempo-tip b{color:var(--gold)}
@media(max-width:760px){
  #tempo .tempo-box{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tempo-svg{min-width:680px}
  .tempo-svg .t-yr{font-size:15px}
}

/* ---- 3/4. CASCATA DE DESCOBERTA (#drawers, #classics, #continue) -------- */
/* opacidade parte de .25 (nunca de 0 — pesquisável/legível sem JS de reveal);
   o delay i*70ms é inline, por filho, aplicado pelo atlas-lab.js */
.lab-cas{opacity:.25;transform:translateY(8px);
  transition:opacity .42s cubic-bezier(.22,.61,.36,1),transform .42s cubic-bezier(.22,.61,.36,1)}
.lab-cas.lab-in{opacity:1;transform:none}
#continue{padding-bottom:22px}

/* ---- reduced motion: tudo desliga, estado final direto ------------------ */
@media (prefers-reduced-motion:reduce){
  .rede-svg .rn .halo{animation:none!important}
  .rede-svg .re,.rede-svg .rn,.rede-svg .rn .dot,.rede-svg .rn .lb,
  .tempo-svg .t-pt circle,.tempo-tip,.lab-cas{transition:none!important;animation:none!important}
  .lab-cas,.tempo-svg .t-pt.pt-cas circle{opacity:1!important;transform:none!important}
}