/* ============================================================
   AI SHOWCASE — auto-cycling capability pipeline (v2c / NewLayoutC only)
   Replaces the 5 stacked pf-cap rows in ai_capabilities_proof.html.
   Layout: left = vertical pipeline (nodes + progress-ring playhead),
           right = a glass "product" frame whose stage assembles
           step-by-step per capability. Auto-advances; hover pauses;
           click a node to jump. Accent hue shifts per capability.
   All classes namespaced .ais- to avoid Bootstrap/theme collisions.
   Header reuses the shared .v2-shead component (section-heads.css).
   ============================================================ */
.ais{
  --ais-cyan:#74FFE2; --ais-blue:#5e9aff;
  --ais-ink:#f4f7ff; --ais-ink2:#eaf0fa; --ais-muted:#9fb2cc; --ais-faint:#6b7e98;
  --ais-line:rgba(120,150,200,.14); --ais-line2:rgba(108,148,220,.16);
  --ais-card-top:#1b2842; --ais-card-bot:#141f37;
  --ais-node-bg:#0b1727;            /* matches page bg (falcon-dark) behind this section — occludes the track line */
  position:relative;padding:96px 0;
}
/* intentionally wider than the 1140 rail the other sections use — this section stands out.
   padding:0 so the content is the true 1448 (border-box padding would shrink it); the
   calc keeps a small gutter only when the viewport is too narrow to fit 1448. */
.ais__inner{width:min(1448px,calc(100% - 48px));margin:0 auto;padding:0}

/* near-even split with a generous gap so the frame doesn't dominate at the wider width */
.ais-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(44px,6vw,96px);align-items:start}

/* ── left: the pipeline ── */
/* min-height floors the column to its tallest per-feature state so switching capabilities
   never changes the section height. Tuned to the wider (1448) layout with near-even columns
   (measured EN natural: 412px capped ≥1512, ~433px @1200, ~455px @1000); small buffer for
   other languages. With the grid-rows collapse (no overshoot), nothing below moves. */
.ais-list{display:flex;flex-direction:column;gap:4px;position:relative;min-height:436px}
.ais-list::before{content:"";position:absolute;left:26px;top:31px;bottom:31px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,var(--ais-line),rgba(120,150,200,.05));z-index:0}
.ais-item{position:relative;text-align:left;border:0;background:none;cursor:pointer;width:100%;
  padding:14px 16px 14px 10px;border-radius:14px;
  opacity:0;transform:translateX(-10px);
  transition:opacity .55s cubic-bezier(.2,.7,.2,1),transform .55s cubic-bezier(.2,.7,.2,1),background .15s ease}
.ais.in .ais-item{opacity:1;transform:none}
/* delay lists map to [opacity,transform,background] — keep entrance stagger, hover background stays instant */
.ais.in .ais-item:nth-child(1){transition-delay:.04s,.04s,0s}
.ais.in .ais-item:nth-child(2){transition-delay:.10s,.10s,0s}
.ais.in .ais-item:nth-child(3){transition-delay:.16s,.16s,0s}
.ais.in .ais-item:nth-child(4){transition-delay:.22s,.22s,0s}
.ais.in .ais-item:nth-child(5){transition-delay:.28s,.28s,0s}
.ais-item::before{content:"";position:absolute;inset:0;border-radius:14px;pointer-events:none;
  background:linear-gradient(100deg,color-mix(in srgb,var(--ais-accent) 9%,transparent),transparent 60%);
  opacity:0;transition:opacity .35s}
.ais-item.on::before{opacity:1}
.ais-item:hover:not(.on){background:rgba(120,150,200,.07)}
.ais-ih{display:flex;align-items:center;gap:11px;position:relative;z-index:1}
/* circular node + progress ring = the playhead */
.ais-node{position:relative;width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--ais-node-bg)}
.ais-ring{position:absolute;inset:-3px;border-radius:50%;
  background:conic-gradient(var(--ais-accent) calc(var(--ais-p,0)*1turn),rgba(120,150,200,.16) 0);
  -webkit-mask:radial-gradient(closest-side,transparent 71%,#000 72%);mask:radial-gradient(closest-side,transparent 71%,#000 72%);
  opacity:0;transition:opacity .3s}
.ais-item.on .ais-ring{opacity:1}
.ais-tile{width:30px;height:30px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:rgba(120,150,200,.08);border:1px solid var(--ais-line);color:var(--ais-faint);transition:.35s}
.ais-tile svg{width:15px;height:15px}
.ais-item:hover:not(.on) .ais-tile{border-color:var(--ais-line2);color:var(--ais-muted);background:rgba(120,150,200,.14)}
.ais-item.on .ais-tile{background:color-mix(in srgb,var(--ais-accent) 18%,transparent);border-color:color-mix(in srgb,var(--ais-accent) 45%,transparent);color:var(--ais-accent);
  box-shadow:0 0 18px -4px color-mix(in srgb,var(--ais-accent) 75%,transparent)}
.ais-title{font-family:'Poppins',sans-serif;font-size:15.5px;font-weight:600;color:var(--ais-muted);transition:color .3s}
.ais-item.on .ais-title{color:var(--ais-ink)}
.ais-item:hover:not(.on) .ais-title{color:var(--ais-ink2)}
/* description collapse via grid-template-rows 0fr→1fr — animates to the EXACT content height
   (no max-height overshoot), so a flipping item and its neighbour cancel out and the page
   below never jumps. .ais-descwrap/.ais-desc are <span>s (valid inside <button>). */
.ais-descwrap{display:grid;grid-template-rows:0fr;position:relative;z-index:1;opacity:0;
  transition:grid-template-rows .45s cubic-bezier(.2,.7,.2,1),margin-top .45s cubic-bezier(.2,.7,.2,1),opacity .35s}
.ais-item.on .ais-descwrap{grid-template-rows:1fr;opacity:1;margin-top:10px}
/* The title↔desc gap is the wrapper's animated margin-top, NOT padding inside .ais-desc:
   padding inside the grid track doesn't collapse symmetrically during the 0fr↔1fr
   interpolation and pulls the items below up ~10px mid-flip. Margin (outside the track)
   animates as a clean px value and cancels perfectly between the two flipping items. */
.ais-desc{min-height:0;overflow:hidden;padding:0 0 0 45px;font-size:13.5px;line-height:1.6;color:var(--ais-faint)}
.ais-link{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-size:12.5px;font-weight:600;color:var(--ais-accent);text-decoration:none;
  opacity:0;transform:translateY(4px);transition:opacity .35s .1s,transform .35s .1s}
.ais-item.on .ais-link{opacity:1;transform:none}
.ais-link .t{background-image:linear-gradient(90deg,var(--ais-accent),var(--ais-accent));background-size:0 1.5px;background-position:0 100%;background-repeat:no-repeat;padding-bottom:2px;transition:background-size .32s cubic-bezier(.22,.8,.2,1)}
.ais-link:hover{text-decoration:none;color:var(--ais-accent)}
.ais-link:hover .t{background-size:100% 1.5px}
.ais-link svg{width:14px;height:14px;transition:transform .25s}
.ais-link:hover svg{transform:translateX(4px)}

/* ── right: the glass frame ── */
.ais-stage{position:relative}
.ais-glow{position:absolute;inset:-40px -20px;z-index:0;pointer-events:none;
  background:radial-gradient(60% 55% at 78% 12%,color-mix(in srgb,var(--ais-accent) 22%,transparent),transparent 70%);
  filter:blur(14px);opacity:.55;transition:background .6s}
.ais-frame{position:relative;z-index:1;border-radius:18px;overflow:hidden;
  background:linear-gradient(165deg,rgba(24,37,62,.72),rgba(12,21,38,.9));
  border:1px solid var(--ais-line2);box-shadow:0 40px 90px -50px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.03);
  opacity:0;transform:translateY(16px) scale(.985)}
.ais.in .ais-frame{opacity:1;transform:none;transition:opacity .6s .12s cubic-bezier(.2,.7,.2,1),transform .6s .12s cubic-bezier(.2,.7,.2,1)}
.ais-chrome{display:flex;align-items:center;gap:7px;padding:12px 16px;border-bottom:1px solid var(--ais-line)}
.ais-chrome .ais-dot{width:9px;height:9px;border-radius:50%;background:rgba(120,150,200,.22)}
.ais-chrome .ais-lbl{margin-left:8px;font-size:11px;color:var(--ais-faint);font-family:'JetBrains Mono',ui-monospace,monospace}
.ais-chrome .ais-live{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:10.5px;color:var(--ais-accent)}
.ais-chrome .ais-live-dot{width:6px;height:6px;border-radius:50%;background:var(--ais-accent);box-shadow:0 0 8px var(--ais-accent);animation:ais-pulse 2s infinite}
@keyframes ais-pulse{0%,100%{opacity:1}50%{opacity:.35}}
.ais-panel{padding:18px;min-height:298px}  /* locked height so the frame doesn't jump between capabilities */

/* staged assemble reveal */
.ais-assemble > *{opacity:0;transform:translateY(9px)}
.ais-assemble.go > *{animation:ais-step .5s cubic-bezier(.2,.7,.2,1) forwards}
.ais-assemble.go > *:nth-child(1){animation-delay:.04s}
.ais-assemble.go > *:nth-child(2){animation-delay:.13s}
.ais-assemble.go > *:nth-child(3){animation-delay:.22s}
.ais-assemble.go > *:nth-child(4){animation-delay:.31s}
.ais-assemble.go > *:nth-child(5){animation-delay:.40s}
.ais-assemble.go > *:nth-child(6){animation-delay:.49s}
.ais-assemble.go > *:nth-child(7){animation-delay:.58s}
@keyframes ais-step{to{opacity:1;transform:none}}
.ais-assemble.go .ais-win,.ais-assemble.go .ais-hero{animation:ais-step .5s cubic-bezier(.2,.7,.2,1) forwards,ais-winglow 1.1s ease .55s}
@keyframes ais-winglow{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ais-accent) 45%,transparent)}
  40%{box-shadow:0 0 0 5px color-mix(in srgb,var(--ais-accent) 0%,transparent),0 14px 40px -14px color-mix(in srgb,var(--ais-accent) 60%,transparent)}
  100%{box-shadow:0 0 0 0 transparent}}

/* ── stage content atoms ── */
.ais-mini{font-size:12.5px;line-height:1.55;color:var(--ais-ink2)}
.ais-crumb{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--ais-faint);margin-bottom:14px;flex-wrap:wrap}
.ais-crumb b{color:var(--ais-muted);font-weight:600}
.ais-pill{margin-left:auto;display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;
  background:color-mix(in srgb,var(--ais-accent) 16%,transparent);color:var(--ais-accent);font-size:10.5px;font-weight:600}
.ais-pill svg{width:11px;height:11px}
.ais-rep{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:11px;
  background:linear-gradient(180deg,var(--ais-card-top),var(--ais-card-bot));border:1px solid var(--ais-line2);margin-bottom:7px}
.ais-rep-n{width:19px;height:19px;flex:none;border-radius:6px;background:rgba(120,150,200,.12);color:var(--ais-faint);font-size:11px;font-weight:600;display:grid;place-items:center;font-family:'JetBrains Mono',ui-monospace,monospace}
.ais-rep-id{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;color:var(--ais-faint);margin-right:8px}
.ais-rep-t{color:var(--ais-ink2);font-size:12.5px}
.ais-rep-av{margin-left:auto;font-size:10px;font-weight:700;color:#0a1120;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#7ab2ff,#5e9aff)}
.ais-more{font-size:11.5px;color:var(--ais-faint);padding-left:30px;margin:2px 0 10px}
.ais-more b{color:var(--ais-muted)}
.ais-conn{display:flex;align-items:center;gap:10px;margin:10px 0}
.ais-conn-l{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--ais-line2),transparent)}
.ais-conn-c{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--ais-accent);font-weight:600}
.ais-conn-c svg{width:13px;height:13px}
.ais-win{display:flex;align-items:center;gap:11px;padding:12px 13px;border-radius:12px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--ais-accent) 14%,transparent),color-mix(in srgb,var(--ais-accent) 4%,transparent));
  border:1px solid color-mix(in srgb,var(--ais-accent) 30%,transparent)}
.ais-win-ic{width:28px;height:28px;flex:none;border-radius:8px;background:color-mix(in srgb,var(--ais-accent) 22%,transparent);color:var(--ais-accent);display:grid;place-items:center}
.ais-win-ic svg{width:16px;height:16px}
.ais-win-t{font-size:13px;font-weight:600;color:var(--ais-ink)}
.ais-win-s{font-size:11px;color:var(--ais-muted);margin-top:1px}
.ais-hero{display:flex;align-items:center;gap:12px;padding:13px;border-radius:12px;margin-bottom:9px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--ais-accent) 16%,transparent),color-mix(in srgb,var(--ais-accent) 5%,transparent));
  border:1px solid color-mix(in srgb,var(--ais-accent) 32%,transparent)}
.ais-hero-b{flex:1;min-width:0}
.ais-hero-k{font-size:10.5px;color:#ffd0b8;margin-bottom:2px}
.ais-hero-t{font-size:13.5px;font-weight:600;color:var(--ais-ink)}
.ais-hero-score{text-align:right;font-family:'JetBrains Mono',ui-monospace,monospace}
.ais-hero-num{font-size:22px;font-weight:600;color:var(--ais-accent);line-height:1}
.ais-hero-u{font-size:9px;letter-spacing:.1em;color:#ffb790}
.ais-srow{display:flex;align-items:center;gap:10px;padding:7px 4px;font-size:12px}
.ais-srow-n{font-family:'JetBrains Mono',ui-monospace,monospace;color:var(--ais-faint);font-size:11px;width:14px}
.ais-srow-t{color:var(--ais-muted);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ais-srow-bar{width:78px;height:5px;border-radius:3px;background:rgba(120,150,200,.14);overflow:hidden}
.ais-srow-bar i{display:block;height:100%;border-radius:3px}
.ais-srow-bar i.warm{background:linear-gradient(90deg,#ff8a45,#e85a2a)}
.ais-srow-bar i.cool{background:linear-gradient(90deg,#5e9aff,#3f6fd8)}
.ais-srow-sc{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11.5px;color:var(--ais-muted);width:20px;text-align:right}
.ais-tok{border-radius:5px;padding:1px 5px;font-weight:500}
.ais-tok--type{background:rgba(255,138,69,.16);color:#ffb488}
.ais-tok--area{background:rgba(116,255,226,.14);color:var(--ais-cyan)}
.ais-tok--plat{background:rgba(126,178,255,.16);color:#a9caff}
.ais-msg{display:flex;gap:9px;margin-bottom:9px;align-items:flex-start}
.ais-msg .ais-av{width:24px;height:24px;flex:none;border-radius:50%;display:grid;place-items:center;font-size:9.5px;font-weight:700;color:#0a1120}
.ais-av--bot{background:linear-gradient(135deg,#74FFE2,#48d597)}
.ais-av--user{background:linear-gradient(135deg,#7ab2ff,#5e9aff)}
.ais-msg .ais-who{font-size:11px;color:var(--ais-faint);margin-bottom:3px}
.ais-bub{background:rgba(120,150,200,.1);border:1px solid var(--ais-line);border-radius:4px 12px 12px 12px;padding:8px 11px;font-size:12px;color:var(--ais-ink2);display:inline-block}
.ais-cite{display:flex;align-items:center;gap:5px;margin-top:7px;font-size:10.5px;color:var(--ais-accent)}
.ais-cite svg{width:11px;height:11px}
.ais-tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:11px}
.ais-tg{display:inline-flex;align-items:center;gap:5px;padding:4px 8px;border-radius:7px;font-size:11px;border:1px solid var(--ais-line2);background:rgba(120,150,200,.06)}
.ais-tg .ais-k{font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--ais-faint)}
.ais-chan{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ais-muted);margin-bottom:12px}
.ais-chan svg{width:13px;height:13px;color:var(--ais-faint)}
.ais-chan .ais-time{margin-left:8px;color:var(--ais-faint);font-size:10.5px}
.ais-eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ais-accent)}
.ais-eyebrow svg{width:13px;height:13px}

@media(min-width:1512px){.ais-list{min-height:416px}}  /* inner capped at 1448 → widest list, shortest descs */
@media(max-width:1120px){.ais-list{min-height:460px}}
@media(max-width:860px){
  .ais-grid{grid-template-columns:1fr;gap:26px}
  .ais-list{min-height:0}   /* single-column: no floor needed, avoids an awkward gap */
}
@media(prefers-reduced-motion:reduce){
  .ais-item,.ais-frame{opacity:1;transform:none}
  .ais-assemble > *{opacity:1;transform:none}
}