@charset "UTF-8";
/* ============================================================
   HERO FLOW — a continuously running signal diagram.
   No rectangles: text nodes, bezier wires, light travelling along
   them. Geometry is measured from the real DOM (flow.js), so the
   same code draws the horizontal and the stacked layout.

   Motion layers
     primary   particles travelling the wires
     secondary arrival energy brightening the node it reaches
     ambient   a slow dash drift along every wire
   All of it runs in one rAF loop that stops when off screen.
   ============================================================ */

.flow{
  position:relative;
  margin:56px auto 0;
  max-width:1024px;
}

.flow-wires{
  position:absolute;inset:0;
  width:100%;height:100%;
  pointer-events:none;
  overflow:visible;
}

.flow-grid{
  position:relative;z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  gap:0 104px;
  padding:26px 8px;
}

.flow-col{display:flex;flex-direction:column;gap:17px;min-width:0}
.flow-col.in{align-items:flex-end;text-align:right}
.flow-col.out{align-items:flex-start;text-align:left}

.flow-head{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.32);
  margin-bottom:5px;
}

/* ---- nodes are text, nothing more ---- */
.flow-node{
  position:relative;
  font-size:14.5px;line-height:1.5;
  white-space:nowrap;
  transition:none;
}
.flow-col.in .flow-node{
  color:rgba(255,255,255,calc(.42 + .34 * var(--e,0)));
  text-shadow:0 0 calc(14px * var(--e,0)) rgba(190,205,255,calc(.5 * var(--e,0)));
}
.flow-col.out .flow-node{
  color:rgba(255,205,178,calc(.46 + .54 * var(--e,0)));
  text-shadow:0 0 calc(16px * var(--e,0)) rgba(255,106,43,calc(.55 * var(--e,0)));
}

/* ---- the core ---- */
.flow-core{
  position:relative;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:4px 10px;
  white-space:nowrap;
  z-index:2;
}
.flow-core strong{
  font-size:16px;font-weight:600;
  color:rgba(255,255,255,calc(.82 + .18 * var(--e,0)));
  letter-spacing:normal;
}
.flow-core small{
  font-size:10.5px;letter-spacing:.18em;
  color:rgba(255,138,80,calc(.6 + .4 * var(--e,0)));
}
/* halo: brightness tracks arriving energy, it never blinks on its own */
.flow-core::before{
  content:"";position:absolute;
  left:50%;top:50%;
  width:230px;height:230px;
  transform:translate(-50%,-50%) scale(calc(.92 + .1 * var(--e,0)));
  border-radius:50%;
  background:radial-gradient(circle,
    rgba(255,106,43,calc(.17 + .16 * var(--e,0))) 0%,
    rgba(255,106,43,.05) 42%,
    transparent 70%);
  pointer-events:none;
}

.flow-caption{
  position:relative;z-index:1;
  margin-top:10px;text-align:center;
  font-size:13px;color:rgba(255,255,255,.34);
}

/* ---- stacked ---- */
@media (max-width:860px){
  .flow-grid{
    grid-template-columns:1fr;
    gap:30px 0;
    padding:18px 4px;
    justify-items:center;
  }
  .flow-col{align-items:center !important;text-align:center !important;gap:13px}
  .flow-node{white-space:normal}
  .flow-core::before{width:180px;height:180px}
}

/* ---- reduced motion: the diagram, held still ---- */
@media (prefers-reduced-motion:reduce){html:not(.motion-on) .flow-col.in .flow-node{color:rgba(255,255,255,.7)}html:not(.motion-on) .flow-col.out .flow-node{color:rgba(255,205,178,.9)}html:not(.motion-on) .flow-core strong{color:rgba(255,255,255,.95)}html:not(.motion-on) .flow-core small{color:rgba(255,138,80,.9)}html:not(.motion-on) .flow-core::before{
    transform:translate(-50%,-50%) scale(1);
    background:radial-gradient(circle,rgba(255,106,43,.22) 0%,rgba(255,106,43,.05) 42%,transparent 70%);
  }
}