/* ============================================================
   hero-pipeline.css — living pipeline layer for the hero DAG
   Packets, node firing states, status flashes, run-a-lead chip.
   Companion to /assets/js/hero-pipeline.js. Additive only:
   never restyles existing hero rules, only adds hp-* states.
   Perf: every animated property here is transform or opacity.
   ============================================================ */

/* ── Packet layers (created by JS inside #autoFlow) ── */
.hp-layer {
  position: absolute; inset: 0;
  pointer-events: none; overflow: visible;
}

/* ── Data packets: glowing orbs riding the beam paths ── */
.hp-packet {
  position: absolute; top: 0; left: 0;
  width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow:
    0 0 10px 2px var(--glow-gold),
    0 0 3px 1px color-mix(in srgb, var(--gold-soft) 70%, transparent);
  opacity: 0;
  will-change: transform;
  transition: opacity 0.16s var(--ease-out);
}
.hp-packet.hp-on { opacity: 1; }
/* Highlighted "run a lead" packet — WhatsApp-green tint, slightly larger */
.hp-packet.hp-packet--lead {
  width: 12px; height: 12px; margin: -6px 0 0 -6px;
  background: var(--green-soft);
  box-shadow:
    0 0 14px 3px color-mix(in srgb, var(--green-soft) 55%, transparent),
    0 0 4px 1px color-mix(in srgb, var(--green-soft) 80%, transparent);
}
/* Dimmer echo packets on the secondary branches of a lead run */
.hp-packet.hp-packet--echo { opacity: 0; }
.hp-packet.hp-packet--echo.hp-on { opacity: 0.55; }

/* ── Mini payload chip that rides with the lead packet ── */
.hp-payload {
  position: absolute; top: 0; left: 0;
  opacity: 0;
  will-change: transform;
  transition: opacity 0.2s var(--ease-out);
}
.hp-payload.hp-on { opacity: 1; }
.hp-payload-chip {
  display: inline-block;
  transform: translate(15px, -32px);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.02em;
  color: var(--ink);
  background: var(--glass-strong);
  border: 1px solid color-mix(in srgb, var(--green-soft) 45%, transparent);
  border-radius: var(--r-sm);
  padding: 3px 9px; white-space: nowrap;
  box-shadow: var(--shadow-sm), 0 0 18px -6px color-mix(in srgb, var(--green-soft) 50%, transparent);
}

/* ── Node firing state (packet arrival) ──
   Reuses the transition already on .auto-node > span in home.css. */
#autoFlow .auto-node.hp-fired > span:first-child {
  transform: scale(1.22);
  border-color: var(--node-color, var(--gold));
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--node-color, var(--gold)) 24%, transparent),
    0 0 30px color-mix(in srgb, var(--node-color, var(--gold)) 55%, transparent);
}

/* Expanding pulse ring, one per node, retriggered by class */
.hp-ring {
  position: absolute; top: 23px; left: 50%;
  width: 46px; height: 46px; margin: -23px 0 0 -23px;
  border-radius: 13px;
  border: 1.5px solid var(--node-color, var(--gold));
  opacity: 0; transform: scale(1);
  pointer-events: none;
}
.hp-ring.hp-on { animation: hp-ring-out 0.66s var(--ease-out) forwards; }
/* Deploy flourish: bigger, brighter ring */
.hp-ring.hp-boom { animation: hp-ring-boom 0.9s var(--ease-out) forwards; }
@keyframes hp-ring-out {
  0%   { opacity: 0.85; transform: scale(1); }
  100% { opacity: 0;    transform: scale(1.9); }
}
@keyframes hp-ring-boom {
  0%   { opacity: 1;  transform: scale(1); }
  100% { opacity: 0;  transform: scale(2.6); }
}

/* ── Status flash: tiny mono readout beside a fired node ──
   Absolutely positioned; animates transform/opacity only. */
.hp-status {
  position: absolute; top: 23px; left: calc(50% + 32px);
  transform: translateY(-50%) translateX(-6px);
  opacity: 0;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.02em;
  color: var(--ink-soft);
  background: var(--glass);
  border: 1px solid color-mix(in srgb, var(--node-color, var(--gold)) 40%, transparent);
  border-radius: var(--r-sm);
  padding: 3px 8px; white-space: nowrap;
  pointer-events: none; z-index: 6;
  transition: opacity 0.26s var(--ease-out), transform 0.26s var(--ease-out);
}
.hp-status.hp-on { opacity: 1; transform: translateY(-50%) translateX(0); }
/* Mirrored side for nodes near the right edge (class set by JS at layout) */
.auto-node.hp-status-left .hp-status {
  left: auto; right: calc(50% + 32px);
  transform: translateY(-50%) translateX(6px);
}
.auto-node.hp-status-left .hp-status.hp-on { transform: translateY(-50%) translateX(0); }
/* Lead-run story lines get the gold treatment */
.hp-status.hp-status--lead { color: var(--gold); border-color: var(--line-gold); background: var(--glass-strong); }

/* ── Ambient breathing: soft halo behind each icon, opacity-only ── */
.hp-halo {
  position: absolute; top: 23px; left: 50%;
  width: 54px; height: 54px; margin: -27px 0 0 -27px;
  border-radius: 16px;
  box-shadow: 0 0 24px 4px color-mix(in srgb, var(--node-color, var(--gold)) 45%, transparent);
  opacity: 0; pointer-events: none; z-index: -1;
}
#autoFlow.hp-alive .hp-halo { animation: hp-breathe 5.6s var(--ease-in-out) infinite; }
@keyframes hp-breathe {
  0%, 100% { opacity: 0.05; }
  50%      { opacity: 0.18; }
}

/* ── "run a lead" chip — mono gold ghost, top-right corner of the diagram
   zone (the DAG is diamond-shaped so this corner stays clear; the previous
   bottom-30px anchor fell below the fold on 900px-tall viewports). ── */
.hp-run-btn {
  position: absolute; right: 40px; top: 102px;
  z-index: 5;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gold);
  background: var(--glass);
  border: 1px solid var(--line-gold);
  border-radius: var(--r-pill);
  padding: 9px 18px;
  cursor: pointer;
  transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.hp-run-btn:hover,
.hp-run-btn:focus-visible {
  border-color: var(--gold);
  background: var(--glass-strong);
  box-shadow: 0 0 26px -6px var(--glow-gold);
}
.hp-run-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.hp-run-btn:active .hp-run-btn-ic { transform: scale(0.8); }
.hp-run-btn-ic {
  display: inline-block; font-size: 9px;
  transition: transform var(--dur-fast) var(--ease-spring);
}
.hp-run-btn.hp-busy {
  color: var(--ink-mute); border-color: var(--line-strong);
  box-shadow: none; cursor: default;
}
@media (max-width: 980px) {
  /* Diagram is a faint ambient backdrop on mobile: keep the packets as
     texture, hide the chip and all text chrome (mirrors home.css hiding
     .auto-node-label/.auto-node-note at this breakpoint). */
  .hp-run-btn { display: none; }
  .hp-status, .hp-payload, .hp-done { display: none; }
}

/* ── End-of-run flourish badge (positioned by JS at the deploy node) ── */
.hp-done {
  position: absolute;
  transform: translateX(-50%) translateY(8px) scale(0.92);
  opacity: 0;
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  color: var(--gold);
  background: var(--glass-strong);
  border: 1px solid var(--line-gold);
  border-radius: var(--r-pill);
  padding: 7px 16px; white-space: nowrap;
  box-shadow: var(--shadow), 0 0 30px -8px var(--glow-gold);
  pointer-events: none; z-index: 8;
  transition: opacity 0.34s var(--ease-out), transform 0.42s var(--ease-spring);
}
.hp-done.hp-on { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }

/* ── Reduced motion: statics only, no travel, no breathing ── */
@media (prefers-reduced-motion: reduce) {
  .hp-packet, .hp-payload { display: none; }
  #autoFlow.hp-alive .hp-halo { animation: none; }
  .hp-ring.hp-on, .hp-ring.hp-boom { animation: none; }
  .hp-status, .hp-done, .hp-packet, .hp-payload { transition: none; }
  .hp-status.hp-on { transform: translateY(-50%); }
}