/* ===================================================================
   Cyboflow landing — Features section
   Each feature pins for a scroll segment and scrubs a transition via
   a per-track CSS var --p (0→1), set by main.js. CSS interpolates
   off --p so it degrades gracefully if JS doesn't run.
   =================================================================== */

.features { position: relative; background: var(--cf-page); }
.feat-track { position: relative; height: 240vh; --p: 0; }
.feat-pin {
  position: sticky; top: 0; height: 100vh;
  display: grid; grid-template-columns: 0.9fr 1.1fr; align-items: center;
  gap: clamp(28px, 5vw, 78px);
  width: min(1180px, 100% - 64px); margin-inline: auto;
}

/* ---- text column ---- */
.feat-eyebrow {
  font-size: var(--cf-size-eyebrow); letter-spacing: var(--cf-track-eyebrow-wide);
  text-transform: uppercase; color: var(--cf-ink-3); font-weight: 700;
  display: inline-flex; align-items: center; gap: 9px;
}
.feat-eyebrow::before { content: ""; width: 18px; height: 1px; background: var(--cf-rust); }
.feat-eyebrow b { color: var(--cf-rust); }
.feat-h { font-size: clamp(27px, 3.5vw, 46px); font-weight: 700; letter-spacing: -.026em; line-height: 1.1; margin: 16px 0 0; text-wrap: balance; }
.feat-h .accent { color: var(--cf-rust); }
.feat-sub { font-size: clamp(13.5px, 1.35vw, 17px); line-height: 1.62; color: var(--cf-ink-2); margin: 20px 0 0; max-width: 46ch; text-wrap: pretty; }
.feat-sub b { color: var(--cf-ink); font-weight: 700; }
.feat-steps { margin-top: 30px; display: flex; gap: 7px; align-items: center; }
.feat-steps i { width: 26px; height: 3px; background: var(--cf-line); transition: background .2s; }
.feat-steps i.on { background: var(--cf-rust); }

/* ---- visual frame ---- */
.feat-vis {
  position: relative; border: 1.4px solid var(--cf-ink); background: var(--cf-card);
  aspect-ratio: 4 / 3.05; max-height: 70vh; width: 100%; overflow: hidden;
  box-shadow: var(--cf-shadow-modal);
}
.vhead {
  height: 30px; display: flex; align-items: center; gap: 9px; padding: 0 12px;
  background: linear-gradient(var(--cf-surface), var(--cf-surface-dim)); border-bottom: 1px solid var(--cf-line);
  font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--cf-ink-3); font-weight: 700;
}
.vhead .tl { display: flex; gap: 5px; }
.vhead .tl span { width: 8px; height: 8px; border-radius: 50%; }
.vhead .vpill { margin-left: auto; border: 1px solid var(--cf-rust); color: var(--cf-rust); padding: 1px 7px; font-size: 8px; letter-spacing: .14em; display: inline-flex; align-items: center; gap: 5px; }
.vhead .vpill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--cf-rust); animation: cf-pulse 1.4s infinite; }
.vbody { position: absolute; inset: 30px 0 0 0; overflow: hidden; }
.vlayer { position: absolute; inset: 0; padding: 14px; display: flex; flex-direction: column; gap: 9px; }

/* generic mini bits */
.frow { height: 7px; border-radius: 1px; background: var(--cf-line); }
.frow.w8{width:80%}.frow.w6{width:60%}.frow.w4{width:40%}
.frow.rust{background:rgba(201,100,66,.55)}.frow.green{background:rgba(45,138,91,.5)}
.dotp { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.dotp.rust{background:var(--cf-rust)}.dotp.gold{background:var(--cf-gold)}.dotp.green{background:var(--cf-green)}
.checkstamp {
  width: 22px; height: 22px; border-radius: 50%; background: var(--cf-green); color: #fff;
  display: flex; align-items: center; justify-content: center; flex: none;
  box-shadow: 0 2px 6px rgba(45,138,91,.35);
}

/* =========== FEATURE 1 · review queue -> all working =========== */
.f1a { opacity: clamp(0, calc((0.6 - var(--p)) / 0.16), 1); }
.f1b { opacity: clamp(0, calc((var(--p) - 0.52) / 0.22), 1); transform: translateY(calc((1 - clamp(0, calc((var(--p) - 0.52) / 0.22), 1)) * 14px)); }

.rq-group { display: flex; flex-direction: column; gap: 5px; }
.rq-glabel { font-size: 8px; letter-spacing: .16em; text-transform: uppercase; color: var(--cf-ink-3); font-weight: 700; }
.rq-card {
  display: flex; align-items: center; gap: 10px; border: 1px solid var(--cf-line);
  background: var(--cf-card); padding: 8px 10px; position: relative;
}
.rq-chip { font-size: 7.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; padding: 2px 6px; border: 1px solid currentColor; flex: none; }
.rq-chip.perm { color: var(--cf-amber); }
.rq-chip.dec { color: var(--cf-rust); }
.rq-chip.act { color: var(--cf-ink-3); }
.rq-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.rq-name { font-size: 10.5px; color: var(--cf-ink); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rq-btns { display: flex; gap: 5px; flex: none; }
.rq-btn { font-size: 7.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; padding: 3px 8px; border: 1px solid var(--cf-ink); color: var(--cf-ink); }
.rq-btn.go { background: var(--cf-ink); color: var(--cf-page); }
.rq-stamp { position: absolute; right: 10px; top: 50%; transform: translateY(-50%) scale(.6); opacity: 0; }
.rq-card .rq-stamp { transition: none; }
/* staggered check reveal */
.rq-card.s1 .rq-stamp { opacity: clamp(0, calc((var(--p) - 0.10) / 0.05), 1); transform: translateY(-50%) scale(clamp(.6, calc(.6 + (var(--p) - 0.10) / 0.05 * .4), 1)); }
.rq-card.s2 .rq-stamp { opacity: clamp(0, calc((var(--p) - 0.20) / 0.05), 1); transform: translateY(-50%) scale(clamp(.6, calc(.6 + (var(--p) - 0.20) / 0.05 * .4), 1)); }
.rq-card.s3 .rq-stamp { opacity: clamp(0, calc((var(--p) - 0.30) / 0.05), 1); transform: translateY(-50%) scale(clamp(.6, calc(.6 + (var(--p) - 0.30) / 0.05 * .4), 1)); }
.rq-card.s1 .rq-btns { opacity: clamp(0, calc((0.18 - var(--p)) / 0.06), 1); }
.rq-card.s2 .rq-btns { opacity: clamp(0, calc((0.28 - var(--p)) / 0.06), 1); }
.rq-card.s3 .rq-btns { opacity: clamp(0, calc((0.38 - var(--p)) / 0.06), 1); }

/* layer B — agent grid all working */
.aw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; height: 100%; }
.aw-tile { border: 1.4px solid var(--cf-ink); background: var(--cf-card); padding: 9px 10px; display: flex; flex-direction: column; gap: 7px; }
.aw-top { display: flex; align-items: center; gap: 7px; }
.aw-top .lab { font-size: 8px; letter-spacing: .14em; text-transform: uppercase; color: var(--cf-rust); font-weight: 700; }
.aw-name { font-size: 10px; color: var(--cf-ink); font-weight: 600; }
.aw-bar { height: 6px; background: var(--cf-line); position: relative; margin-top: auto; }
.aw-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--cf-rust); }

/* =========== FEATURE 2 · editor -> running =========== */
.f2a { opacity: clamp(0, calc((0.52 - var(--p)) / 0.16), 1); }
.f2b { opacity: clamp(0, calc((var(--p) - 0.46) / 0.18), 1); }
.wf-row { display: flex; align-items: stretch; gap: 0; flex: 0 0 auto; height: clamp(118px, 23vh, 172px); }
.f2a, .f2b { justify-content: center; }
.wf-node { flex: 1; border: 1.4px solid var(--cf-ink); background: var(--cf-card); display: flex; flex-direction: column; min-width: 0; }
.wf-node .nh { padding: 4px 7px; color: #fff; font-size: 8px; letter-spacing: .14em; text-transform: uppercase; display: flex; justify-content: space-between; }
.wf-node .nb { padding: 7px 8px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.wf-node .nname { font-size: 9.5px; color: var(--cf-ink); font-weight: 600; }
.wf-node .nfoot { padding: 4px 8px; border-top: 1px dashed var(--cf-line); font-size: 7.5px; letter-spacing: .08em; color: var(--cf-ink-3); display: flex; align-items: center; gap: 5px; }
.wf-conn { width: 16px; align-self: center; height: 1.4px; background: var(--cf-ink); position: relative; flex: none; }
.wf-conn::after { content: ""; position: absolute; right: -1px; top: -3px; border: 4px solid transparent; border-left-color: var(--cf-ink); }
.f2a .wf-node { border-style: dashed; }
.f2a .wf-node.sel { border-style: solid; outline: 2px solid var(--cf-rust); outline-offset: 2px; }
/* running highlights driven by JS classes */
.f2b .wf-node { position: relative; }
.wf-node .nstate { text-transform: uppercase; }
.f2b .wf-node.run { outline: 2px solid var(--cf-rust); outline-offset: 2px; }
.f2b .wf-node.run .nstate { color: var(--cf-rust); }
.f2b .wf-node.run .nstate::before { content: "\25CF "; }
.f2b .wf-node.done .nstate { color: var(--cf-green); }
.f2b .wf-node.done .nstate::before { content: "\2713 "; }
.f2b .wf-node.done .nh { filter: saturate(.45); opacity: .82; }
.feat-feed { margin-top: 8px; border-top: 1px dashed var(--cf-line); padding-top: 7px; display: flex; flex-direction: column; gap: 3px; }
.feat-feed .fl { display: flex; gap: 7px; font-size: 9px; color: var(--cf-ink-2); align-items: center; min-width: 0; }
.feat-feed .fl > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.feat-feed .fl .ft { color: var(--cf-ink-3); width: 30px; flex: none; font-variant-numeric: tabular-nums; }
.feat-feed .fl.ok::before { content: "✓"; color: var(--cf-green); }
.feat-feed .fl.run::before { content: "●"; color: var(--cf-rust); }
.feat-feed .fl.f1 { opacity: clamp(0, calc((var(--p) - 0.55) / 0.05), 1); }
.feat-feed .fl.f2 { opacity: clamp(0, calc((var(--p) - 0.66) / 0.05), 1); }
.feat-feed .fl.f3 { opacity: clamp(0, calc((var(--p) - 0.77) / 0.05), 1); }
.feat-feed .fl.f4 { opacity: clamp(0, calc((var(--p) - 0.88) / 0.05), 1); }

/* =========== FEATURE 3 · insights / learning loop =========== */
.ins-wrap { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 0.95fr; }
.ins-loop { position: relative; display: flex; align-items: center; justify-content: center; border-right: 1px solid var(--cf-line); }
.ins-ring { width: 62%; aspect-ratio: 1; border-radius: 50%; border: 1.4px dashed var(--cf-line); position: relative; }
.ins-node { position: absolute; width: 32px; height: 32px; border-radius: 50%; background: var(--cf-card); border: 1.4px solid var(--cf-ink); display: flex; align-items: center; justify-content: center; font-size: 7px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--cf-ink-2); transform: translate(-50%, -50%); }
.ins-orbit { position: absolute; inset: 0; transform: rotate(calc(var(--p) * 360deg)); }
.ins-spark { position: absolute; top: -8px; left: 50%; width: 15px; height: 15px; margin-left: -7.5px; border-radius: 50%; background: var(--cf-rust); box-shadow: 0 0 0 5px rgba(201,100,66,.18); }
.ins-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 7.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--cf-ink-3); font-weight: 700; text-align: center; line-height: 1.5; }
.ins-metrics { padding: 16px; display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.ins-metric .ml { font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--cf-ink-3); font-weight: 700; display: flex; justify-content: space-between; gap: 8px; white-space: nowrap; }
.ins-metric .ml > span { overflow: hidden; text-overflow: ellipsis; }
.ins-metric .ml b { color: var(--cf-green); }
.ins-metric .mt { height: 8px; background: var(--cf-line); position: relative; margin-top: 6px; }
.ins-metric .mt i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--cf-green); }
.ins-metric.m1 .mt i { width: calc(58% + var(--p) * 34%); }
.ins-metric.m2 .mt i { width: calc(44% + var(--p) * 30%); background: var(--cf-rust); }
.ins-metric.m3 .mt i { width: calc(66% + var(--p) * 22%); background: var(--cf-gold); }

/* reduced motion / no-JS: show the resolved end-state */
@media (prefers-reduced-motion: reduce) {
  .feat-track { --p: 1; }
}
@media (max-width: 880px) {
  .feat-pin { grid-template-columns: 1fr; gap: 28px; align-content: center; }
  .feat-vis { max-height: 48vh; }
}