/* ----------------------------------------------------------------
   zato-flow  -  reusable flow-diagram component
   ----------------------------------------------------------------
   Usage: see plan for HTML structure. All visual knobs are
   CSS custom properties set on the .zato-flow container or
   on individual .zato-flow-box elements via inline style.
   ---------------------------------------------------------------- */

.zato-flow {
  --flow-box-width: 180px;
  --flow-box-bg: #0d1117;
  --flow-box-border: rgba(255, 255, 255, 0.06);
  --flow-connector-width: 100px;
  --flow-arrow-color: #334155;
  --flow-label-color: #334155;
  --flow-subtitle-color: #94a3b8;
  --flow-velocity: 0.95s;
  --flow-steps: 4;
  --flow-slide-distance: 130px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 3.5rem 0 3rem 0;
}

/* ---- box ---- */

.zato-flow-box {
  width: var(--flow-box-width);
  background: var(--flow-box-bg);
  border: 1px solid var(--flow-box-border);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), 0 2px 8px rgba(0, 0, 0, 0.15);
  opacity: 0;
  animation: zatoFlowBoxIn 0.7s cubic-bezier(0.23, 1, 0.32, 1) forwards;
  animation-delay: var(--flow-delay, 0s);
}

/* macOS titlebar dots */

.zato-flow-dots {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(255, 255, 255, 0.02);
}

.zato-flow-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.zato-flow-dots span:nth-child(1) { background: #ef4444; }
.zato-flow-dots span:nth-child(2) { background: #eab308; }
.zato-flow-dots span:nth-child(3) { background: #22c55e; }

/* box body */

.zato-flow-body {
  padding: 16px 14px 18px;
  text-align: center;
}

.zato-flow-box strong {
  display: block;
  font-family: 'SF Mono', 'Fira Code', Menlo, Consolas, monospace;
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  color: var(--flow-accent, #f1f5f9);
}

.zato-flow-box small {
  display: block;
  font-family: 'SF Mono', 'Fira Code', Menlo, Consolas, monospace;
  font-weight: 400;
  font-size: 0.65rem;
  margin-top: 0.35rem;
  color: var(--flow-subtitle-color);
}

/* ---- connector (arrows + label between boxes) ---- */

.zato-flow-connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: var(--flow-connector-width);
  padding: 0 0.3rem;
}

.zato-flow-lane {
  width: 100%;
  height: 10px;
  position: relative;
  overflow: hidden;
}

.zato-flow-label {
  font-family: 'SF Mono', 'Fira Code', Menlo, Consolas, monospace;
  font-size: 0.605rem;
  color: var(--flow-label-color);
  margin: 3px 0;
  letter-spacing: 0.04em;
  font-weight: 500;
  text-align: center;
  background: linear-gradient(90deg, var(--flow-label-color) 0%, var(--flow-label-color) 35%, #c9d1d9 50%, var(--flow-label-color) 65%, var(--flow-label-color) 100%);
  background-size: 300% 100%;
  background-position: 0% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation-duration: calc(var(--flow-steps) * var(--flow-velocity));
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* ---- dart (the moving arrow) ---- */

.zato-flow-dart {
  position: absolute;
  top: 3px;
  height: 4px;
  display: flex;
  align-items: center;
}

.zato-flow-dart::before {
  content: '';
  width: 28px;
  height: 1.5px;
}

.zato-flow-dart::after {
  content: '';
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}

/*
   Step sequencing: the total cycle = steps * step-duration.
   Each dart plays for one step-duration then stays invisible
   for the remaining (steps-1) * step-duration before looping.
   --flow-step (1-based) on each dart sets its start offset.
*/

.zato-flow-dart-left,
.zato-flow-dart-right {
  animation-duration: calc(var(--flow-steps) * var(--flow-velocity));
  animation-delay: calc((var(--flow-step, 1) - 1) * var(--flow-velocity));
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

/* left-pointing dart: head on the left, line on the right */
.zato-flow-dart-left {
  flex-direction: row-reverse;
  right: 100%;
  animation-name: zatoFlowSlideLeft;
}

.zato-flow-dart-left::before {
  background: linear-gradient(to left, transparent, var(--flow-arrow-color));
}

.zato-flow-dart-left::after {
  border-right: 6px solid var(--flow-arrow-color);
}

/* right-pointing dart: line on the left, head on the right */
.zato-flow-dart-right {
  left: 100%;
  animation-name: zatoFlowSlideRight;
}

.zato-flow-dart-right::before {
  background: linear-gradient(to right, transparent, var(--flow-arrow-color));
}

.zato-flow-dart-right::after {
  border-left: 6px solid var(--flow-arrow-color);
}

/* ---- keyframes ----
   Active window is 0%-25% (one quarter of the cycle for 4 steps).
   For other step counts the consumer adjusts --flow-steps and the
   total duration scales proportionally, so the visible portion
   always equals one step-duration in wall-clock time.
   ---------------------------------------------------------------- */

@keyframes zatoFlowBoxIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes zatoFlowSlideLeft {
  0%   { transform: translateX(var(--flow-slide-distance)); opacity: 0; }
  1.2% { opacity: 1; }
  20%  { opacity: 1; }
  25%  { transform: translateX(0px); opacity: 0; }
  100% { transform: translateX(0px); opacity: 0; }
}

@keyframes zatoFlowSlideRight {
  0%   { transform: translateX(calc(-1 * var(--flow-slide-distance))); opacity: 0; }
  1.2% { opacity: 1; }
  20%  { opacity: 1; }
  25%  { transform: translateX(0px); opacity: 0; }
  100% { transform: translateX(0px); opacity: 0; }
}

.zato-flow-shine-1 { animation-name: zatoFlowShineFirst; }
.zato-flow-shine-2 { animation-name: zatoFlowShineSecond; }

@keyframes zatoFlowShineFirst {
  0%    { background-position: 0% 0; }
  25%   { background-position: 100% 0; }
  25.1% { background-position: 0% 0; }
  100%  { background-position: 0% 0; }
}

@keyframes zatoFlowShineSecond {
  0%    { background-position: 0% 0; }
  50%   { background-position: 0% 0; }
  75%   { background-position: 100% 0; }
  75.1% { background-position: 0% 0; }
  100%  { background-position: 0% 0; }
}