/* =============================================================
   Treliça hexagonal isométrica — compartilhada entre o hero de
   /solucoes/blockchain/ e o banner da home.

   Ciclo de 5,2s:
     0,0–2,3s  pulsos dos seis nós convergem ao bloco central
     1,5s      o hub acende (registro consolidado)
     2,0–2,8s  os nós acendem em sequência
     2,3–3,3s  pulsos se replicam pelo anel externo
   ============================================================= */

.brbpo-net {
	--net-line:   rgba(245,245,241,.16);
	--net-face-t: rgba(245,245,241,.13);
	--net-face-l: rgba(245,245,241,.05);
	--net-face-r: rgba(245,245,241,.09);
	--net-edge:   rgba(245,245,241,.30);
	--net-accent: #4FB3A6;
	--net-cycle:  5.2s;

	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

/* ---------- dutos ---------- */
.brbpo-net .pipe {
	fill: none;
	stroke: var(--net-line);
	stroke-width: 5;
	stroke-linecap: round;
}

/* ---------- pulsos ---------- */
.brbpo-net .flow {
	fill: none;
	stroke: var(--net-accent);
	stroke-width: 5;
	stroke-linecap: round;
	/* traço curto correndo por um caminho de ~118px (radial) */
	stroke-dasharray: 16 190;
	stroke-dashoffset: 206;
	animation: brbpo-net-flow var(--net-cycle) linear infinite;
	animation-delay: var(--d, 0s);
}
/* o anel tem ~118px também, mas o pulso corre no sentido inverso */
.brbpo-net .flow--ring { stroke-dasharray: 14 190; stroke-dashoffset: -204; }

@keyframes brbpo-net-flow {
	0%        { stroke-dashoffset: 206; opacity: 0; }
	4%        { opacity: 1; }
	22%       { stroke-dashoffset: 0; opacity: 1; }
	26%, 100% { stroke-dashoffset: 0; opacity: 0; }
}

/* ---------- cubos ---------- */
.brbpo-net .cube path {
	stroke: var(--net-edge);
	stroke-width: 2;
	stroke-linejoin: round;
	transition: none;
}
.brbpo-net .cube .f-top   { fill: var(--net-face-t); }
.brbpo-net .cube .f-left  { fill: var(--net-face-l); }
.brbpo-net .cube .f-right { fill: var(--net-face-r); }

.brbpo-net .cube {
	animation: brbpo-net-cube var(--net-cycle) ease-in-out infinite;
	animation-delay: var(--d, 0s);
	transform-box: fill-box;
	transform-origin: center;
}
@keyframes brbpo-net-cube {
	0%, 88%, 100% { transform: translateY(0); }
	6%            { transform: translateY(-3px); }
	16%           { transform: translateY(0); }
}

/* aresta e face superior acendem na chegada do pulso */
.brbpo-net .cube path {
	animation: brbpo-net-edge var(--net-cycle) ease-in-out infinite;
	animation-delay: var(--d, 0s);
}
@keyframes brbpo-net-edge {
	0%, 82%, 100% { stroke: var(--net-edge); }
	8%, 30%       { stroke: var(--net-accent); }
}
.brbpo-net .cube .f-top {
	animation: brbpo-net-top var(--net-cycle) ease-in-out infinite;
	animation-delay: var(--d, 0s);
}
@keyframes brbpo-net-top {
	0%, 82%, 100% { fill: var(--net-face-t); }
	8%, 30%       { fill: rgba(79,179,166,.34); }
}

/* o hub é o destino: pulsa mais forte e um pouco depois */
.brbpo-net .cube--hub .f-top {
	animation-name: brbpo-net-hub;
}
@keyframes brbpo-net-hub {
	0%, 78%, 100% { fill: rgba(79,179,166,.18); }
	10%, 34%      { fill: rgba(79,179,166,.52); }
}

@media (prefers-reduced-motion: reduce) {
	.brbpo-net .flow,
	.brbpo-net .cube,
	.brbpo-net .cube path,
	.brbpo-net .cube .f-top { animation: none; }
	.brbpo-net .flow { stroke-dasharray: none; stroke-dashoffset: 0; opacity: .5; }
	.brbpo-net .cube--hub .f-top { fill: rgba(79,179,166,.34); }
}