/* =====================================================================
   Barquecon IoT — Data-Journey flow animation
   Build-free, config-driven. Renders a pipeline of labelled nodes with a
   travelling "packet"; behaviour in js/flow.js, themed by css vars here.
   ===================================================================== */

.bqt-flow {
  --flow-accent: #f1b621;
  max-width: 1000px;
  margin: 0 auto;
}

.bqt-flow__track {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0;
}

.bqt-flow__node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 96px;
  flex: none;
  z-index: 2;
  text-align: center;
}
.bqt-flow__icon {
  width: 64px; height: 64px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  background: rgba(241, 182, 33, .12);
  color: var(--flow-accent);
  border: 1px solid rgba(241, 182, 33, .3);
  transition: transform .3s ease, background-color .3s ease, color .3s ease, box-shadow .3s ease;
}
.bqt-flow__label { color: #cfd8e3; font-size: .78rem; font-weight: 600; line-height: 1.3; }

/* connector between nodes */
.bqt-flow__link {
  flex: 1 1 auto;
  height: 3px;
  margin-top: 30px;            /* vertically center against the 64px icon */
  background: rgba(255, 255, 255, .12);
  position: relative;
  min-width: 24px;
}
.bqt-flow__link::after {
  content: ""; position: absolute; inset: 0; width: 0;
  background: var(--flow-accent);
  transition: width .5s ease;
}
.bqt-flow__link.is-filled::after { width: 100%; }

/* travelling packet */
.bqt-flow__packet {
  position: absolute; top: 32px; left: 0;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--flow-accent); color: #0d1b2a;
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 16px rgba(241, 182, 33, .6);
  z-index: 3;
  animation: bqtFlowPacket calc(var(--flow-cycle, 6s)) linear infinite;
  pointer-events: none;
}
@keyframes bqtFlowPacket { 0% { left: 6%; } 100% { left: 94%; } }
@keyframes bqtFlowPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(241, 182, 33, .45); }
  50%      { box-shadow: 0 0 0 9px rgba(241, 182, 33, 0); }
}

/* active node */
.bqt-flow__node.is-active .bqt-flow__icon {
  transform: scale(1.12);
  background: var(--flow-accent);
  color: #0d1b2a;
  animation: bqtFlowPulse 1.3s infinite;
}
.bqt-flow__node.is-active .bqt-flow__label { color: #fff; }

.bqt-flow__caption {
  text-align: center;
  color: #9fb4cc;
  margin: 26px auto 0;
  max-width: 640px;
  min-height: 2.6em;
  font-size: .92rem;
  transition: opacity .25s ease;
}
.bqt-flow__caption strong { color: var(--flow-accent); }

/* ---- Vertical layout (mobile) -------------------------------------- */
.bqt-flow.is-vertical .bqt-flow__track { flex-direction: column; align-items: center; }
.bqt-flow.is-vertical .bqt-flow__node { width: 100%; flex-direction: row; justify-content: flex-start; gap: 14px; text-align: left; }
.bqt-flow.is-vertical .bqt-flow__link { width: 3px; height: 28px; min-width: 0; margin: 0 0 0 31px; flex: none; }
.bqt-flow.is-vertical .bqt-flow__link::after { width: 100%; height: 0; transition: height .5s ease; }
.bqt-flow.is-vertical .bqt-flow__link.is-filled::after { height: 100%; }
.bqt-flow.is-vertical .bqt-flow__packet {
  top: 0; left: 32px !important;
  animation: bqtFlowPacketV calc(var(--flow-cycle, 6s)) linear infinite;
}
@keyframes bqtFlowPacketV { 0% { top: 4%; } 100% { top: 96%; } }

@media (max-width: 700px) {
  .bqt-flow__track { flex-direction: column; align-items: center; }
}

/* ---- Reduced motion ------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .bqt-flow__packet { animation: none; display: none; }
  .bqt-flow__node .bqt-flow__icon { animation: none; }
  .bqt-flow__link.is-filled::after { width: 100%; }
}