/* p3group v3: camada de ícones vivos (agente VIDA). Fica atrás de tudo (z-index 0), sem clique.
   As seções vêm depois no DOM e são posicionadas, então pintam por cima. A nav é z 80. */
.amb{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;contain:strict;opacity:0;transition:opacity 1.2s var(--ease)}
.amb.viva{opacity:1}

/* fios tracejados entre alguns ícones (constelação de agentes) */
.amb-fios{position:absolute;inset:0;width:100%;height:100%;max-width:none;overflow:visible}
.amb-fio{fill:none;stroke:var(--tang);stroke-width:1;stroke-dasharray:2 7;stroke-linecap:round;stroke-opacity:.34;
  animation:amb-fluxo 2.6s linear infinite,amb-pulso 4.4s var(--ease-io) infinite;transition:opacity .5s}
@keyframes amb-fluxo{to{stroke-dashoffset:-18}}
@keyframes amb-pulso{0%,100%{stroke-opacity:.34}50%{stroke-opacity:.1}}
.amb-pac{fill:var(--tang-brilho);opacity:0}
.amb-pac-halo{fill:var(--tang);opacity:0;fill-opacity:.28}

/* cada ícone: o de fora anda (transform pelo laço), o de dentro troca (transição) */
.amb-ic{position:absolute;left:0;top:0;width:var(--t);height:var(--t);margin:calc(var(--t) / -2) 0 0 calc(var(--t) / -2);
  will-change:transform;transition:opacity .6s var(--ease)}
.amb-ic.fora{display:none}
.amb-ic.cede{opacity:0!important}
.amb-in{display:grid;place-items:center;width:100%;height:100%;
  transition:opacity .32s var(--ease),transform .5s var(--ease),filter .32s var(--ease)}
.amb-in svg{width:100%;height:100%}
.amb-ic.sai .amb-in{opacity:0;transform:scale(.35) rotate(-40deg);filter:blur(3px)}

/* solto: só o traço, osso apagado */
.amb-solto{color:var(--osso);opacity:.24}
/* solto laranja: brilho suave */
.amb-tang{color:var(--tang-claro);opacity:.62}
.amb-tang .amb-in{filter:drop-shadow(0 0 5px rgba(255,77,36,.75))}
.amb-tang.sai .amb-in{filter:blur(3px)}
/* nó: bolha de vidro com anel laranja (um agente) */
.amb-no{color:var(--tang);opacity:.9}
.amb-no .amb-in{border-radius:50%;
  background:radial-gradient(circle at 50% 30%,rgba(255,122,77,.22),rgba(255,77,36,.05) 55%,rgba(6,6,7,.6) 100%);
  border:1px solid var(--tang-borda);
  box-shadow:inset 0 1px 0 rgba(255,200,180,.25),0 0 18px -2px rgba(255,77,36,.45),0 0 0 4px rgba(255,77,36,.05)}
.amb-no .amb-in svg{width:48%;height:48%;filter:drop-shadow(0 0 4px rgba(255,77,36,.7))}
.amb-no::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:1px dashed rgba(255,77,36,.28);animation:amb-gira 18s linear infinite}
@keyframes amb-gira{to{transform:rotate(360deg)}}

/* coluna de código subindo na margem esquerda (telas largas, seções agentes e processo) */
.amb-cod{position:absolute;left:14px;top:0;bottom:0;overflow:hidden;opacity:0;transition:opacity 1s var(--ease);
  -webkit-mask-image:linear-gradient(180deg,transparent 8%,#000 26%,#000 74%,transparent 94%);mask-image:linear-gradient(180deg,transparent 8%,#000 26%,#000 74%,transparent 94%)}
.amb-cod.on{opacity:1}
.amb-rolo{will-change:transform}
.amb-cod pre{margin:0;padding:0 0 1.9em;font:500 11px/1.9 var(--mono);letter-spacing:.02em;color:rgba(236,234,228,.2);white-space:pre;overflow:hidden}
.amb-cod b{font-weight:500;color:rgba(255,122,77,.55)}

/* telas médias e celular: menores e mais apagados, colados na borda */
.amb[data-modo="medio"] .amb-solto{opacity:.18}
.amb[data-modo="medio"] .amb-no{opacity:.7}
.amb[data-modo="medio"] .amb-no::after{inset:-5px}
.amb[data-modo="cel"] .amb-fios{display:none}
.amb[data-modo="cel"] .amb-ic{opacity:.2}
.amb[data-modo="cel"] .amb-no{opacity:.45}
.amb[data-modo="cel"] .amb-no::after{display:none}
.amb[data-modo="cel"] .amb-no .amb-in{box-shadow:none;background:rgba(255,77,36,.06)}

@media (prefers-reduced-motion:reduce){
  .amb{opacity:1;transition:none}
  .amb-fio{stroke-opacity:.26}
  .amb-no::after{animation:none}
}