/* ============================================================
   IALF CPI™ — The Impact Flow
   ------------------------------------------------------------
   A drawn diagram, authored here rather than sourced: three
   islands (Develop / Apply / Impact), a flow between them, and a
   reflection arc that returns to the start. One picture that
   explains the whole service — the Orderful move.
   ============================================================ */

@layer sections {

.flow { position: relative; width: 100%; }
.flow__svg { width: 100%; height: auto; display: block; overflow: visible; }

/* ---------- islands ---------- */
.fl-island { transform-box: fill-box; transform-origin: center; }
.fl-plate { rx: 22; }
.fl-plate--cream    { fill: #fff2e8; }
.fl-plate--lavender { fill: #eaebf8; }
.fl-plate--paper    { fill: #ffffff; stroke: #2545ff; stroke-width: 1.6; }
.fl-shadow { fill: rgba(75,68,57,.10); }

/* ---------- type inside the drawing ---------- */
.fl-tag {
  font-family: 'Inter Tight', Inter, sans-serif;
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  fill: #0c1754;
}
.fl-tag--on { fill: #ffffff; }
.fl-name {
  font-family: 'Inter Tight', Inter, sans-serif;
  font-size: 17px; font-weight: 600; letter-spacing: -.03em; fill: #171417;
}
.fl-note {
  font-family: Inter, sans-serif;
  font-size: 11.5px; fill: #5b5a63;
}
.fl-num {
  font-family: 'Inter Tight', Inter, sans-serif;
  font-size: 26px; font-weight: 700; letter-spacing: -.05em; fill: #2545ff;
}
.fl-mini { font-family: Inter, sans-serif; font-size: 10px; font-weight: 600; fill: #6a6875; }
.fl-arc-label {
  font-family: 'Newsreader', Georgia, serif; font-style: italic;
  font-size: 15px; fill: #0c1754;
}

/* ---------- small parts ---------- */
.fl-card { fill: #ffffff; stroke: #f0e9e1; stroke-width: 1.2; rx: 8; }
.fl-bar { fill: #d8dcf5; rx: 3; }
.fl-bar--on { fill: #2545ff; }
.fl-chip { fill: #ffffff; stroke: #f0e9e1; stroke-width: 1.2; rx: 10; }
.fl-chip--on { fill: #2545ff; stroke: none; }
.fl-dot-soft { fill: #ffdacf; }

/* ---------- the flow line ---------- */
.fl-track { fill: none; stroke: #e4ded6; stroke-width: 2.5; stroke-linecap: round; }
.fl-live {
  fill: none; stroke: #2545ff; stroke-width: 2.5; stroke-linecap: round;
  stroke-dasharray: 560;
  stroke-dashoffset: calc(560 - (560 * var(--progress, 0)));
}
.fl-token {
  fill: #2545ff;
  offset-path: path("M214 228 C 250 228, 250 206, 286 206 L 434 206 C 470 206, 470 228, 506 228");
  offset-distance: 0%;
  offset-rotate: 0deg;
  filter: drop-shadow(0 0 7px rgba(37,69,255,.75));
  animation: fl-travel 5.2s var(--ease-inout) infinite;
}
@keyframes fl-travel {
  0%   { offset-distance: 0%;   opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}

/* ---------- reflection arc ---------- */
.fl-return {
  fill: none; stroke: #0c1754; stroke-width: 1.8;
  stroke-dasharray: 5 8; stroke-linecap: round; opacity: .5;
  animation: fl-crawl 14s linear infinite;
}
@keyframes fl-crawl { to { stroke-dashoffset: -260; } }
.fl-return-head { fill: #0c1754; opacity: .6; }

/* ---------- entrance, driven by scroll ---------- */
.fl-island, .fl-label { opacity: 0; animation: fl-rise 700ms var(--ease-editorial) both; }
.fl-island { animation-delay: calc(var(--d, 0) * 1ms); }
@keyframes fl-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* bars in the impact island grow once */
.fl-grow { transform-box: fill-box; transform-origin: bottom; transform: scaleY(0); animation: fl-bar-grow 900ms var(--ease-editorial) forwards; animation-delay: calc(900ms + var(--d,0) * 130ms); }
@keyframes fl-bar-grow { to { transform: scaleY(1); } }

/* the meter arc in the impact island */
.fl-meter-track { fill: none; stroke: #e4ded6; stroke-width: 7; stroke-linecap: round; }
.fl-meter-fill {
  fill: none; stroke: #2545ff; stroke-width: 7; stroke-linecap: round;
  stroke-dasharray: 150; stroke-dashoffset: 150;
  animation: fl-meter 1200ms var(--ease-editorial) 1100ms forwards;
}
@keyframes fl-meter { to { stroke-dashoffset: 42; } }

/* a soft pulse on the active island */
.fl-pulse { transform-box: fill-box; transform-origin: center; animation: fl-breathe 6s var(--ease-inout) infinite; }
@keyframes fl-breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.03); } }

/* ---------- caption rail under the diagram ---------- */
.flow__legend {
  display: grid; gap: 10px;
  margin-top: clamp(18px, 2.4vw, 26px);
}
@media (min-width: 720px) { .flow__legend { grid-template-columns: repeat(3, minmax(0,1fr)); } }

/* ---------- small screens ----------
   Scaled down, the drawing's labels land at about 5px and cannot be
   read. Below 720px the drawing steps aside and the legend becomes
   the diagram: the same three stages, stacked, with connectors. */
@media (max-width: 719px) {
  .flow__svg { display: none; }
  .flow__legend { margin-top: 0; gap: 0; }
  .flg { position: relative; padding-left: 52px; }
  .flg + .flg { margin-top: 26px; }
  /* the connector between stacked stages */
  .flg + .flg::before {
    content: ""; position: absolute; left: 25px; top: -26px; height: 26px;
    width: 2px; background: var(--color-cream-border);
  }
  .flg::after {
    content: ""; position: absolute; left: 17px; top: 18px;
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--color-electric-cobalt);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-electric-cobalt) 18%, transparent);
  }
  .flg:nth-child(2)::after { background: var(--color-ink-navy); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-ink-navy) 14%, transparent); }
  .flg:nth-child(3)::after { background: var(--tint-peach); box-shadow: 0 0 0 4px color-mix(in srgb, var(--tint-peach) 42%, transparent); }
}
.flg {
  display: grid; gap: 4px;
  padding: 14px 16px; border-radius: 15px;
  background: var(--surface-paper); border: 1px solid var(--color-cream-border);
}
.flg__k { font-family: var(--font-sans-tight); font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--color-electric-cobalt); }
.flg__t { font-family: var(--font-sans-tight); font-size: 1rem; font-weight: 600; letter-spacing: -.03em; color: var(--color-charcoal); }
.flg__d { font-size: 13px; line-height: 1.5; color: var(--color-graphite); }

/* ---------- safety net ----------
   The islands start at opacity:0 and rely on an entrance animation.
   A page that loads while the document is hidden has its animations
   suspended, which would leave the whole drawing invisible. The same
   `hero-done` flag that rescues the hero copy rescues the diagram. */
html.hero-done .fl-island,
html.hero-done .fl-label {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}
html.hero-done .fl-grow { animation: none !important; transform: scaleY(1) !important; }
html.hero-done .fl-meter-fill { animation: none !important; stroke-dashoffset: 42 !important; }

/* ---------- motion opt-out: the drawing stands still, complete ---------- */
html.motion-off .fl-token,
html.motion-off .fl-return,
html.motion-off .fl-pulse,
html.motion-off .fl-island,
html.motion-off .fl-label,
html.motion-off .fl-grow,
html.motion-off .fl-meter-fill { animation: none !important; }
html.motion-off .fl-island,
html.motion-off .fl-label { opacity: 1; transform: none; }
html.motion-off .fl-grow { transform: scaleY(1); }
html.motion-off .fl-meter-fill { stroke-dashoffset: 42; }
html.motion-off .fl-live { --progress: 1; }
html.motion-off .fl-token { offset-distance: 52%; opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  html:not(.motion-forced) .fl-token,
  html:not(.motion-forced) .fl-return,
  html:not(.motion-forced) .fl-pulse,
  html:not(.motion-forced) .fl-island,
  html:not(.motion-forced) .fl-label,
  html:not(.motion-forced) .fl-grow,
  html:not(.motion-forced) .fl-meter-fill { animation: none !important; }
  html:not(.motion-forced) .fl-island,
  html:not(.motion-forced) .fl-label { opacity: 1; transform: none; }
  html:not(.motion-forced) .fl-grow { transform: scaleY(1); }
  html:not(.motion-forced) .fl-meter-fill { stroke-dashoffset: 42; }
  html:not(.motion-forced) .fl-live { --progress: 1; }
  html:not(.motion-forced) .fl-token { offset-distance: 52%; opacity: 1; }
}

}