/* ============================================
   CRIACHICOS · SOUL KIT (v3.1)
   Elementos de "vida": grid blueprint (A) + data-viz que se monta (C)
   + sol pulsante e conectores tech. Light + dark. Respeita reduced-motion.
   Cole junto do sistema. NÃO é decoração solta: fundo fica atrás do conteúdo.
   ============================================ */

/* -- tokens de apoio do soul kit (herdam do sistema) -- */
:root{
  --grid-line:#DDD2BE;      /* linha do grid no claro */
  --grid-opacity:.42;       /* "visivel mas discreto" */
  --crosshair:#C9B99E;
}
[data-theme="dark"]{
  --grid-line:#2E2618;
  --grid-opacity:.5;
  --crosshair:#4A3D2D;
}

/* ============================================
   A · GRID DE BLUEPRINT (fundo de seção)
   Uso: <section class="has-grid"> ... </section>
   Fica ATRÁS do conteúdo, some nas bordas via máscara.
   ============================================ */
.has-grid{position:relative;isolation:isolate}
.has-grid::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(var(--grid-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:34px 34px;
  opacity:var(--grid-opacity);
  -webkit-mask-image:radial-gradient(130% 100% at 50% 0%,#000 22%,transparent 82%);
          mask-image:radial-gradient(130% 100% at 50% 0%,#000 22%,transparent 82%);
}

/* cruzeta de marcação (blueprint). Uso: <i class="crosshair" style="top:60px;left:40px"></i> */
.crosshair{position:absolute;width:9px;height:9px;z-index:-1;pointer-events:none}
.crosshair::before,.crosshair::after{content:"";position:absolute;background:var(--crosshair)}
.crosshair::before{left:4px;top:0;width:1px;height:9px}
.crosshair::after{top:4px;left:0;height:1px;width:9px}

/* ============================================
   SOL PULSANTE (acento pontual, NÃO em toda seção)
   Uso: <span class="sun-accent"></span> dentro de um pai position:relative
   ============================================ */
.sun-accent{position:absolute;width:44px;height:44px;border-radius:50%;
  background:var(--sun);opacity:.92;z-index:0;pointer-events:none}
.sun-accent::after{content:"";position:absolute;inset:-9px;border:1px solid var(--sun);
  border-radius:50%;animation:sun-pulse 3.4s ease-out infinite}
@keyframes sun-pulse{0%{transform:scale(.9);opacity:.45}100%{transform:scale(1.6);opacity:0}}

/* conector tech (linha fina que sugere sistema). Uso decorativo, aria-hidden */
.connector{position:absolute;height:1px;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--line-strong),transparent)}
.node{position:absolute;width:11px;height:11px;border:1.5px solid var(--moss);
  border-radius:50%;background:var(--bg);z-index:-1;pointer-events:none}
.node--live{border:none;background:var(--orange)}

/* ============================================
   C · DATA-VIZ QUE SE MONTA (onde tiver dado)
   Uso:
   <div class="dv" data-dv>
     <div class="dv-row"><div class="dv-label">bandeira</div>
       <div class="dv-track"><div class="dv-fill" style="--v:.7;--c:var(--moss)"></div></div>
       <div class="dv-pct">70%</div></div>
     ...
   </div>
   JS abaixo dispara quando entra na viewport (uma vez).
   ============================================ */
.dv{display:flex;flex-direction:column;gap:12px}
.dv-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px}
.dv-label{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap}
.dv-track{height:6px;background:var(--bg-sunken);border-radius:3px;overflow:hidden}
.dv-fill{height:100%;border-radius:3px;background:var(--c,var(--moss));
  transform:scaleX(0);transform-origin:left}
.dv-pct{font-family:var(--mono);font-size:10px;color:var(--muted)}
.dv.is-live .dv-fill{transition:transform .9s cubic-bezier(.4,0,.2,1);transform:scaleX(var(--v))}
/* defasagem em sequência (efeito "montando") */
.dv.is-live .dv-row:nth-child(1) .dv-fill{transition-delay:.05s}
.dv.is-live .dv-row:nth-child(2) .dv-fill{transition-delay:.25s}
.dv.is-live .dv-row:nth-child(3) .dv-fill{transition-delay:.45s}
.dv.is-live .dv-row:nth-child(4) .dv-fill{transition-delay:.65s}
.dv.is-live .dv-row:nth-child(5) .dv-fill{transition-delay:.85s}

/* ============================================
   REDUCED MOTION · tudo estático, nada se perde
   ============================================ */
@media (prefers-reduced-motion: reduce){
  .sun-accent::after{animation:none;opacity:0}
  .dv .dv-fill{transition:none !important;transform:scaleX(var(--v))}
  .dv:not(.is-live) .dv-fill{transform:scaleX(var(--v))}
}