/* ==========================================================================
   05 CAMADA DE DADOS — diagrama SVG de arquitetura (COMPONENTE PROTEGIDO)
   Existem duas versões do SVG no HTML: .dsk (desktop) e .diag-m (mobile ≤1024px).
   Ao editar textos/caixas, altere AS DUAS.

   Timeline de animação (após .diag.is-in), definida no HTML:
     .st   style="--t:ATRASO"               blocos que surgem
     .flow style="--t:ATRASO;--dur:DURAÇÃO" linhas que se desenham
     .pk   style="--t:ATRASO;offset-path:…" pacotes que percorrem a linha
   ========================================================================== */
.diag-hd{max-width:660px}
.diag-hd .mark{margin-bottom:18px}
.diag-hd h2{margin-bottom:18px}
.diag-hd .lede{max-width:54ch;font-size:var(--f-16)}
.diag{margin-top:clamp(44px,6vw,76px)}
.diag svg{width:100%;height:auto;display:block;overflow:visible}

/* textos do diagrama */
.diag text{font-family:"IBM Plex Sans",sans-serif;fill:#fff}
.diag .lb{font-size:13px;font-weight:600;letter-spacing:-.01em}
.diag .lb.lb-lg{font-size:14px}
.diag .lb.lb-sm{font-size:12.5px}
.diag .sm{font-size:11px;fill:var(--on-dark-2)}
.diag .tg{font-family:"IBM Plex Mono",monospace;font-size:9px;fill:var(--accent);letter-spacing:.08em}

/* caixas: .nx normal · .core núcleo · .out resultado */
.nx rect{fill:rgba(255,255,255,.045);stroke:var(--border-dark-2);stroke-width:1;
  transition:fill var(--t-base) var(--e-out),stroke var(--t-base) var(--e-out)}
.nx:hover rect{fill:rgba(92,153,242,.14);stroke:rgba(92,153,242,.6)}
.nx.core rect{fill:rgba(92,153,242,.18);stroke:var(--accent);stroke-width:1.4}
.nx.core:hover rect{fill:rgba(92,153,242,.26)}
.nx.out rect{fill:rgba(92,153,242,.30);stroke:var(--accent);stroke-width:1.4}

/* entrada dos blocos */
.diag .st{opacity:0;transform:translateY(7px)}
.diag.is-in .st{animation:stIn 400ms var(--e-out) forwards;animation-delay:var(--t)}
@keyframes stIn{to{opacity:1;transform:none}}

/* conexões (.act = destacada em azul) */
.flow path{stroke:rgba(255,255,255,.22);stroke-width:1.15;fill:none;stroke-linecap:round;stroke-dasharray:var(--l);stroke-dashoffset:var(--l)}
.flow.act path{stroke:var(--accent);stroke-width:1.45}
.diag.is-in .flow path{animation:draw var(--dur,340ms) var(--e-io) forwards;animation-delay:var(--t)}

/* halo do núcleo, LED "LIVE" e pacotes em trânsito */
.halo{fill:none;stroke:var(--accent);stroke-width:1.4;opacity:0;transform-box:fill-box;transform-origin:center}
.diag.is-in .halo{animation:halo 1100ms var(--e-out) 1.28s forwards}
@keyframes halo{0%{opacity:.55;transform:scale(1)}100%{opacity:0;transform:scale(1.055)}}
.led{fill:var(--accent)}
.diag.is-in .led{animation:led 2.4s var(--e-out) 1.5s infinite}
@keyframes led{0%,100%{opacity:1}50%{opacity:.35}}
.pk{fill:var(--accent);opacity:0;r:2.6}
@supports (offset-path:path('M0 0 L1 1')){.diag.is-in .pk{animation:pk 4.2s linear infinite;animation-delay:var(--t)}}
@keyframes pk{0%{opacity:0;offset-distance:0%}10%{opacity:.9}88%{opacity:.9}100%{opacity:0;offset-distance:100%}}

.diag .diag-m{display:none}

/* ---------- responsivo ---------- */
@media (max-width:1024px){
  .diag svg.dsk{display:none}
  .diag .diag-m{display:block;max-width:420px;margin:0 auto}
}
@media (prefers-reduced-motion:reduce){
  .flow path{stroke-dashoffset:0!important}
  .diag .st{opacity:1!important;transform:none!important}
  .halo{opacity:0!important}
}