/*
 * Self-Improving AI Agents: an objective, a three-step improvement wheel and a results chart.
 * After the baseline, three runs of 6.6s each (change -> measure -> learn, 2.2s per step) light the wheel,
 * narrate in its hub, draw one chart segment and write one playbook lesson; run 3 holds, then everything resets.
 * Percentages below are of the 23.5s cycle; per-run pulses are written for run 1 and shifted by --ent-agents-delay.
 */

.ent-agents {
  --ent-agents-cycle: 23.5s;
  --ent-agents-run-length: calc(var(--ent-agents-cycle) * 0.280851); /* 6.6s */
  --ent-agents-delay: 0s; /* run 1; runs 2 and 3 override it below */
  width: 100%;
  height: 420px;
  box-sizing: border-box;
  padding: 18px;
  border-radius: 16px;
  background: var(--paper-2);
  box-shadow:
    0 16px 48px var(--ent-ink-a8),
    inset 0 0 0 1px var(--rule);
  font-family: Inter, system-ui, sans-serif;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
}

/* Shift a per-run pulse to its run: run N starts (N - 1) run-lengths later. */
.ent-agents__run--2,
.ent-agents__caption--run-2 {
  --ent-agents-delay: calc(
    var(--ent-agents-run-length) - var(--ent-agents-cycle)
  );
}
.ent-agents__run--3,
.ent-agents__caption--run-3 {
  --ent-agents-delay: calc(
    2 * var(--ent-agents-run-length) - var(--ent-agents-cycle)
  );
}

/* Layout: objective on top, wheel column and results card below */
.ent-agents__kicker {
  font:
    400 10.5px/14px "Geist Mono",
    ui-monospace,
    monospace;
  letter-spacing: 0.06em;
  color: var(--ent-zinc-350);
}
.ent-agents__goal {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ent-agents__goal-title {
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
}
.ent-agents__body {
  display: flex;
  gap: 12px;
  flex: 1;
  min-height: 0;
}
.ent-agents__cycle,
.ent-agents__results {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ent-agents__cycle {
  width: 306px;
  flex-shrink: 0;
}
.ent-agents__results {
  flex: 1;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--rule);
}

/* Wheel: drawn at 340x272 and scaled to fit the 306px column; the progress arc fills once per run */
.ent-agents__wheel-box {
  width: 306px;
  height: 245px;
  margin: auto 0;
}
.ent-agents__wheel-frame {
  position: relative;
  width: 340px;
  height: 272px;
  transform: scale(0.9);
  transform-origin: 0 0;
}
.ent-agents__wheel {
  position: absolute;
  inset: 0;
}
.ent-agents__wheel-track {
  stroke: var(--ent-zinc-50);
}
.ent-agents__wheel-progress {
  stroke: var(--accent);
  stroke-dasharray: 653.5;
  stroke-dashoffset: 653.5;
  animation: ent-agents-wheel-progress var(--ent-agents-cycle) linear infinite;
}
.ent-agents__wheel-arrow {
  stroke: var(--ent-zinc-350);
}
@keyframes ent-agents-wheel-progress {
  0%,
  2.13% {
    stroke-dashoffset: 653.5;
  }
  30.2% {
    stroke-dashoffset: 0;
  }
  30.21% {
    stroke-dashoffset: 653.5;
  }
  58.29% {
    stroke-dashoffset: 0;
  }
  58.3% {
    stroke-dashoffset: 653.5;
  }
  86.38%,
  97.45% {
    stroke-dashoffset: 0;
  }
  98.72%,
  100% {
    stroke-dashoffset: 653.5;
  }
}

/* Step pills: --ent-agents-lit flips 0 (idle) / 1 (the active step), once per run */
.ent-agents__step {
  --ent-agents-lit: 0;
  animation: ent-agents-step-change var(--ent-agents-cycle) steps(1, end)
    infinite;
}
.ent-agents__step--measure {
  animation-name: ent-agents-step-measure;
}
.ent-agents__step--learn {
  animation-name: ent-agents-step-learn;
}
.ent-agents__step-pill {
  fill: color-mix(
    in srgb,
    var(--accent) calc(var(--ent-agents-lit) * 100%),
    var(--paper)
  );
  stroke: color-mix(
    in srgb,
    var(--accent) calc(var(--ent-agents-lit) * 100%),
    var(--rule)
  );
}
.ent-agents__step-badge {
  fill: color-mix(
    in srgb,
    var(--paper) calc(var(--ent-agents-lit) * 100%),
    var(--ent-violet-80)
  );
}
.ent-agents__step-num {
  font:
    600 10px Inter,
    system-ui,
    sans-serif;
  fill: var(--accent);
}
.ent-agents__step-label {
  font:
    500 10.5px Inter,
    system-ui,
    sans-serif;
  fill: color-mix(
    in srgb,
    var(--paper) calc(var(--ent-agents-lit) * 100%),
    var(--ent-zinc-750)
  );
}
@keyframes ent-agents-step-change {
  0% {
    --ent-agents-lit: 0;
  }
  2.13% {
    --ent-agents-lit: 1;
  }
  11.49% {
    --ent-agents-lit: 0;
  }
  30.21% {
    --ent-agents-lit: 1;
  }
  39.57% {
    --ent-agents-lit: 0;
  }
  58.3% {
    --ent-agents-lit: 1;
  }
  67.66%,
  100% {
    --ent-agents-lit: 0;
  }
}
@keyframes ent-agents-step-measure {
  0% {
    --ent-agents-lit: 0;
  }
  11.49% {
    --ent-agents-lit: 1;
  }
  20.85% {
    --ent-agents-lit: 0;
  }
  39.57% {
    --ent-agents-lit: 1;
  }
  48.94% {
    --ent-agents-lit: 0;
  }
  67.66% {
    --ent-agents-lit: 1;
  }
  77.02%,
  100% {
    --ent-agents-lit: 0;
  }
}
/* the last "learn" step stays lit through the end-of-cycle hold */
@keyframes ent-agents-step-learn {
  0% {
    --ent-agents-lit: 0;
  }
  20.85% {
    --ent-agents-lit: 1;
  }
  30.21% {
    --ent-agents-lit: 0;
  }
  48.94% {
    --ent-agents-lit: 1;
  }
  58.3% {
    --ent-agents-lit: 0;
  }
  77.02% {
    --ent-agents-lit: 1;
  }
  97.45%,
  100% {
    --ent-agents-lit: 0;
  }
}

/* Hub captions: one at a time, rising in as each step starts (step 2 shows "measuring…" then the verdict) */
.ent-agents__captions {
  position: absolute;
  left: 92px;
  top: 72px;
  width: 156px;
  height: 108px;
}
.ent-agents__caption {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 5px;
  opacity: 0;
  animation: ent-agents-caption-change var(--ent-agents-cycle) linear
    var(--ent-agents-delay) infinite;
}
.ent-agents__caption--baseline {
  animation-name: ent-agents-caption-baseline;
}
.ent-agents__caption--measuring {
  animation-name: ent-agents-caption-measuring;
}
.ent-agents__caption--verdict {
  animation-name: ent-agents-caption-verdict;
}
.ent-agents__caption--lesson {
  animation-name: ent-agents-caption-lesson;
}
.ent-agents__caption--final {
  animation-name: ent-agents-caption-final;
}
.ent-agents__caption .ent-agents__kicker {
  color: var(--accent);
}
.ent-agents__caption-text {
  margin: 0;
  font-size: 12.5px;
  line-height: 17px;
  color: var(--ent-zinc-750);
}
.ent-agents__caption-text b {
  font-weight: 600;
  color: var(--ink);
}
.ent-agents__caption-text .ent-agents__verdict--improved {
  color: var(--ent-green-700);
}
.ent-agents__caption-text .ent-agents__verdict--regressed {
  color: var(--ent-red-600);
}
@keyframes ent-agents-caption-baseline {
  0%,
  0.85% {
    opacity: 1;
  }
  2.13%,
  100% {
    opacity: 0;
  }
}
@keyframes ent-agents-caption-change {
  0%,
  2.12% {
    opacity: 0;
    transform: translateY(4px);
  }
  3.4%,
  10.21% {
    opacity: 1;
    transform: none;
  }
  11.49%,
  100% {
    opacity: 0;
    transform: none;
  }
}
@keyframes ent-agents-caption-measuring {
  0%,
  11.49% {
    opacity: 0;
    transform: translateY(4px);
  }
  12.34%,
  16.26% {
    opacity: 1;
    transform: none;
  }
  17.11%,
  100% {
    opacity: 0;
    transform: none;
  }
}
@keyframes ent-agents-caption-verdict {
  0%,
  17.1% {
    opacity: 0;
    transform: translateY(4px);
  }
  17.96%,
  19.57% {
    opacity: 1;
    transform: none;
  }
  20.43%,
  100% {
    opacity: 0;
    transform: none;
  }
}
@keyframes ent-agents-caption-lesson {
  0%,
  20.85% {
    opacity: 0;
    transform: translateY(4px);
  }
  22.13%,
  28.94% {
    opacity: 1;
    transform: none;
  }
  30.21%,
  100% {
    opacity: 0;
    transform: none;
  }
}
/* run 3's lesson holds until the reset */
@keyframes ent-agents-caption-final {
  0%,
  77.02% {
    opacity: 0;
    transform: translateY(4px);
  }
  78.3%,
  96.17% {
    opacity: 1;
    transform: none;
  }
  97.45%,
  100% {
    opacity: 0;
    transform: none;
  }
}

/* Chart frame: grid, axis labels and the fixed baseline point */
.ent-agents__chart {
  display: block;
  flex: 1;
  min-height: 0;
}
.ent-agents__chart-grid {
  stroke: var(--ent-zinc-60);
}
.ent-agents__chart-axis,
.ent-agents__chart-delta,
.ent-agents__playbook-title {
  font:
    400 8.5px "Geist Mono",
    ui-monospace,
    monospace;
  fill: var(--ent-zinc-350);
}
.ent-agents__chart-value {
  font:
    500 10px "Geist Mono",
    ui-monospace,
    monospace;
}
.ent-agents__chart-dot {
  fill: var(--accent);
  stroke: var(--paper);
}
.ent-agents__chart-dot--down {
  fill: var(--ent-red-600);
}
.ent-agents__chart-value--baseline {
  fill: var(--ent-violet-400);
}
.ent-agents__chart-value--up,
.ent-agents__chart-delta--up {
  fill: var(--ent-green-700);
}
.ent-agents__chart-value--down,
.ent-agents__chart-delta--down {
  fill: var(--ent-red-600);
}
.ent-agents__chart-delta {
  fill-opacity: 0.8;
}

/* Chart, step 1: a spinner on the last point while the worker makes its change */
.ent-agents__working {
  opacity: 0;
  animation: ent-agents-working var(--ent-agents-cycle) linear
    var(--ent-agents-delay) infinite;
}
.ent-agents__spinner-track {
  stroke: var(--ent-violet-60);
}
.ent-agents__spinner {
  stroke: var(--accent);
  transform-box: fill-box;
  transform-origin: center;
  animation: ent-agents-spin-free 0.8s linear infinite;
}
@keyframes ent-agents-working {
  0%,
  2.55% {
    opacity: 0;
  }
  3.19%,
  10.85% {
    opacity: 1;
  }
  11.49%,
  100% {
    opacity: 0;
  }
}
@keyframes ent-agents-spin-free {
  to {
    transform: rotate(360deg);
  }
}

/* Chart, step 2: the run's segment draws in, then its point and delta appear; all stay until the reset */
.ent-agents__run--1 {
  --ent-agents-line-length: 136.9;
}
.ent-agents__run--2 {
  --ent-agents-line-length: 121.6;
}
.ent-agents__run--3 {
  --ent-agents-line-length: 140.2;
}
.ent-agents__chart-line {
  stroke: var(--accent);
  stroke-dasharray: var(--ent-agents-line-length);
  stroke-dashoffset: var(--ent-agents-line-length);
  animation: ent-agents-chart-line-run-1 var(--ent-agents-cycle) linear infinite;
}
.ent-agents__chart-line--down {
  stroke: var(--ent-red-600);
}
.ent-agents__chart-point {
  opacity: 0;
  animation: ent-agents-chart-point-run-1 var(--ent-agents-cycle) linear
    infinite;
}
.ent-agents__run--2 .ent-agents__chart-line {
  animation-name: ent-agents-chart-line-run-2;
}
.ent-agents__run--2 .ent-agents__chart-point {
  animation-name: ent-agents-chart-point-run-2;
}
.ent-agents__run--3 .ent-agents__chart-line {
  animation-name: ent-agents-chart-line-run-3;
}
.ent-agents__run--3 .ent-agents__chart-point {
  animation-name: ent-agents-chart-point-run-3;
}
@keyframes ent-agents-chart-line-run-1 {
  0%,
  11.91% {
    stroke-dashoffset: var(--ent-agents-line-length);
    opacity: 1;
  }
  17.11%,
  97.45% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  98.72%,
  100% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
}
@keyframes ent-agents-chart-line-run-2 {
  0%,
  40% {
    stroke-dashoffset: var(--ent-agents-line-length);
    opacity: 1;
  }
  45.19%,
  97.45% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  98.72%,
  100% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
}
@keyframes ent-agents-chart-line-run-3 {
  0%,
  68.09% {
    stroke-dashoffset: var(--ent-agents-line-length);
    opacity: 1;
  }
  73.28%,
  97.45% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  98.72%,
  100% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
}
@keyframes ent-agents-chart-point-run-1 {
  0%,
  17.1% {
    opacity: 0;
  }
  17.96%,
  97.45% {
    opacity: 1;
  }
  98.3%,
  100% {
    opacity: 0;
  }
}
@keyframes ent-agents-chart-point-run-2 {
  0%,
  45.19% {
    opacity: 0;
  }
  46.04%,
  97.45% {
    opacity: 1;
  }
  98.3%,
  100% {
    opacity: 0;
  }
}
@keyframes ent-agents-chart-point-run-3 {
  0%,
  73.27% {
    opacity: 0;
  }
  74.13%,
  97.45% {
    opacity: 1;
  }
  98.3%,
  100% {
    opacity: 0;
  }
}

/* Chart, step 3: the playbook note; pen strokes draw, then a paper-coloured wipe uncovers the lesson */
.ent-agents__playbook {
  opacity: 0;
  animation: ent-agents-playbook var(--ent-agents-cycle) linear
    var(--ent-agents-delay) infinite;
}
.ent-agents__playbook--final {
  animation-name: ent-agents-playbook-final;
  animation-delay: 0s;
}
.ent-agents__playbook-book {
  fill: var(--ent-violet-25);
  stroke: var(--accent);
}
.ent-agents__playbook-pen {
  stroke: var(--accent);
  stroke-dasharray: 8;
  stroke-dashoffset: 8;
  animation: ent-agents-playbook-pen var(--ent-agents-cycle) linear
    var(--ent-agents-delay) infinite;
}
.ent-agents__playbook-pen--2 {
  animation-delay: calc(var(--ent-agents-delay) + 0.25s);
}
.ent-agents__playbook-pen--3 {
  animation-delay: calc(var(--ent-agents-delay) + 0.5s);
}
.ent-agents__playbook-title {
  fill: var(--accent);
}
.ent-agents__playbook-lesson {
  font:
    600 11px Inter,
    system-ui,
    sans-serif;
}
.ent-agents__playbook-lesson--up {
  fill: var(--ent-green-700);
}
.ent-agents__playbook-lesson--down {
  fill: var(--ent-red-600);
}
.ent-agents__playbook-wipe {
  fill: var(--paper);
  transform-box: fill-box;
  transform-origin: right center;
  animation: ent-agents-playbook-wipe var(--ent-agents-cycle) linear
    var(--ent-agents-delay) infinite;
}
@keyframes ent-agents-playbook {
  0%,
  20.85% {
    opacity: 0;
  }
  22.13%,
  28.94% {
    opacity: 1;
  }
  30.21%,
  100% {
    opacity: 0;
  }
}
/* run 3's note holds until the reset */
@keyframes ent-agents-playbook-final {
  0%,
  77.02% {
    opacity: 0;
  }
  78.3%,
  96.17% {
    opacity: 1;
  }
  97.45%,
  100% {
    opacity: 0;
  }
}
@keyframes ent-agents-playbook-pen {
  0%,
  21.7% {
    stroke-dashoffset: 8;
  }
  22.55%,
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes ent-agents-playbook-wipe {
  0%,
  22.13% {
    transform: scaleX(1);
  }
  27.23%,
  100% {
    transform: scaleX(0);
  }
}

/* Phones: the card stands up, short enough to fit on screen under the header: the objective, the wheel at full
   size (its empty top and bottom trimmed), then the tall chart, whose shorter segments need their own lengths
   (no wider than its drawn 300px, so the card keeps its height on wider phones). The section kickers give way
   to the step pills and axis labels. enterprise.css runs it unzoomed there. */
.ent-agents__chart--tall {
  display: none;
}
@media (max-width: 599px) {
  .ent-agents {
    height: auto;
    padding: 14px;
    gap: 10px;
  }
  .ent-agents__body {
    flex-direction: column;
    gap: 10px;
  }
  .ent-agents__cycle {
    width: auto;
  }
  .ent-agents__cycle > .ent-agents__kicker,
  .ent-agents__results > .ent-agents__kicker {
    display: none;
  }
  .ent-agents__wheel-box {
    height: 208px;
    margin: 0 auto;
  }
  .ent-agents__wheel-frame {
    margin-top: -18px;
  }
  .ent-agents__results {
    padding: 8px 10px;
  }
  .ent-agents__chart--wide {
    display: none;
  }
  .ent-agents__chart--tall {
    display: block;
    max-width: 300px;
    margin: 0 auto;
  }
  .ent-agents__chart--tall .ent-agents__run--1 {
    --ent-agents-line-length: 98.5;
  }
  .ent-agents__chart--tall .ent-agents__run--2 {
    --ent-agents-line-length: 75.7;
  }
  .ent-agents__chart--tall .ent-agents__run--3 {
    --ent-agents-line-length: 103;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ent-agents * {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    stroke-dashoffset: 0 !important;
  }
}