/* agents: styles for the #agents section and js/fx/agents.js */
/* Base styles work without JS. Hidden start states live under .fx-agents, which the module sets. */

/* ---- copy ---- */
#agents .agents-top{align-items:center}
#agents h2{max-width:18ch}
#agents .agents-lead{margin-top:22px;max-width:52ch;font-size:17px;color:#ffffffe6}
#agents .agents-lead+.btn{margin-top:30px}

/* ---- example task board: a .termbox with rows instead of pre text ---- */
#agents .agents-board{white-space:normal;min-height:0;display:grid;gap:14px}
#agents .agents-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 18px;
  padding-bottom:14px;border-bottom:1px solid #ffffff12}
#agents .agents-row.agents-cur{border-bottom:0;padding-bottom:0;justify-content:flex-start;gap:0}
#agents .agents-st{display:inline-flex;align-items:center;gap:9px;font-size:14px}
#agents .agents-st::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
#agents .agents-done{color:var(--aqua)}
#agents .agents-rev{color:#93a8e1}
#agents .agents-wait{color:#a9c78f}
/* Narrow screens: each status sits under its task, so no row wraps on its own. */
@media(max-width:480px){#agents .agents-row:not(.agents-cur){flex-direction:column;align-items:flex-start}}

/* ---- numbers: two key figures ---- */
#agents .agents-stats{list-style:none;padding:0;margin:clamp(48px,6vw,80px) 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,320px));
  border-top:1px solid var(--line)}
#agents .agents-stats li{padding:28px 24px 6px 0;display:flex;flex-direction:column;gap:10px}
#agents .agents-stats li+li{padding-left:24px;border-left:1px solid var(--line)}
#agents .agents-stats b{font-weight:300;font-size:clamp(38px,4.4vw,58px);line-height:1;color:var(--aqua);font-variant-numeric:tabular-nums}
#agents .agents-stats span{font-family:var(--mono);font-size:13px;line-height:1.5;color:#ffffffc0}
@media(max-width:620px){
  #agents .agents-stats{grid-template-columns:1fr 1fr}
  #agents .agents-stats li{padding:22px 16px 4px 0}
  #agents .agents-stats li+li{padding-left:16px}
}

/* ---- how one job runs, and the safeguards ---- */
#agents .agents-how{margin-top:clamp(56px,7vw,90px)}
#agents .agents-h3{font-size:clamp(22px,2.2vw,28px)}
#agents .agents-steps,#agents .agents-guard{list-style:none;padding:0;margin:26px 0 0;font-size:16px;color:#ffffffe6}
#agents .agents-steps li{padding:14px 0;border-top:1px solid var(--line);display:flex;gap:18px}
#agents .agents-steps li span{font-family:var(--mono);color:var(--aqua);font-size:14px;padding-top:2px}
#agents .agents-guard li{padding:14px 0 14px 26px;border-top:1px solid var(--line);position:relative}
#agents .agents-guard li::before{content:"";position:absolute;left:2px;top:22px;width:9px;height:9px;border-radius:50%;
  border:1.5px solid #a9c78f}

/* ---- what it means for a team: three panels in the dark band ---- */
#agents .agents-gain{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:clamp(56px,7vw,90px)}
#agents .agents-gain div{border:1px solid var(--line);border-bottom:5px solid;border-radius:6px;padding:26px 24px 30px;background:#ffffff08}
#agents .agents-gain div:nth-child(1){border-bottom-color:var(--aqua)}
#agents .agents-gain div:nth-child(2){border-bottom-color:#93a8e1}
#agents .agents-gain div:nth-child(3){border-bottom-color:#a9c78f}
#agents .agents-gain p{margin-top:10px;font-size:16px;color:#ffffffd0}
@media(max-width:860px){
  #agents .agents-how,#agents .agents-gain{grid-template-columns:1fr}
}

/* ---- motion: rows arrive one by one, the waiting dot pulses while on screen ---- */
@media(prefers-reduced-motion:no-preference){
  .fx-agents .agents-row{opacity:0;translate:0 8px;transition:opacity .5s,translate .5s cubic-bezier(.2,.7,.2,1);
    transition-delay:calc(.35s + var(--i,0) * .45s)}
  .fx-agents.fx-in .agents-row{opacity:1;translate:none}
  .fx-agents .agents-wait::before{animation:agents-pulse 1.8s ease-in-out infinite;animation-play-state:paused}
  .fx-agents.fx-live .agents-wait::before{animation-play-state:running}
}
@keyframes agents-pulse{0%,100%{box-shadow:0 0 0 0 #a9c78f00}50%{box-shadow:0 0 0 5px #a9c78f40}}