/* ============================================================
   KIT DOS DIAGRAMAS — PokerLAB Team
   Design system compartilhado por todos os diagramas de /metodologia
   (e demais páginas). Objetivo: cada diagrama nasce consistente —
   paleta, tipografia, traço, easing, layout 2 colunas — e "vivo"
   (motion ambiente perpétuo, pausado fora da viewport).

   Uso mínimo no arquivo do diagrama:
     <link rel="stylesheet" href="/diagrams/_kit.css">
     <div class="dgm" data-theme="light">        (ou "dark")
       <div class="dgm__inner">
         <div class="dgm__copy"> kicker / title / lede / legend / foot </div>
         <div class="dgm__stage" id="stage"> ...svg/grid... </div>
       </div>
     </div>
     <script src="/diagrams/_kit.js"></script>

   Motion gating: tudo que anima dentro de .dgm__stage fica PAUSADO
   por padrão; _kit.js adiciona .is-live quando o diagrama entra na
   viewport (IntersectionObserver) e remove ao sair. Assim o reveal
   dispara no scroll e os loops pausam fora de tela — de graça.
   ============================================================ */

@font-face{
  font-family:"Aspekta";font-weight:400;font-style:normal;font-display:swap;
  src:url("/assets/theme/fonts/Aspekta-400.DnG7D574.woff2") format("woff2");
}
@font-face{
  font-family:"Aspekta";font-weight:600;font-style:normal;font-display:swap;
  src:url("/assets/theme/fonts/Aspekta-600.B1yRRxUg.woff2") format("woff2");
}
@font-face{
  font-family:"JetBrains Mono";font-weight:100 800;font-display:swap;
  src:url("/assets/theme/fonts/JetBrainsMono-Variable.woff2") format("woff2");
}

:root{
  --dgm-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --dgm-sans:"Aspekta",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --dgm-ease:cubic-bezier(.16,1,.3,1);       /* reveal / entrada */
  --dgm-ease-soft:cubic-bezier(.45,0,.55,1); /* loops ambiente */
}

*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--dgm-sans);-webkit-font-smoothing:antialiased;background:transparent}

/* ---------- container + tema ---------- */
.dgm{
  /* paleta CLARA (padrão) */
  --bg:#f4f4f1;
  --bg-grad:radial-gradient(120% 92% at 82% 2%,#fafaf8,#edeee9 72%);
  --ink:#1f2421;
  --dim:#6b7168;
  --dim2:#a7ac9f;
  --line:rgba(31,36,33,.14);
  --card:rgba(31,36,33,.02);
  --cardline:rgba(31,36,33,.13);
  --raise:#a7e26e;   /* ativo / raise / crescimento */
  --soft:#cef79e;    /* suave / call */
  --neutral:#e6e7e0; /* fold / neutro */
  --gold:#c9a84c;    /* acento pontual */
  --accent-ink:#4d7a2b; /* verde escuro legível p/ texto sobre claro */
  --amber:#a8841f;
  --red:#c25f4e;
  --dot:rgba(31,36,33,.30);

  color:var(--ink);
  background:var(--bg-grad);
  font-family:var(--dgm-sans);
  padding:clamp(40px,6vw,104px) clamp(20px,4vw,56px);
  overflow:hidden;
}
.dgm[data-theme="dark"]{
  --bg:#222f30;
  --bg-grad:radial-gradient(120% 100% at 50% 0%,#26363a,#1a2425 72%);
  --ink:#e9eae4;
  --dim:#9aa39a;
  --dim2:#6d7a72;
  --line:rgba(255,255,255,.12);
  --card:rgba(255,255,255,.03);
  --cardline:rgba(255,255,255,.12);
  --raise:#a7e26e;
  --soft:#cef79e;
  --neutral:#33413f;
  --gold:#d8bd6a;
  --accent-ink:#cef79e;
  --amber:#e0c36a;
  --red:#e28a7a;
  --dot:rgba(255,255,255,.32);
}

.dgm__inner{
  max-width:1040px;margin:0 auto;width:100%;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(28px,5vw,76px);
  align-items:center;
}
.dgm--wide .dgm__inner{max-width:1200px}
/* layout FULL: copy no topo, palco largo embaixo (diagramas de fluxo/árvore) */
.dgm--full .dgm__inner{grid-template-columns:1fr;max-width:1160px;align-items:start;gap:clamp(32px,4vw,56px)}
.dgm--full .dgm__copy{max-width:62ch}
.dgm--full .dgm__lede{max-width:60ch}
@media(max-width:820px){
  .dgm__inner{grid-template-columns:1fr;gap:clamp(28px,7vw,44px)}
}

/* ---------- copy (coluna esquerda) ---------- */
.dgm__copy{max-width:38ch}
.dgm__kicker{
  display:inline-flex;align-items:center;gap:9px;margin:0 0 20px;
  font-family:var(--dgm-mono);font-size:11px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--accent-ink);
}
.dgm__kicker::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--raise);flex:0 0 auto}
.dgm__title{
  margin:0 0 14px;font-weight:600;letter-spacing:-.02em;line-height:1.04;
  font-size:clamp(29px,3.6vw,44px);color:var(--ink);
}
.dgm__title .g{color:var(--accent-ink)}
.dgm__lede{
  margin:0 0 26px;max-width:34ch;color:var(--dim);
  font-size:clamp(15px,1.5vw,17px);line-height:1.5;
}
.dgm__lede strong{color:var(--ink);font-weight:500}
.dgm__legend{
  display:flex;gap:18px;flex-wrap:wrap;
  font-family:var(--dgm-mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);
}
.dgm__legend span{display:inline-flex;align-items:center;gap:8px}
.dgm__legend i{width:11px;height:11px;border-radius:3px;display:inline-block;flex:0 0 auto}
.dgm__foot{
  margin-top:28px;font-family:var(--dgm-mono);font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--dim2);
}

/* ---------- stage (coluna direita / diagrama) ---------- */
.dgm__stage{position:relative;width:100%}
.dgm__stage svg{width:100%;height:auto;display:block;overflow:visible}

/* ---------- motion gating (lazy-play no scroll) ----------
   Enquanto o diagrama NÃO está visível, tudo dentro do stage fica
   pausado. Usa !important porque os diagramas declaram `animation:`
   no shorthand (que reseta animation-play-state p/ running e tem a
   mesma especificidade). Quando .is-live, nada força o estado e o
   shorthand roda normalmente. .is-live é ligado/desligado por _kit.js
   via IntersectionObserver — reveal dispara no scroll, loops pausam
   fora de tela.                                                     */
.dgm:not(.is-live) .dgm__stage *{animation-play-state:paused!important}

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