/* Procedo — Hero diagram (v2). Portado do handoff design_handoff_hero_diagram_v2.
   Carrega somente na home (ver _partials/header.php). Só as regras .hd*: a coluna de
   texto do hero continua sendo a do tema (Crafto + procedo.css). */

/* ---------- diagram shell ---------- */

.hd {
  --hd-navy-0: #040b18;
  --hd-navy-1: #0b1c3a;
  --hd-cyan: #7de2ff;
  --hd-cyan-mid: rgba(79, 201, 245, 0.9);
  --hd-yellow: #ffea23;
  --hd-dur: 110s;
  --hd-scale: 1;

  position: relative;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  aspect-ratio: 4 / 5;
}

/* O stage e um quadrado dentro de uma caixa 4/5, mas a tinta nao e simetrica: o card
   "Your ERP" fica em top:106% e desce mais 46px de raio abaixo do stage, entao centrar o
   quadrado deixa o conjunto colado no rodape. Sobe metade dessa sobra (6% do lado + o raio,
   ambos acompanhando --hd-scale) para o centro optico cair no meio da caixa. */
.hd__stage {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  aspect-ratio: 1;
  transform: translateY(calc(-50% - 4% - 23px * var(--hd-scale)));
}

.hd__bloom,
.hd__ring {
  position: absolute;
  left: 50%;
  top: 50%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
}

.hd__bloom {
  width: 86%;
  background: radial-gradient(circle, rgba(64, 150, 255, 0.95) 0%, rgba(20, 90, 220, 0.55) 30%, rgba(0, 61, 167, 0) 70%);
  filter: blur(26px);
  animation: hd-breath 7s ease-in-out infinite;
}

.hd__ring--1 { width: 38%; border: 1px solid rgba(79, 201, 245, 0.55); }
.hd__ring--2 { width: 54%; border: 1px dashed rgba(79, 201, 245, 0.45); }
.hd__ring--3 { width: 66%; border: 1px solid rgba(58, 140, 235, 0.35); }
.hd__ring--4 { width: 92%; border: 1px dashed rgba(120, 175, 240, 0.28); }

/* ---------- spokes ---------- */

.hd__spokes,
.hd__nodes {
  position: absolute;
  inset: 0;
  animation: hd-spin var(--hd-dur) linear infinite;
}
.hd__spokes { z-index: 1; }
.hd__nodes { z-index: 3; pointer-events: none; }

.hd.is-paused .hd__spokes,
.hd.is-paused .hd__nodes,
.hd.is-paused .hd__float,
.hd.is-paused .hd__counter { animation-play-state: paused; }

.hd__float {
  position: absolute;
  inset: 0;
  pointer-events: none;
  animation: hd-float 8s ease-in-out infinite alternate;
  animation-delay: var(--hd-delay, 0s);
}

.hd__spoke {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 1px;
  width: var(--hd-len);
  transform: rotate(var(--hd-ang));
  transform-origin: 0 50%;
  background: rgba(79, 201, 245, 0.28);
  pointer-events: none;
}
.hd__spoke::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, rgba(125, 226, 255, 1) 0 5px, rgba(125, 226, 255, 0) 5px 40px);
  background-size: 120px 1px;
  opacity: 0.7;
  animation: hd-flow 3.4s linear infinite;
  animation-delay: var(--hd-pulse, 0s);
  transition: opacity 0.3s;
}
.hd__spoke.is-active::after { opacity: 1; }
.hd__spoke.is-dim::after { opacity: 0.28; }

/* ---------- nodes ---------- */

.hd__slot {
  position: absolute;
  left: var(--hd-x);
  top: var(--hd-y);
  width: 0;
  height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.hd__slot.is-open { z-index: 6; }

.hd__counter {
  width: 0;
  height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: hd-spin-rev var(--hd-dur) linear infinite;
}

.hd__node {
  --hd-node-size: calc(64px * var(--hd-scale));
  --hd-node-glow: rgba(47, 131, 255, 1);
  --hd-node-rim: rgba(140, 225, 255, 0.55);
  --hd-node-rim-on: #dff2ff;
  --hd-node-border-width: 1px;

  box-sizing: border-box;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: var(--hd-node-size);
  height: var(--hd-node-size);
  padding: 0 14px;
  border: var(--hd-node-border-width) solid var(--hd-node-rim);
  border-radius: 50%;
  background: var(--hd-node-bg);
  box-shadow: 0 6px 18px rgba(2, 8, 22, 0.4), 0 0 22px color-mix(in srgb, var(--hd-node-glow) 40%, transparent);
  backdrop-filter: blur(6px);
  text-align: center;
  cursor: default;
  pointer-events: auto;
  transition: width 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), height 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
    padding 0.4s, background 0.3s, border-color 0.3s, opacity 0.3s, box-shadow 0.3s;
}

.hd__node--solid { --hd-node-bg: color-mix(in srgb, var(--hd-fill) 88%, transparent); }

.hd__node--rim {
  --hd-node-glow: rgba(60, 200, 255, 1);
  --hd-node-size: calc(52px * var(--hd-scale));
  --hd-node-rim: var(--hd-cyan-mid);
  --hd-node-rim-on: #a5ecff;
  --hd-node-border-width: 1.5px;
  --hd-node-bg: radial-gradient(circle at 38% 26%, rgba(24, 68, 140, 0.95) 0%, rgba(7, 25, 60, 0.96) 100%);
}

.hd__node--ghost {
  --hd-node-glow: rgba(255, 234, 35, 1);
  --hd-node-size: calc(52px * var(--hd-scale));
  --hd-node-rim: var(--hd-yellow);
  --hd-node-rim-on: var(--hd-yellow);
  --hd-node-border-width: 1.5px;
  --hd-node-bg: radial-gradient(circle at 50% 30%, rgba(255, 234, 35, 0.2) 0%, rgba(9, 26, 58, 0.9) 65%);
  border-style: dashed;
}

.hd__node.is-open {
  width: calc(188px * var(--hd-scale));
  height: calc(188px * var(--hd-scale));
  padding: calc(20px * var(--hd-scale)) calc(22px * var(--hd-scale));
  border-color: var(--hd-node-rim-on);
  box-shadow: 0 20px 50px rgba(2, 8, 22, 0.7), 0 0 44px color-mix(in srgb, var(--hd-node-glow) 55%, transparent);
}

.hd__node.is-dim {
  opacity: 0.4;
  box-shadow: 0 6px 18px rgba(2, 8, 22, 0.4), 0 0 22px color-mix(in srgb, var(--hd-node-glow) 18%, transparent);
}

.hd__mark {
  display: flex;
  align-items: center;
  gap: 7px;
  opacity: 0.95;
  transition: opacity 0.25s;
}
.hd__node.is-open .hd__mark { opacity: 0; }

.hd__mark i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--hd-dot, var(--hd-cyan));
  box-shadow: 0 0 8px var(--hd-dot, var(--hd-cyan));
}
.hd__mark span {
  width: 16px;
  height: 1px;
  background: var(--hd-dash, rgba(125, 226, 255, 0.6));
}

.hd__name {
  margin: 0;
  white-space: nowrap;
  font-family: var(--primary-font), sans-serif;
  font-weight: 600;
  font-size: 10px;
  line-height: 1.25;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hd-label, #d9f2ff);
  opacity: 0;
  transition: opacity 0.3s, font-size 0.3s;
}
.hd__copy {
  margin: 7px 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--hd-text, #e9f3ff);
  opacity: 0;
  transition: opacity 0.3s;
  text-wrap: pretty;
}
.hd__node.is-open .hd__name {
  font-size: 13px;
  white-space: normal;
  opacity: 1;
}
.hd__node.is-open .hd__copy { opacity: 1; }

.hd__node--ghost { --hd-dot: var(--hd-yellow); --hd-dash: rgba(255, 234, 35, 0.6); --hd-label: var(--hd-yellow); --hd-text: #f7f2cf; }

/* ---------- AI layer + core ---------- */

.hd__ai {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(184px * var(--hd-scale));
  height: calc(184px * var(--hd-scale));
  margin: calc(-92px * var(--hd-scale)) 0 0 calc(-92px * var(--hd-scale));
  z-index: 4;
  pointer-events: none;
}
.hd__ai i {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}
.hd__ai i:nth-child(1) {
  border: 1px solid rgba(79, 201, 245, 0.6);
  background: radial-gradient(circle, rgba(47, 131, 255, 0.35) 38%, rgba(47, 111, 214, 0) 74%);
  animation: hd-halo 4.2s ease-in-out infinite;
}
.hd__ai i:nth-child(2) { border: 1px solid rgba(125, 226, 255, 0.7); animation: hd-ping 5.4s ease-out infinite; }
.hd__ai i:nth-child(3) { border: 1px solid rgba(125, 226, 255, 0.45); animation: hd-ping 5.4s ease-out infinite; animation-delay: 2.7s; }

.hd__ai p {
  position: absolute;
  left: 50%;
  top: 95%;
  transform: translateX(-50%);  
  font: 600 9px var(--primary-font), sans-serif;
  white-space: nowrap;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #eaf6ff;
  text-shadow: 0 0 12px rgba(79, 201, 245, 0.9);
}

.hd__core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(140px * var(--hd-scale));
  height: calc(140px * var(--hd-scale));
  z-index: 2;
  box-sizing: border-box;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  border: 1px solid rgba(125, 226, 255, 0.55);
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, rgba(58, 142, 255, 0.95) 0%, rgba(12, 58, 150, 0.96) 46%, rgba(4, 20, 58, 0.98) 100%);
  box-shadow: 0 0 60px rgba(38, 120, 255, 0.55), inset 0 0 34px rgba(79, 201, 245, 0.35), 0 24px 60px rgba(2, 8, 22, 0.6);
}

.hd__crescent {
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: rgba(140, 230, 255, 0.95);
  border-left-color: rgba(140, 230, 255, 0.7);
  transform: rotate(-28deg);
  animation: hd-crescent 5s ease-in-out infinite;
  pointer-events: none;
}

.hd__cells {
  display: grid;
  grid-template-columns: repeat(3, calc(18px * var(--hd-scale)));
  grid-template-rows: repeat(3, calc(18px * var(--hd-scale)));
  gap: calc(8px * var(--hd-scale));
}
.hd__cell {
  border-radius: 50%;
  border: 1px solid rgba(140, 205, 255, 0.3);
  background: rgba(160, 220, 255, 0.08);
  transition: background 0.4s, border-color 0.4s, box-shadow 0.4s;
}
.hd__cell.is-seen {
  border-color: rgba(220, 245, 255, 0.7);
  background: var(--hd-cell);
  box-shadow: 0 0 10px color-mix(in srgb, var(--hd-cell) 60%, transparent);
}
.hd__cell.is-active {
  border-color: #fff;
  background: var(--hd-cell);
  box-shadow: 0 0 22px var(--hd-cell);
}

/* ---------- ERP peer ---------- */

.hd__erp-link {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 56%;
  height: 1px;
  z-index: 1;
  transform: rotate(58deg);
  transform-origin: 0 50%;
  background: repeating-linear-gradient(90deg, rgba(125, 226, 255, 0.85) 0 5px, rgba(125, 226, 255, 0) 5px 10px);
  pointer-events: none;
}

.hd__erp {
  position: absolute;
  left: 85%;
  top: 106%;
  width: 0;
  height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 7;
}

.hd__erp-card {
  box-sizing: border-box;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: calc(92px * var(--hd-scale));
  height: calc(92px * var(--hd-scale));
  padding: 0 8px;
  border: 1.5px solid var(--hd-cyan-mid);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, rgba(24, 68, 140, 0.95) 0%, rgba(7, 25, 60, 0.96) 100%);
  box-shadow: 0 6px 18px rgba(2, 8, 22, 0.4), 0 0 22px rgba(60, 200, 255, 0.4);
  backdrop-filter: blur(6px);
  text-align: center;
  cursor: default;
  transition: width 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), height 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
    padding 0.4s, box-shadow 0.3s, border-color 0.3s;
}
.hd__erp-card:hover {
  width: calc(168px * var(--hd-scale));
  height: calc(168px * var(--hd-scale));
  padding: calc(22px * var(--hd-scale)) calc(24px * var(--hd-scale));
  box-shadow: 0 20px 50px rgba(2, 8, 22, 0.7), 0 0 44px rgba(60, 200, 255, 0.55);
}

.hd__erp-card p {
  margin: 0;
  font: 600 10px var(--primary-font), sans-serif;
  white-space: nowrap;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #d9f2ff;
  text-shadow: 0 0 12px rgba(79, 201, 245, 0.6);
}
.hd__erp-card small {
  display: block;
  max-height: 0;
  margin: 0;
  overflow: hidden;
  font-size: 12px;
  line-height: 1.45;
  color: #dbe7fa;
  opacity: 0;
  transition: opacity 0.3s, max-height 0.4s, margin 0.4s;
  text-wrap: pretty;
}
.hd__erp-card:hover small {
  max-height: 120px;
  margin-top: 9px;
  opacity: 1;
}

/* ---------- motion ---------- */

@keyframes hd-spin { to { transform: rotate(360deg); } }
@keyframes hd-spin-rev { to { transform: rotate(-360deg); } }
@keyframes hd-float { from { transform: translateY(-5px); } to { transform: translateY(5px); } }
@keyframes hd-flow { to { background-position: -120px 0; } }
@keyframes hd-breath {
  0%, 100% { opacity: 0.82; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.04); }
}
@keyframes hd-ping {
  0% { transform: scale(0.9); opacity: 0; }
  22% { opacity: 0.75; }
  100% { transform: scale(1.42); opacity: 0; }
}
@keyframes hd-halo {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 0.95; transform: scale(1.03); }
}
@keyframes hd-crescent { 0%, 100% { opacity: 0.75; } 50% { opacity: 1; } }

/* ---------- sangria para a direita ---------- */

/* A partir de xl o diagrama estoura a coluna (col-xl-5) para a direita: cresce --hd-bleed
   alem da largura da coluna e a margem negativa devolve esse espaco ao layout, entao o
   texto do hero nao se mexe. A sangria acompanha a folga real entre o container e a borda
   da viewport ((100vw - container)/2 + 15px de padding), com teto para o diagrama nao
   virar um monstro em telas muito largas e para os nos abertos nao serem cortados pelo
   overflow-hidden da section. */
@media (min-width: 1200px) {
  .hd {
    --hd-bleed: clamp(40px, calc((100vw - 1140px) / 2 + 15px), 120px);
    max-width: none;
    width: calc(100% + var(--hd-bleed));
    margin-left: 0;
    margin-right: calc(-1 * var(--hd-bleed));
  }
}
@media (min-width: 1400px) {
  .hd { --hd-bleed: clamp(40px, calc((100vw - 1320px) / 2 + 15px), 120px); }
}

/* ---------- responsivo ---------- */

/* Em lg (992-1199px) a coluna e col-lg-4 (~296px): encolhe so a geometria de px fixo
   (core, AI layer, nos, cells, card do ERP); os raios das orbitas ja sao % e os corpos de
   texto ficam parados, senao os labels de 9-10px viram borrao.
   Nao vale para md (768-991px): la a coluna nao tem col-md-* nenhum, entao o .row > *
   do Bootstrap da 100% de largura e o diagrama roda no tamanho cheio (640px). */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .hd { --hd-scale: 0.8; }
  .hd__copy { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .hd__spokes, .hd__nodes, .hd__counter, .hd__float, .hd__bloom,
  .hd__spoke::after, .hd__ai i, .hd__crescent { animation: none !important; }
}