/* ============================================================================
   fx.css — animated product stages for the guide design system.
   Each [data-fx] stage is authored in its FINISHED frame (final numbers,
   earned green); fx.js strips it back and replays it while on screen, so
   no-JS and prefers-reduced-motion both show the complete static story.
   All new classes are .fx- prefixed; shared chrome (.shot, .msg, .receipt,
   .readout, .stage-row) comes from guide.css.
   ========================================================================== */

.fx-stage { position: relative; background: var(--panel); padding: 20px; display: flex; flex-direction: column; font-family: var(--sans); }

/* reveal primitive: fx.js adds .fx-hide on reset, removes it to land */
.fx-r { transition: opacity .45s cubic-bezier(.23,1,.32,1), transform .45s cubic-bezier(.23,1,.32,1); }
.fx-hide { opacity: 0; }
.msg.fx-hide, .fx-switch.fx-hide, .fx-call.fx-hide, .receipt.fx-hide,
.fx-src.fx-hide, .fx-task.fx-hide, .fx-callnote.fx-hide { transform: translateY(6px); }

/* ---- omni: one conversation across email, sms, voice --------------------- */
.fx-omni { min-height: 0; }
.fx-omni .convo { margin: 0; }
.fx-switch {
  align-self: center; display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .05em;
  color: var(--muted); background: var(--panel-2);
  border: 1px solid var(--border); border-radius: 999px; padding: 3px 11px;
  white-space: nowrap;
}
.fx-call {
  align-self: flex-end; max-width: 85%; display: flex; align-items: center; gap: 11px;
  background: rgba(var(--green),.07); border: 1px solid rgba(var(--green),.3);
  border-radius: 12px; padding: 10px 13px;
}
.fx-call svg { flex: none; color: var(--green-deep); }
.fx-call-t { font-size: 12.5px; font-weight: 600; letter-spacing: -.01em; }
.fx-call-m { display: block; font-family: var(--mono); font-size: 9.5px; color: var(--faint); margin-top: 3px; }
.fx-callnote { display: block; font-family: var(--mono); font-size: 9.5px; color: var(--green-deep); margin-top: 3px; }
.fx-wave { display: inline-flex; align-items: center; gap: 2.5px; height: 16px; margin-left: 4px; }
.fx-wave i { width: 3px; border-radius: 2px; background: var(--green-deep); opacity: .7; }
.fx-wave i:nth-child(1) { height: 6px; }
.fx-wave i:nth-child(2) { height: 11px; }
.fx-wave i:nth-child(3) { height: 8px; }
.fx-wave i:nth-child(4) { height: 14px; }
.fx-wave i:nth-child(5) { height: 7px; }
.fx-wave i:nth-child(6) { height: 10px; }
.fx-wave i:nth-child(7) { height: 5px; }
.fx-oncall .fx-wave i { animation: fx-wv .75s ease-in-out infinite alternate; }
.fx-oncall .fx-wave i:nth-child(2n) { animation-delay: .18s; }
.fx-oncall .fx-wave i:nth-child(3n) { animation-delay: .32s; }
@keyframes fx-wv { from { height: 4px; } to { height: 14px; } }

/* ---- portal: tasks complete, progress is earned per task ------------------ */
.fx-portal { min-height: 0; gap: 14px; }
.fx-po-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.fx-po-title { font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; }
.fx-po-auth { font-family: var(--mono); font-size: 9.5px; color: var(--faint); white-space: nowrap; }
.fx-po-progrow { display: flex; justify-content: space-between; align-items: baseline; font-size: 11px; color: var(--muted); margin-bottom: 6px; }
.fx-po-pct { font-family: var(--mono); font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; transition: color .4s; }
.fx-po-pct.fx-earned { color: var(--green-deep); font-weight: 600; }
.fx-po-track { height: 6px; border-radius: 4px; background: var(--panel-2); overflow: hidden; }
.fx-po-fill { display: block; height: 100%; border-radius: 4px; background: rgb(var(--green)); transition: width .8s cubic-bezier(.23,1,.32,1); }
.fx-po-tasks { display: flex; flex-direction: column; gap: 8px; }
.fx-task { display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); padding: 10px 12px; font-size: 13px; }
.fx-chk { width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid var(--border-strong); flex: none; position: relative; transition: background .35s, border-color .35s; }
.fx-task.done .fx-chk { background: rgb(var(--green)); border-color: rgb(var(--green)); }
.fx-task.done .fx-chk::after { content: ""; position: absolute; left: 4px; top: 1.5px; width: 4px; height: 8px; border: solid #fff; border-width: 0 1.5px 1.5px 0; transform: rotate(40deg); }
.fx-tag { margin-left: auto; font-family: var(--mono); font-size: 9px; letter-spacing: .06em; color: var(--green-deep); opacity: 0; transition: opacity .35s; }
.fx-task.done .fx-tag { opacity: 1; }
.fx-tag-next { margin-left: auto; font-family: var(--mono); font-size: 9px; letter-spacing: .06em; color: var(--faint); }
.fx-po-foot { font-family: var(--mono); font-size: 9.5px; color: var(--faint); }

/* ---- workflow: prompt → nodes → connectors → compiled --------------------- */
.fx-wf { min-height: 0; gap: 12px; }
.fx-wf-prompt { display: flex; align-items: center; gap: 9px; border: 1px solid var(--border); background: var(--panel-2); border-radius: 9px; padding: 8px 12px; height: 34px; }
.fx-wf-plabel { font-family: var(--mono); font-size: 9px; letter-spacing: .08em; color: var(--green-deep); flex: none; }
.fx-wf-ptext { font-family: var(--mono); font-size: 11px; color: var(--fg); white-space: nowrap; overflow: hidden; }
.fx-wf-cursor { width: 6px; height: 12px; background: var(--fg); opacity: .7; flex: none; animation: fx-blink 1s steps(1) infinite; }
.fx-wf-cursor.fx-hide { opacity: 0; animation: none; }
@keyframes fx-blink { 50% { opacity: 0; } }
.fx-wf-mid { position: relative; height: 20px; }
.fx-wf-gen { position: absolute; inset: 0; display: flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10px; color: var(--muted); transition: opacity .3s; }
.fx-wf-gen i { width: 4px; height: 4px; border-radius: 50%; background: var(--muted); animation: fx-pulse 1s ease-in-out infinite; }
.fx-wf-gen i:nth-child(2) { animation-delay: .2s; }
.fx-wf-gen i:nth-child(3) { animation-delay: .4s; }
@keyframes fx-pulse { 50% { opacity: .25; transform: translateY(-2px); } }
.fx-chips { position: absolute; inset: 0; display: flex; align-items: center; gap: 8px; }
.fx-chip { font-family: var(--mono); font-size: 9.5px; color: var(--muted); border: 1px solid var(--border); background: var(--panel-2); border-radius: 6px; padding: 2px 8px; white-space: nowrap; }
.fx-wf-viewport { display: flex; justify-content: center; }
.fx-wf-canvas {
  position: relative; width: 340px; height: 258px; flex: none;
  background-image: radial-gradient(color-mix(in srgb, var(--border-strong) 55%, transparent) 1px, transparent 1px);
  background-size: 14px 14px; background-position: 7px 7px;
  border: 1px solid var(--border); border-radius: 12px; padding: 0;
  overflow: visible;
}
.fx-wf-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fx-wf-svg path { fill: none; stroke: var(--border-strong); stroke-width: 1.5; stroke-linecap: round; }
.fx-wf-blabel {
  position: absolute; transform: translate(-50%,-50%);
  font-family: var(--mono); font-size: 8px; letter-spacing: .04em; color: var(--muted);
  background: var(--panel); border: 1px solid var(--border); border-radius: 999px;
  padding: 2px 7px; white-space: nowrap;
  transition: opacity .35s cubic-bezier(.23,1,.32,1), transform .35s cubic-bezier(.23,1,.32,1);
}
.fx-wf-blabel.fx-hide { transform: translate(-50%,-50%) scale(.85); }
.fx-node {
  position: absolute; width: 110px; height: 46px; overflow: hidden;
  background: var(--panel); border: 1px solid var(--border-strong); border-radius: 9px;
  padding: 7px 10px 6px; box-shadow: 0 1px 2px rgba(22,22,21,.06), 0 3px 8px rgba(22,22,21,.04);
  transition: opacity .3s cubic-bezier(.23,1,.32,1), transform .3s cubic-bezier(.34,1.45,.64,1), border-color .4s, background .4s;
}
.fx-node::before {
  content: ""; position: absolute; top: 9px; right: 9px; width: 5px; height: 5px;
  border-radius: 50%; background: var(--border-strong);
}
.fx-node b { display: block; font-size: 9.5px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; padding-right: 10px; }
.fx-node span { display: block; font-size: 8px; color: var(--muted); line-height: 1.3; margin-top: 1px; }
.fx-node.fx-hide { transform: scale(.82) translateY(4px); }
.fx-n-slate::before { background: rgb(var(--slate)); }
.fx-n-blue::before { background: rgb(var(--blue)); }
.fx-n-indigo::before { background: rgb(var(--indigo)); }
.fx-n-violet::before { background: rgb(var(--violet)); }
.fx-node.fx-earned { border-color: rgb(var(--green)); background: rgba(var(--green),.07); }
.fx-node.fx-earned::before { background: rgb(var(--green)); }
.fx-wf-status { font-family: var(--mono); font-size: 10px; color: var(--green-deep); height: 16px; transition: opacity .45s; }

/* ---- handoff: sources read, then the brief lands -------------------------- */
.fx-ho { min-height: 0; gap: 12px; }
.fx-src { border: 1px solid var(--border); border-radius: 10px; background: var(--panel); padding: 11px 13px; }
.fx-src-head { display: flex; align-items: center; gap: 9px; }
.fx-ic { width: 14px; height: 14px; border-radius: 50%; flex: none; position: relative; }
.fx-src:not(.done) .fx-ic { border: 1.5px solid var(--border-strong); border-top-color: var(--muted); animation: fx-rot .7s linear infinite; }
.fx-src.done .fx-ic { background: rgb(var(--green)); }
.fx-src.done .fx-ic::after { content: ""; position: absolute; left: 4.5px; top: 2.5px; width: 3px; height: 6.5px; border: solid #fff; border-width: 0 1.5px 1.5px 0; transform: rotate(40deg); }
@keyframes fx-rot { to { transform: rotate(360deg); } }
.fx-src-t { font-size: 12.5px; font-weight: 600; letter-spacing: -.01em; }
.fx-src-s { margin-left: auto; font-family: var(--mono); font-size: 9px; letter-spacing: .05em; color: var(--faint); white-space: nowrap; }
.fx-src.done .fx-src-s { color: var(--green-deep); }
.fx-res { font-size: 12px; color: var(--muted); margin: 7px 0 0 23px; line-height: 1.5; opacity: 0; transition: opacity .45s cubic-bezier(.23,1,.32,1); }
.fx-src.done .fx-res { opacity: 1; }
.fx-res b { color: var(--fg); font-weight: 600; }

/* ---- analytics / loop: the funnel, closed by the read --------------------- */
.fx-an { min-height: 0; }
.fx-mets { display: flex; gap: 26px; margin-bottom: 16px; transition: opacity .5s; }
.fx-met { display: flex; flex-direction: column; gap: 3px; }
.fx-met-v { font-family: var(--sans); font-size: 22px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.015em; transition: color .4s; }
.fx-met-l { font-family: var(--sans); font-size: 9px; font-weight: 600; letter-spacing: .08em; color: var(--faint); }
.fx-met-g .fx-met-v { color: var(--green-deep); font-weight: 600; }
.demo-live .fx-met-g .fx-met-v { color: var(--fg); font-weight: 400; }
.demo-live.fx-fin .fx-met-g .fx-met-v { color: var(--green-deep); font-weight: 600; }
.fx-an .stage-row, .fx-loop .stage-row { margin-top: 0; }
.fx-an-foot { font-family: var(--mono); font-size: 9px; color: var(--faint); margin-top: 10px; }
.fx-loop { min-height: 0; }

/* ---- responsive ----------------------------------------------------------- */
@media (max-width: 560px) {
  .fx-stage { padding: 16px; }
  .fx-wf-canvas { transform: scale(.8); transform-origin: top center; }
  .fx-wf-viewport { height: 218px; overflow: hidden; }
  .fx-mets { gap: 18px; flex-wrap: wrap; }
  .fx-omni .msg { max-width: 92%; }
}

/* ── flow: the cohort as a sankey — thinning bands, a quiet branch, a nudge ── */
.fx-flow { padding: 14px 6px 6px; gap: 10px; }
.fx-flow .fl-canvas {
  position: relative; width: 100%;
  --fl-drop: color-mix(in srgb, var(--border-strong) 80%, transparent);
}
.fx-flow svg { display: block; width: 100%; height: auto; overflow: visible; }
.fl-b { transition: opacity .45s cubic-bezier(.23,1,.32,1); }
.fl-r { clip-path: inset(-3% -2% -3% -2%); transition: clip-path .6s cubic-bezier(.23,1,.32,1); }
.fl-r.fx-hide { clip-path: inset(-3% 102% -3% -2%); transition-duration: .25s; }
.fl-r0  { fill: rgba(var(--slate), .26); }
.fl-r1  { fill: rgba(var(--indigo), .22); }
.fl-r1b { fill: url(#fl-fade); }
.fl-r2  { fill: rgba(var(--green), .4); }
.fl-rdrop  { fill: var(--fl-drop); opacity: .5; }
.fl-rnudge { fill: rgba(var(--blue), .38); }
.fl-b { fill: var(--border-strong); }
.fl-b0 { fill: rgb(var(--slate)); }
.fl-b1 { fill: rgb(var(--indigo)); }
.fl-b2 { fill: rgb(var(--violet)); }
.fl-b3 { fill: rgb(var(--green)); }
.fl-bpool { fill: var(--fl-drop); }
.fl-b.fx-hide { opacity: 0; }

.fl-lab {
  position: absolute; top: -6px; display: flex; flex-direction: column; gap: 1px;
  transition: opacity .45s cubic-bezier(.23,1,.32,1);
}
.fl-lab i { font-style: normal; font-family: var(--sans); font-size: 9px; font-weight: 600; letter-spacing: .08em; color: var(--faint); white-space: nowrap; }
.fl-lab b { font-family: var(--sans); font-size: 16px; font-weight: 600; letter-spacing: -.01em; color: var(--fg); font-variant-numeric: tabular-nums; line-height: 1; }
.fl-lab-done { text-align: right; align-items: flex-end; }
.fl-lab-done i { color: var(--green-deep); }
.fx-fin .fl-lab-done b { color: var(--green-deep); font-weight: 600; }
.fl-chip {
  position: absolute; left: 26%; bottom: 6%;
  font-family: var(--mono); font-size: 9px; color: var(--muted);
  background: var(--panel); border: 1px solid var(--border); border-radius: 999px;
  padding: 3px 9px; white-space: nowrap;
  transition: opacity .45s cubic-bezier(.23,1,.32,1), transform .45s cubic-bezier(.23,1,.32,1);
}
.fl-chip b { color: var(--fg); font-weight: 600; }
.fl-chip.fx-hide { transform: translateY(4px); }
.fl-lab.fx-hide, .fl-chip.fx-hide { opacity: 0; }

/* ── motion: guides stacked & orchestrated under one harness ─────────────── */
.fx-mo { gap: 10px; }
.fx-mo-goal { display: flex; align-items: baseline; gap: 8px; font-family: var(--mono); font-size: 10.5px; color: var(--muted); border: 1px solid var(--border); background: var(--panel-2); border-radius: 9px; padding: 8px 12px; flex-wrap: wrap; }
.fx-mo-goal .g { color: var(--green-deep); letter-spacing: .08em; font-size: 9px; }
.fx-mo-goal .s { color: var(--faint); }
.fx-mo-lanes { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }
.fx-mo-lane { border: 1px solid var(--border); border-radius: 10px; background: var(--panel); padding: 9px; display: flex; flex-direction: column; gap: 6px; min-height: 158px; }
.fx-mo-lh { font-family: var(--mono); font-size: 9px; letter-spacing: .09em; color: var(--faint); }
.fx-mo-slot { display: flex; flex-direction: column; gap: 5px; flex: 1; }
.fx-g { display: grid; grid-template-columns: 12px minmax(0,1fr); align-items: center; row-gap: 1px; border: 1px solid var(--border); border-radius: 7px; background: var(--panel-2); padding: 6px 8px; font-size: 10px; font-weight: 500; color: var(--fg); line-height: 1.3; transition: opacity .3s cubic-bezier(.23,1,.32,1), transform .3s cubic-bezier(.34,1.45,.64,1), border-color .35s, background .35s; }
.fx-g i { width: 6px; height: 6px; border-radius: 50%; background: rgb(var(--blue)); }
.fx-g b { grid-column: 2; font-family: var(--mono); font-weight: 400; font-size: 8px; color: var(--faint); white-space: nowrap; }
.fx-g.fx-hide { opacity: 0; transform: scale(.85) translateY(3px); }
.fx-g.fx-g-work i { animation: fx-soft 1.8s ease-in-out infinite; }
@keyframes fx-soft { 50% { opacity: .55; } }
.fx-g-done { border-color: rgba(var(--green),.45); background: rgba(var(--green),.06); }
.fx-g-done i { background: rgb(var(--green)); }
.fx-g-done b { color: var(--green-deep); }
.fx-g-hum { border-color: #EEDCA8; background: #FFF9E8; }
.fx-g-hum i { background: #D97706; }
.fx-g-voice i { background: rgb(var(--violet)); }
.fx-mo-exit { font-family: var(--mono); font-size: 8.5px; color: var(--faint); border-top: 1px dashed var(--border); padding-top: 6px; transition: color .4s; }
.fx-mo-exit.on { color: var(--green-deep); }


/* convo scene: message build-in */
[data-fx="convo"] .msg, [data-fx="convo"] .receipt { transition: opacity .45s cubic-bezier(.23,1,.32,1), transform .45s cubic-bezier(.23,1,.32,1); }
[data-fx="convo"] .msg.fx-hide, [data-fx="convo"] .receipt.fx-hide { opacity: 0; transform: translateY(7px); }

/* convo typing indicator */
.fx-typing { align-self: flex-end; display: inline-flex; gap: 4px; align-items: center; background: rgba(var(--green),.07); border: 1px solid rgba(var(--green),.3); border-radius: 12px; border-bottom-right-radius: 4px; padding: 9px 13px; transition: opacity .3s; }
.fx-typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--green-deep); opacity: .5; animation: fx-typedot 1.1s ease-in-out infinite; }
.fx-typing i:nth-child(2) { animation-delay: .18s; }
.fx-typing i:nth-child(3) { animation-delay: .36s; }
@keyframes fx-typedot { 40% { opacity: 1; transform: translateY(-2px); } }
.fx-typing.fx-hide { opacity: 0; }
.fx-none { display: none !important; }