/*
 * Enterprise AI Brain, one 16.96s loop. Learn (0-35%): five sources connect, each pulse lights a brain cluster
 * and adds a memory. Ask (35-70%): a question types in and a cited answer builds. Share (70-99%): a Slack
 * event flows into the shared brain and out to all five agents, which show "updated". Offsets are % of the cycle.
 */

.ent-brain {
  --ent-brain-cycle: 16.96s;
  --ent-brain-pct: calc(var(--ent-brain-cycle) / 100); /* 1% of the cycle */
  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: 12px;
  overflow: hidden;
  color: var(--ink-2);
}
.ent-brain__label {
  font:
    400 10.5px/14px "Geist Mono",
    ui-monospace,
    monospace;
  letter-spacing: 0.06em;
  color: var(--ent-zinc-350);
}

/* Step rail: Learn -> Ask -> Share; the current step is filled, finished steps turn violet. */
.ent-brain__steps {
  display: flex;
  align-items: center;
  gap: 5px;
}
.ent-brain__step-pill {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  padding: 6px 4px;
  border-radius: 999px;
  font:
    500 11px Inter,
    system-ui,
    sans-serif;
  background: var(--paper);
  color: var(--muted);
  box-shadow: inset 0 0 0 1px var(--rule);
}
.ent-brain__step-pill b {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9.5px;
  box-shadow: inset 0 0 0 1px currentColor;
}
.ent-brain__step-pill--learn {
  animation: ent-brain-pill-learn var(--ent-brain-cycle) steps(1, end) infinite;
}
.ent-brain__step-pill--ask {
  animation: ent-brain-pill-ask var(--ent-brain-cycle) steps(1, end) infinite;
}
.ent-brain__step-pill--share {
  animation: ent-brain-pill-share var(--ent-brain-cycle) steps(1, end) infinite;
}
.ent-brain__step-arrow {
  font-style: normal;
  color: var(--rule-strong);
  font-size: 11px;
}
@keyframes ent-brain-pill-learn {
  0% {
    background: var(--accent);
    color: var(--on-accent);
    box-shadow: none;
  }
  35.46% {
    background: var(--ent-violet-100);
    color: var(--ent-violet-400);
    box-shadow: none;
  }
  98.66%,
  100% {
    background: var(--paper);
    color: var(--muted);
    box-shadow: inset 0 0 0 1px var(--rule);
  }
}
@keyframes ent-brain-pill-ask {
  0% {
    background: var(--paper);
    color: var(--muted);
    box-shadow: inset 0 0 0 1px var(--rule);
  }
  35.46% {
    background: var(--accent);
    color: var(--on-accent);
    box-shadow: none;
  }
  70.54% {
    background: var(--ent-violet-100);
    color: var(--ent-violet-400);
    box-shadow: none;
  }
  98.66%,
  100% {
    background: var(--paper);
    color: var(--muted);
    box-shadow: inset 0 0 0 1px var(--rule);
  }
}
@keyframes ent-brain-pill-share {
  0% {
    background: var(--paper);
    color: var(--muted);
    box-shadow: inset 0 0 0 1px var(--rule);
  }
  70.54% {
    background: var(--accent);
    color: var(--on-accent);
    box-shadow: none;
  }
  97.33%,
  100% {
    background: var(--paper);
    color: var(--muted);
    box-shadow: inset 0 0 0 1px var(--rule);
  }
}

/* Stage: the three steps are stacked scenes; each scene and its caption fade in and out together. */
.ent-brain__stage {
  position: relative;
  flex: 1;
  min-height: 0;
}
.ent-brain__scene {
  position: absolute;
  inset: 0;
  padding-top: 36px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  opacity: 0;
}
.ent-brain__caption {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 13px;
  color: var(--ent-zinc-750);
  opacity: 0;
}
.ent-brain__caption .ent-brain__label {
  color: var(--accent);
}
.ent-brain__scene--learn,
.ent-brain__scene--learn .ent-brain__caption {
  animation: ent-brain-learn-scene var(--ent-brain-cycle) linear infinite;
}
.ent-brain__scene--ask,
.ent-brain__scene--ask .ent-brain__caption {
  animation: ent-brain-ask-scene var(--ent-brain-cycle) linear infinite;
}
.ent-brain__scene--share,
.ent-brain__scene--share .ent-brain__caption {
  animation: ent-brain-share-scene var(--ent-brain-cycle) linear infinite;
}
@keyframes ent-brain-learn-scene {
  0%,
  34.14% {
    opacity: 1;
  }
  35.46%,
  100% {
    opacity: 0;
  }
}
@keyframes ent-brain-ask-scene {
  0%,
  35.46% {
    opacity: 0;
    transform: translateY(5px);
  }
  36.79%,
  69.21% {
    opacity: 1;
    transform: none;
  }
  70.54%,
  100% {
    opacity: 0;
    transform: none;
  }
}
@keyframes ent-brain-share-scene {
  0%,
  70.52% {
    opacity: 0;
    transform: translateY(5px);
  }
  71.86%,
  97.33% {
    opacity: 1;
    transform: none;
  }
  98.66%,
  100% {
    opacity: 0;
    transform: none;
  }
}

/* Leaving: a second animation on the cycle's own clock, composited with `add` on top of a shifted entrance
   (opacity -1, dash +1, scale 0.2), so a staggered part still leaves exactly when its step does. */
@keyframes ent-brain-learn-exit {
  0%,
  34.14% {
    opacity: 0;
  }
  35.46%,
  100% {
    opacity: -1;
  }
}
@keyframes ent-brain-learn-exit-early {
  0%,
  34.14% {
    opacity: 0;
  }
  35.02%,
  100% {
    opacity: -1;
  }
}
@keyframes ent-brain-learn-undraw {
  0%,
  34.14% {
    opacity: 0;
    stroke-dashoffset: 0;
  }
  35.46%,
  100% {
    opacity: -1;
    stroke-dashoffset: 1;
  }
}
@keyframes ent-brain-learn-shrink {
  0%,
  34.14% {
    opacity: 0;
    transform: none;
  }
  35.46%,
  100% {
    opacity: -1;
    transform: scale(0.2);
  }
}
@keyframes ent-brain-ask-exit {
  0%,
  69.21% {
    opacity: 0;
  }
  70.54%,
  100% {
    opacity: -1;
  }
}
@keyframes ent-brain-ask-exit-early {
  0%,
  69.21% {
    opacity: 0;
  }
  69.42%,
  100% {
    opacity: -1;
  }
}
@keyframes ent-brain-share-exit {
  0%,
  97.33% {
    opacity: 0;
  }
  98.66%,
  100% {
    opacity: -1;
  }
}
@keyframes ent-brain-share-exit-early {
  0%,
  97.33% {
    opacity: 0;
  }
  98.22%,
  100% {
    opacity: -1;
  }
}

/* Shared entrances: they start at 0% and are shifted to each part's moment with animation-delay
   (--ent-brain-pct times an offset); they hold to 50% of their own run, after their step has gone, then reset. */
@keyframes ent-brain-card-in {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  1.32%,
  50% {
    opacity: 1;
    transform: none;
  }
  50.01%,
  100% {
    opacity: 0;
    transform: translateY(5px);
  }
}
@keyframes ent-brain-chip-in {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  0.88%,
  50% {
    opacity: 1;
    transform: none;
  }
  50.01%,
  100% {
    opacity: 0;
    transform: translateY(5px);
  }
}
@keyframes ent-brain-fade-in {
  0% {
    opacity: 0;
  }
  1.33%,
  50% {
    opacity: 1;
  }
  50.01%,
  100% {
    opacity: 0;
  }
}
@keyframes ent-brain-tick-in {
  0% {
    opacity: 0;
  }
  0.88%,
  50% {
    opacity: 1;
  }
  50.01%,
  100% {
    opacity: 0;
  }
}

/* Status: a spinner while a source (or the search) runs, then a check. */
.ent-brain__status {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 14px;
  height: 16px;
  flex-shrink: 0;
}
.ent-brain__status-busy,
.ent-brain__status-done {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  opacity: 0;
}
.ent-brain__status-done {
  position: absolute;
  left: 0;
  top: 0;
  height: 16px;
}
.ent-brain__spinner {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid var(--ent-violet-60);
  border-top-color: var(--accent);
  flex-shrink: 0;
  box-sizing: border-box;
}
.ent-brain__check {
  flex-shrink: 0;
  display: block;
}
.ent-brain__check--green {
  stroke: var(--ent-green-700);
}
.ent-brain__check--violet {
  stroke: var(--ent-violet-400);
}
.ent-brain__check--accent {
  stroke: var(--accent);
}
/* --busy-at / --done-at: when the spinner appears and when it turns into the check. */
.ent-brain__status-busy {
  animation: ent-brain-busy-in var(--ent-brain-cycle) linear infinite;
  animation-delay: calc(var(--ent-brain-pct) * var(--busy-at));
}
.ent-brain__spinner {
  animation:
    ent-brain-busy-out var(--ent-brain-cycle) linear infinite,
    ent-brain-spin-free 0.8s linear infinite;
  animation-delay: calc(var(--ent-brain-pct) * (var(--done-at) - 0.22)), 0s;
}
.ent-brain__status-done {
  animation: ent-brain-tick-in var(--ent-brain-cycle) linear infinite;
  animation-delay: calc(var(--ent-brain-pct) * var(--done-at));
}
@keyframes ent-brain-busy-in {
  0% {
    opacity: 0;
  }
  0.67%,
  50% {
    opacity: 1;
  }
  50.01%,
  100% {
    opacity: 0;
  }
}
@keyframes ent-brain-busy-out {
  0% {
    opacity: 1;
  }
  0.67%,
  50% {
    opacity: 0;
  }
  50.01%,
  100% {
    opacity: 1;
  }
}
@keyframes ent-brain-spin-free {
  to {
    transform: rotate(360deg);
  }
}

/* Learn: the five sources connect in turn (--i = 0..4), then the Ingest -> Adapt loop spells out. */
.ent-brain__learn {
  display: flex;
  gap: 4px;
  align-items: center;
}
.ent-brain__sources {
  width: 204px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.ent-brain__source {
  --busy-at: calc(1.77 + 1.1025 * var(--i, 0));
  --done-at: calc(7.07 + 1.55 * var(--i, 0));
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border-radius: 10px;
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--rule);
  opacity: 0;
  animation:
    ent-brain-card-in var(--ent-brain-cycle) linear infinite,
    ent-brain-learn-exit var(--ent-brain-cycle) linear infinite;
  animation-composition: replace, add;
  animation-delay:
    calc(var(--ent-brain-pct) * (1.33 + 1.1025 * var(--i, 0))), 0s;
}
.ent-brain__source img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}
.ent-brain__source-text {
  display: flex;
  flex-direction: column;
  line-height: 14px;
  flex: 1;
}
.ent-brain__source-text b {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
}
.ent-brain__source-text em {
  font-style: normal;
  font:
    400 10px "Geist Mono",
    ui-monospace,
    monospace;
  color: var(--muted);
}
.ent-brain__source .ent-brain__status-done {
  animation:
    ent-brain-tick-in var(--ent-brain-cycle) linear infinite,
    ent-brain-learn-exit-early var(--ent-brain-cycle) linear infinite;
  animation-composition: replace, add;
  animation-delay: calc(var(--ent-brain-pct) * var(--done-at)), 0s;
}
.ent-brain__loop {
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 3px;
  font:
    500 9.5px "Geist Mono",
    ui-monospace,
    monospace;
  color: var(--ent-violet-400);
}
.ent-brain__loop-step {
  display: flex;
  align-items: center;
  gap: 3px;
  opacity: 0;
  animation:
    ent-brain-chip-in var(--ent-brain-cycle) linear infinite,
    ent-brain-learn-exit-early var(--ent-brain-cycle) linear infinite;
  animation-composition: replace, add;
  animation-delay:
    calc(var(--ent-brain-pct) * (24.76 + 1.327 * var(--i, 0))), 0s;
}
.ent-brain__loop b {
  font-weight: 500;
  background: var(--ent-violet-100);
  padding: 2px 5px;
  border-radius: 5px;
}
.ent-brain__loop i {
  font-style: normal;
  color: var(--ent-violet-150);
}

/* Feed: a dashed line per source, then a pulse that runs along it into the brain. */
.ent-brain__feed-line {
  fill: none;
  stroke: var(--ent-violet-160);
  stroke-width: 1.5;
  stroke-dasharray: 4 5;
  opacity: 0;
  animation:
    ent-brain-fade-in var(--ent-brain-cycle) linear infinite,
    ent-brain-learn-exit var(--ent-brain-cycle) linear infinite;
  animation-composition: replace, add;
  animation-delay:
    calc(var(--ent-brain-pct) * (1.77 + 1.1025 * var(--i, 0))), 0s;
}
.ent-brain__feed-pulse {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.6;
  stroke-dasharray: 0.2 1.2;
  stroke-dashoffset: 0.2;
  stroke-linecap: round;
  animation: ent-brain-pulse-travel var(--ent-brain-cycle) ease-in infinite;
  animation-delay: calc(var(--ent-brain-pct) * (7.28 + 3.105 * var(--i, 0)));
}
@keyframes ent-brain-pulse-travel {
  0% {
    stroke-dashoffset: 0.2;
    opacity: 1;
  }
  1.56% {
    stroke-dashoffset: -1;
    opacity: 1;
  }
  1.57%,
  100% {
    stroke-dashoffset: -1;
    opacity: 0;
  }
}

/* Brain: the silhouette draws in with its sulci; as each pulse lands, that source's cluster lights up
   (glow, hub, synapses, neurons) and a memory card appears. Bridges and sparks then link the clusters. */
.ent-brain__brain {
  flex-shrink: 0;
  width: 262px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ent-brain__brain > svg {
  filter: drop-shadow(0 12px 28px var(--ent-accent-a18));
}
.ent-brain__stop--paper {
  stop-color: var(--paper);
}
.ent-brain__stop--violet {
  stop-color: var(--ent-violet-50);
}
.ent-brain__stop--accent {
  stop-color: var(--accent);
}
.ent-brain__fold {
  fill: none;
  stroke: var(--ent-violet-170);
  stroke-width: 1.6;
  stroke-linecap: round;
}
.ent-brain__edge {
  fill: none;
  stroke: var(--ent-violet-250);
  stroke-width: 1.8;
  stroke-linejoin: round;
}
.ent-brain__stem {
  fill: var(--ent-violet-90);
  stroke: var(--ent-violet-200);
  stroke-width: 1.4;
  stroke-linejoin: round;
}
.ent-brain__brain-base {
  opacity: 0;
  animation: ent-brain-silhouette-in var(--ent-brain-cycle) linear infinite;
}
.ent-brain__outline {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: ent-brain-outline-draw var(--ent-brain-cycle) ease-in-out infinite;
}
.ent-brain__sulcus {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation:
    ent-brain-sulcus-draw var(--ent-brain-cycle) ease-out infinite,
    ent-brain-learn-undraw var(--ent-brain-cycle) ease-out infinite;
  animation-composition: replace, add;
  animation-delay:
    calc(var(--ent-brain-pct) * (2.65 + 0.2625 * var(--i, 0))), 0s;
}
.ent-brain__glow {
  opacity: 0;
  animation:
    ent-brain-glow-in var(--ent-brain-cycle) linear infinite,
    ent-brain-learn-exit var(--ent-brain-cycle) linear infinite;
  animation-composition: replace, add;
  animation-delay:
    calc(var(--ent-brain-pct) * (8.84 + 3.1025 * var(--i, 0))), 0s;
}
@keyframes ent-brain-silhouette-in {
  0%,
  1.33% {
    opacity: 0;
  }
  3.98%,
  34.14% {
    opacity: 1;
  }
  35.46%,
  100% {
    opacity: 0;
  }
}
@keyframes ent-brain-outline-draw {
  0%,
  1.33% {
    opacity: 0;
    stroke-dashoffset: 1;
  }
  5.74%,
  34.14% {
    opacity: 1;
    stroke-dashoffset: 0;
  }
  35.46%,
  100% {
    opacity: 0;
    stroke-dashoffset: 1;
  }
}
@keyframes ent-brain-sulcus-draw {
  0% {
    opacity: 0;
    stroke-dashoffset: 1;
  }
  2.63%,
  50% {
    opacity: 1;
    stroke-dashoffset: 0;
  }
  50.01%,
  100% {
    opacity: 0;
    stroke-dashoffset: 1;
  }
}
@keyframes ent-brain-glow-in {
  0% {
    opacity: 0;
  }
  1.79%,
  50% {
    opacity: 1;
  }
  50.01%,
  100% {
    opacity: 0;
  }
}

/* Clusters (--i = source 0..4): the hub pops, then four synapses (--j = 0..3) grow out to their neurons. */
.ent-brain__synapse {
  stroke: var(--accent);
  stroke-opacity: 0.55;
  stroke-width: 0.9;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation:
    ent-brain-synapse-draw var(--ent-brain-cycle) ease-out infinite,
    ent-brain-learn-undraw var(--ent-brain-cycle) ease-out infinite;
  animation-composition: replace, add;
  animation-delay:
    calc(
      var(--ent-brain-pct) * (9.07 + 3.105 * var(--i, 0) + 0.3 * var(--j, 0))
    ),
    0s;
}
.ent-brain__neuron {
  fill: var(--accent);
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation:
    ent-brain-neuron-pop var(--ent-brain-cycle) ease-out infinite,
    ent-brain-learn-shrink var(--ent-brain-cycle) ease-out infinite;
  animation-composition: replace, add;
  animation-delay:
    calc(
      var(--ent-brain-pct) * (9.91 + 3.1025 * var(--i, 0) + 0.3 * var(--j, 0))
    ),
    0s;
}
.ent-brain__hub {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation:
    ent-brain-hub-pop var(--ent-brain-cycle) cubic-bezier(0.3, 1.6, 0.6, 1)
      infinite,
    ent-brain-learn-shrink var(--ent-brain-cycle) cubic-bezier(0.3, 1.6, 0.6, 1)
      infinite;
  animation-composition: replace, add;
  animation-delay:
    calc(var(--ent-brain-pct) * (8.84 + 3.1025 * var(--i, 0))), 0s;
}
.ent-brain__hub-halo {
  fill: var(--accent);
  fill-opacity: 0.18;
}
.ent-brain__hub-core {
  fill: var(--ent-violet-400);
  stroke: var(--paper);
  stroke-width: 1.2;
}
@keyframes ent-brain-synapse-draw {
  0% {
    opacity: 0;
    stroke-dashoffset: 1;
  }
  1.08%,
  50% {
    opacity: 1;
    stroke-dashoffset: 0;
  }
  50.01%,
  100% {
    opacity: 0;
    stroke-dashoffset: 1;
  }
}
@keyframes ent-brain-neuron-pop {
  0% {
    opacity: 0;
    transform: scale(0.2);
  }
  0.6%,
  50% {
    opacity: 1;
    transform: none;
  }
  50.01%,
  100% {
    opacity: 0;
    transform: scale(0.2);
  }
}
@keyframes ent-brain-hub-pop {
  0% {
    opacity: 0;
    transform: scale(0.2);
  }
  1.07%,
  50% {
    opacity: 1;
    transform: none;
  }
  50.01%,
  100% {
    opacity: 0;
    transform: scale(0.2);
  }
}

/* Bridges (--i = 0..5) draw between the clusters, then sparks run along them. */
.ent-brain__bridge {
  fill: none;
  stroke: var(--accent);
  stroke-opacity: 0.45;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation:
    ent-brain-bridge-draw var(--ent-brain-cycle) ease-in-out infinite,
    ent-brain-learn-undraw var(--ent-brain-cycle) ease-in-out infinite;
  animation-composition: replace, add;
  animation-delay:
    calc(var(--ent-brain-pct) * (25.65 + 0.656 * var(--i, 0))), 0s;
}
.ent-brain__sparks {
  opacity: 0;
  animation: ent-brain-sparks-on var(--ent-brain-cycle) linear infinite;
}
.ent-brain__spark {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dasharray: 0.1 1;
  stroke-dashoffset: 1.1;
  animation: ent-brain-spark-free 1.8s linear infinite;
  animation-delay: calc(-0.3s * var(--i, 0));
}
@keyframes ent-brain-bridge-draw {
  0% {
    opacity: 0;
    stroke-dashoffset: 1;
  }
  1.55%,
  50% {
    opacity: 1;
    stroke-dashoffset: 0;
  }
  50.01%,
  100% {
    opacity: 0;
    stroke-dashoffset: 1;
  }
}
@keyframes ent-brain-sparks-on {
  0%,
  30.08% {
    opacity: 0;
  }
  30.96%,
  34.14% {
    opacity: 1;
  }
  35.46%,
  100% {
    opacity: 0;
  }
}
@keyframes ent-brain-spark-free {
  to {
    stroke-dashoffset: 0;
  }
}

/* What it knows: one memory card per source (--i = 0..4), just before its pulse lands. */
.ent-brain__memories {
  width: 160px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.ent-brain__memory {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border-radius: 9px;
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--rule);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  opacity: 0;
  animation:
    ent-brain-card-in var(--ent-brain-cycle) linear infinite,
    ent-brain-learn-exit var(--ent-brain-cycle) linear infinite;
  animation-composition: replace, add;
  animation-delay: calc(var(--ent-brain-pct) * (8.39 + 3.1 * var(--i, 0))), 0s;
}

/* Learn indexes: --i is the source (and its feed, pulse, glow, cluster and memory), or the item's place in
   its own row (sulci, bridges and sparks, loop steps); --j is a synapse's place in its cluster. */
.ent-brain__source:nth-child(2 of .ent-brain__source),
.ent-brain__feed-line:nth-child(2 of .ent-brain__feed-line),
.ent-brain__feed-pulse:nth-child(2 of .ent-brain__feed-pulse),
.ent-brain__glow:nth-child(2 of .ent-brain__glow),
.ent-brain__cluster:nth-child(2 of .ent-brain__cluster),
.ent-brain__memory:nth-child(2 of .ent-brain__memory),
.ent-brain__loop-step:nth-child(2),
.ent-brain__bridge:nth-child(2 of .ent-brain__bridge),
.ent-brain__spark:nth-child(2),
.ent-brain__sulcus:nth-child(2 of .ent-brain__sulcus) {
  --i: 1;
}
.ent-brain__source:nth-child(3 of .ent-brain__source),
.ent-brain__feed-line:nth-child(3 of .ent-brain__feed-line),
.ent-brain__feed-pulse:nth-child(3 of .ent-brain__feed-pulse),
.ent-brain__glow:nth-child(3 of .ent-brain__glow),
.ent-brain__cluster:nth-child(3 of .ent-brain__cluster),
.ent-brain__memory:nth-child(3 of .ent-brain__memory),
.ent-brain__loop-step:nth-child(3),
.ent-brain__bridge:nth-child(3 of .ent-brain__bridge),
.ent-brain__spark:nth-child(3),
.ent-brain__sulcus:nth-child(3 of .ent-brain__sulcus) {
  --i: 2;
}
.ent-brain__source:nth-child(4 of .ent-brain__source),
.ent-brain__feed-line:nth-child(4 of .ent-brain__feed-line),
.ent-brain__feed-pulse:nth-child(4 of .ent-brain__feed-pulse),
.ent-brain__glow:nth-child(4 of .ent-brain__glow),
.ent-brain__cluster:nth-child(4 of .ent-brain__cluster),
.ent-brain__memory:nth-child(4 of .ent-brain__memory),
.ent-brain__loop-step:nth-child(4),
.ent-brain__bridge:nth-child(4 of .ent-brain__bridge),
.ent-brain__spark:nth-child(4),
.ent-brain__sulcus:nth-child(4 of .ent-brain__sulcus) {
  --i: 3;
}
.ent-brain__source:nth-child(5 of .ent-brain__source),
.ent-brain__feed-line:nth-child(5 of .ent-brain__feed-line),
.ent-brain__feed-pulse:nth-child(5 of .ent-brain__feed-pulse),
.ent-brain__glow:nth-child(5 of .ent-brain__glow),
.ent-brain__cluster:nth-child(5 of .ent-brain__cluster),
.ent-brain__memory:nth-child(5 of .ent-brain__memory),
.ent-brain__bridge:nth-child(5 of .ent-brain__bridge),
.ent-brain__spark:nth-child(5),
.ent-brain__sulcus:nth-child(5 of .ent-brain__sulcus) {
  --i: 4;
}
.ent-brain__bridge:nth-child(6 of .ent-brain__bridge),
.ent-brain__spark:nth-child(6),
.ent-brain__sulcus:nth-child(6 of .ent-brain__sulcus) {
  --i: 5;
}
.ent-brain__sulcus:nth-child(7 of .ent-brain__sulcus) {
  --i: 6;
}
.ent-brain__sulcus:nth-child(8 of .ent-brain__sulcus) {
  --i: 7;
}
.ent-brain__sulcus:nth-child(9 of .ent-brain__sulcus) {
  --i: 8;
}
.ent-brain__sulcus:nth-child(10 of .ent-brain__sulcus) {
  --i: 9;
}
.ent-brain__sulcus:nth-child(11 of .ent-brain__sulcus) {
  --i: 10;
}
.ent-brain__sulcus:nth-child(12 of .ent-brain__sulcus) {
  --i: 11;
}
.ent-brain__sulcus:nth-child(13 of .ent-brain__sulcus) {
  --i: 12;
}
.ent-brain__sulcus:nth-child(14 of .ent-brain__sulcus) {
  --i: 13;
}
.ent-brain__sulcus:nth-child(15 of .ent-brain__sulcus) {
  --i: 14;
}
.ent-brain__sulcus:nth-child(16 of .ent-brain__sulcus) {
  --i: 15;
}
.ent-brain__sulcus:nth-child(17 of .ent-brain__sulcus) {
  --i: 16;
}
.ent-brain__sulcus:nth-child(18 of .ent-brain__sulcus) {
  --i: 17;
}
.ent-brain__sulcus:nth-child(19 of .ent-brain__sulcus) {
  --i: 18;
}
.ent-brain__sulcus:nth-child(20 of .ent-brain__sulcus) {
  --i: 19;
}
.ent-brain__synapse:nth-child(2 of .ent-brain__synapse),
.ent-brain__neuron:nth-child(2 of .ent-brain__neuron) {
  --j: 1;
}
.ent-brain__synapse:nth-child(3 of .ent-brain__synapse),
.ent-brain__neuron:nth-child(3 of .ent-brain__neuron) {
  --j: 2;
}
.ent-brain__synapse:nth-child(4 of .ent-brain__synapse),
.ent-brain__neuron:nth-child(4 of .ent-brain__neuron) {
  --j: 3;
}

/* Ask: the question types in word by word (--i = 0..9), the search runs, then the answer builds line by
   line (--i = 0..2), with its citations and the one source this user may not see. */
.ent-brain__chat {
  width: 600px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ent-brain__question {
  align-self: flex-end;
  display: flex;
  gap: 8px;
  align-items: center;
  max-width: 470px;
}
.ent-brain__bubble {
  padding: 9px 13px;
  border-radius: 12px 12px 4px 12px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 13px;
  line-height: 18px;
}
.ent-brain__word {
  white-space: pre;
  opacity: 0;
  animation:
    ent-brain-word-in var(--ent-brain-cycle) linear infinite,
    ent-brain-ask-exit-early var(--ent-brain-cycle) linear infinite;
  animation-composition: replace, add;
  animation-delay:
    calc(var(--ent-brain-pct) * (36.79 + 0.4425 * var(--i, 0))), 0s;
}
.ent-brain__avatar {
  order: 2;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--ent-zinc-900);
  color: var(--on-accent);
  font:
    600 9.5px Inter,
    system-ui,
    sans-serif;
  font-style: normal;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ent-brain__answer {
  display: flex;
  gap: 10px;
  padding: 13px 15px;
  border-radius: 12px;
  background: var(--paper);
  box-shadow:
    0 8px 28px var(--ent-ink-a6),
    inset 0 0 0 1px var(--rule);
}
.ent-brain__bot {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--ent-cyan-600));
}
.ent-brain__answer-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.ent-brain__search {
  --busy-at: 42.53;
  --done-at: 46.18;
  display: flex;
  align-items: center;
  gap: 7px;
  font:
    400 11px "Geist Mono",
    ui-monospace,
    monospace;
  color: var(--muted);
  opacity: 0;
  animation: ent-brain-search-in var(--ent-brain-cycle) linear infinite;
}
.ent-brain__answer-text {
  margin: 0;
  font-size: 13px;
  line-height: 19px;
  color: var(--ent-zinc-750);
  min-height: 57px;
}
.ent-brain__answer-text b {
  color: var(--ink);
}
.ent-brain__answer-line {
  opacity: 0;
  animation:
    ent-brain-fade-in var(--ent-brain-cycle) linear infinite,
    ent-brain-ask-exit var(--ent-brain-cycle) linear infinite;
  animation-composition: replace, add;
  animation-delay: calc(var(--ent-brain-pct) * (46.62 + 3.8 * var(--i, 0))), 0s;
}
.ent-brain__answer sup {
  font:
    600 9px Inter,
    system-ui,
    sans-serif;
  color: var(--ent-violet-400);
  background: var(--ent-violet-100);
  border-radius: 4px;
  padding: 0 4px;
  vertical-align: 2px;
}
.ent-brain__cites {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.ent-brain__cite {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px 4px 5px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--rule);
  font-size: 11px;
  color: var(--ent-zinc-750);
  opacity: 0;
  animation:
    ent-brain-card-in var(--ent-brain-cycle) linear infinite,
    ent-brain-ask-exit var(--ent-brain-cycle) linear infinite;
  animation-composition: replace, add;
  animation-delay:
    calc(var(--ent-brain-pct) * (58.15 + 1.105 * var(--i, 0))), 0s;
}
.ent-brain__cite img {
  width: 13px;
  height: 13px;
  object-fit: contain;
}
.ent-brain__withheld {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border-radius: 8px;
  background: var(--paper-2);
  box-shadow: inset 0 0 0 1px var(--ent-zinc-50);
  font-size: 11.5px;
  color: var(--muted);
  opacity: 0;
  animation:
    ent-brain-card-in var(--ent-brain-cycle) linear infinite,
    ent-brain-ask-exit var(--ent-brain-cycle) linear infinite;
  animation-composition: replace, add;
  animation-delay: calc(var(--ent-brain-pct) * 62.57), 0s;
}
.ent-brain__withheld b {
  font-weight: 600;
  color: var(--ent-zinc-750);
}
@keyframes ent-brain-word-in {
  0% {
    opacity: 0;
  }
  0.23%,
  50% {
    opacity: 1;
  }
  50.01%,
  100% {
    opacity: 0;
  }
}
@keyframes ent-brain-search-in {
  0%,
  42.53% {
    opacity: 0;
  }
  43.43%,
  69.21% {
    opacity: 1;
  }
  70.09%,
  100% {
    opacity: 0;
  }
}

/* Ask indexes */
.ent-brain__word:nth-child(2),
.ent-brain__answer-line:nth-child(2),
.ent-brain__cite:nth-child(2) {
  --i: 1;
}
.ent-brain__word:nth-child(3),
.ent-brain__answer-line:nth-child(3),
.ent-brain__cite:nth-child(3) {
  --i: 2;
}
.ent-brain__word:nth-child(4) {
  --i: 3;
}
.ent-brain__word:nth-child(5) {
  --i: 4;
}
.ent-brain__word:nth-child(6) {
  --i: 5;
}
.ent-brain__word:nth-child(7) {
  --i: 6;
}
.ent-brain__word:nth-child(8) {
  --i: 7;
}
.ent-brain__word:nth-child(9) {
  --i: 8;
}
.ent-brain__word:nth-child(10) {
  --i: 9;
}

/* Share: the Slack event lands, a dot runs from it into the brain (which ripples), the memory updates, and
   dots run out to the five agents in turn (--i = 0..4), each lighting up and showing "updated" as its dot lands. */
.ent-brain__share {
  position: relative;
  width: 660px;
  height: 256px;
}
.ent-brain__network {
  position: absolute;
  inset: 0;
}
.ent-brain__spoke {
  stroke: var(--ent-violet-120);
  stroke-width: 1.5;
  stroke-dasharray: 4 5;
  animation: ent-brain-flow-free 1s linear infinite;
}
.ent-brain__core {
  position: absolute;
  left: 330px;
  top: 128px;
  transform: translate(-50%, -50%);
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--ent-violet-120);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  text-align: center;
}
.ent-brain__core svg {
  margin-bottom: 4px;
}
.ent-brain__core .ent-brain__silhouette {
  fill: var(--ent-violet-100);
}
.ent-brain__core .ent-brain__fold {
  stroke-width: 4;
}
.ent-brain__core .ent-brain__edge {
  stroke-width: 7;
}
.ent-brain__core b {
  font-size: 10px;
  line-height: 11px;
  width: 72px;
  color: var(--ink);
}
.ent-brain__core em {
  font-style: normal;
  font:
    400 7.5px "Geist Mono",
    ui-monospace,
    monospace;
  color: var(--accent);
}
.ent-brain__agent {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: 999px;
  background: var(--paper);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  box-shadow: inset 0 0 0 1px var(--rule);
}
/* The lit ring: fades in as the agent's dot lands (the same moment as its "updated" tag) and out with the step. */
.ent-brain__agent::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow:
    0 0 0 3px var(--ent-accent-a12),
    inset 0 0 0 1px var(--ent-violet-160);
  pointer-events: none;
  opacity: 0;
  animation:
    ent-brain-tick-in var(--ent-brain-cycle) linear infinite,
    ent-brain-share-exit-early var(--ent-brain-cycle) linear infinite;
  animation-composition: replace, add;
  animation-delay:
    calc(var(--ent-brain-pct) * (88.07 + 1.105 * var(--i, 0))), 0s;
}
.ent-brain__agent i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--ent-cyan-600));
}
.ent-brain__agent--sales {
  left: 174.3px;
  top: 101.1px;
}
.ent-brain__agent--apps {
  --i: 4;
  left: 190.4px;
  top: 180px;
}
.ent-brain__agent--support {
  --i: 3;
  left: 485.7px;
  top: 154.9px;
}
.ent-brain__agent--finance {
  --i: 1;
  left: 485.7px;
  top: 101.1px;
}
.ent-brain__agent--workflows {
  --i: 2;
  left: 371.7px;
  top: 27.5px;
}
.ent-brain__updated {
  font-style: normal;
  font:
    500 9px "Geist Mono",
    ui-monospace,
    monospace;
  color: var(--ent-green-700);
  background: var(--ent-green-50);
  padding: 1px 5px;
  border-radius: 4px;
  opacity: 0;
  animation:
    ent-brain-tick-in var(--ent-brain-cycle) linear infinite,
    ent-brain-share-exit-early var(--ent-brain-cycle) linear infinite;
  animation-composition: replace, add;
  animation-delay:
    calc(var(--ent-brain-pct) * (88.07 + 1.105 * var(--i, 0))), 0s;
}
.ent-brain__event {
  position: absolute;
  left: 0;
  top: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 11px;
  border-radius: 10px;
  background: var(--paper);
  box-shadow:
    0 8px 24px var(--ent-ink-a8),
    inset 0 0 0 1px var(--rule);
  opacity: 0;
  animation:
    ent-brain-card-in var(--ent-brain-cycle) linear infinite,
    ent-brain-share-exit var(--ent-brain-cycle) linear infinite;
  animation-composition: replace, add;
  animation-delay: calc(var(--ent-brain-pct) * 74.81), 0s;
}
.ent-brain__event img {
  width: 18px;
  height: 18px;
}
.ent-brain__event-text {
  display: flex;
  flex-direction: column;
  line-height: 15px;
}
.ent-brain__event-text em {
  font-style: normal;
  font:
    400 9.5px "Geist Mono",
    ui-monospace,
    monospace;
  color: var(--ent-zinc-350);
}
.ent-brain__event-text b {
  font-size: 12px;
  color: var(--ink);
}
.ent-brain__memory-update {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: fit-content;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--ent-violet-100);
  font-size: 12px;
  color: var(--ent-violet-400);
  opacity: 0;
  animation:
    ent-brain-card-in var(--ent-brain-cycle) linear infinite,
    ent-brain-share-exit var(--ent-brain-cycle) linear infinite;
  animation-composition: replace, add;
  animation-delay: calc(var(--ent-brain-pct) * 81.88), 0s;
}
.ent-brain__memory-update b {
  font-weight: 600;
}
/* Dots travel from --from to --to (network coordinates), starting at --at (% of the cycle). */
.ent-brain__dot {
  --from: 330px, 128px;
  fill: var(--accent);
  opacity: 0;
  animation: ent-brain-dot-travel var(--ent-brain-cycle) linear infinite;
  animation-delay: calc(var(--ent-brain-pct) * var(--at));
}
.ent-brain__dot--in {
  --from: 70px, 34px;
  --to: 330px, 128px;
  --at: 77.91;
  fill: var(--ent-red-500);
}
.ent-brain__dot--sales {
  --to: 174.3px, 101.1px;
  --at: 84.54;
}
.ent-brain__dot--finance {
  --to: 485.7px, 101.1px;
  --at: 85.65;
}
.ent-brain__dot--workflows {
  --to: 371.7px, 27.5px;
  --at: 86.74;
}
.ent-brain__dot--support {
  --to: 485.7px, 154.9px;
  --at: 87.85;
}
.ent-brain__dot--apps {
  --to: 190.4px, 180px;
  --at: 88.95;
}
.ent-brain__ripple {
  stroke: var(--accent);
  animation: ent-brain-ripple var(--ent-brain-cycle) ease-out infinite;
}
@keyframes ent-brain-flow-free {
  to {
    stroke-dashoffset: -9;
  }
}
@keyframes ent-brain-dot-travel {
  0% {
    transform: translate(var(--from));
    opacity: 0;
  }
  0.22% {
    opacity: 1;
  }
  3.53% {
    transform: translate(var(--to));
    opacity: 1;
  }
  3.97%,
  100% {
    transform: translate(var(--to));
    opacity: 0;
  }
}
@keyframes ent-brain-ripple {
  0%,
  81.88% {
    r: 44;
    opacity: 0;
  }
  82.1% {
    r: 44;
    opacity: 0.5;
  }
  85.86%,
  100% {
    r: 78;
    opacity: 0;
  }
}

/* Phones: the card stands up at a fixed height that fits on screen under the header, and each step stacks.
   Learn: the brain on top, the sources and what it knows in two columns under it (the feed lines give way).
   Ask: the chat is a phone screen with a status bar, the answer a plain reply under the question. Share: the event on top, the brain in the middle with
   Support and Custom Apps beside it, the three agents that update below it, and the tall network (see
   _anim_brain.html) behind them with the dots re-aimed at those points. */
.ent-brain__network--tall,
.ent-brain__phone-bar {
  display: none;
}
@media (max-width: 599px) {
  .ent-brain {
    height: 540px;
    padding: 16px;
    gap: 10px;
  }
  .ent-brain__scene {
    padding-top: 58px;
  }
  .ent-brain__caption {
    text-align: center;
  }

  .ent-brain__learn {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 8px;
    row-gap: 5px;
    width: 100%;
  }
  .ent-brain__sources {
    display: contents;
  }
  .ent-brain__feed {
    display: none;
  }
  .ent-brain__brain {
    grid-column: 1 / -1;
    width: auto;
    margin-bottom: 6px;
  }
  .ent-brain__brain > svg {
    width: 180px;
    height: auto;
  }
  .ent-brain__source {
    grid-column: 1;
    grid-row: calc(var(--i, 0) + 2);
    gap: 7px;
    padding: 6px 8px;
  }
  .ent-brain__source img {
    width: 18px;
    height: 18px;
  }
  .ent-brain__memories {
    grid-column: 2;
    grid-row: 2 / span 5;
    width: auto;
    gap: 5px;
    justify-content: space-between;
  }
  .ent-brain__memory {
    padding: 6px 9px;
  }
  .ent-brain__loop {
    grid-column: 1 / -1;
    grid-row: 7;
    justify-self: center;
    margin-top: 6px;
  }

  .ent-brain__chat {
    width: 100%;
    box-sizing: border-box;
    gap: 10px;
    padding: 0 12px 14px;
    border-radius: 22px;
    background: var(--paper);
    box-shadow:
      inset 0 0 0 1px var(--rule),
      0 8px 24px var(--ent-ink-a8);
  }
  .ent-brain__phone-bar {
    position: relative;
    display: flex;
    align-items: center;
    height: 26px;
    font:
      400 10px "Geist Mono",
      ui-monospace,
      monospace;
    color: var(--ent-zinc-350);
  }
  .ent-brain__phone-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--paper-2);
    font-size: 9.5px;
    white-space: nowrap;
  }
  .ent-brain__question {
    max-width: 100%;
    gap: 6px;
  }
  .ent-brain__bubble {
    padding: 8px 11px;
    font-size: 11.5px;
    line-height: 16px;
  }
  .ent-brain__avatar {
    width: 22px;
    height: 22px;
    font-size: 8.5px;
  }
  .ent-brain__search {
    font-size: 9.5px;
  }
  .ent-brain__word {
    white-space: pre-wrap;
  }
  .ent-brain__answer {
    padding: 0 2px;
    background: none;
    box-shadow: none;
  }
  .ent-brain__bot {
    display: none;
  }
  .ent-brain__answer-text {
    font-size: 11.5px;
    line-height: 16.5px;
  }
  .ent-brain__cites {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .ent-brain__cite {
    padding: 2px 8px 2px 4px;
    font-size: 10px;
  }
  .ent-brain__withheld {
    align-items: flex-start;
    background: var(--paper);
    font-size: 10px;
  }
  .ent-brain__withheld svg {
    flex-shrink: 0;
    margin-top: 2px;
  }

  .ent-brain__share {
    width: 318px;
    height: 372px;
  }
  .ent-brain__network--wide {
    display: none;
  }
  .ent-brain__network--tall {
    display: block;
  }
  .ent-brain__network--tall .ent-brain__dot {
    --from: 159px, 142px;
  }
  .ent-brain__network--tall .ent-brain__dot--in {
    --from: 159px, 52px;
    --to: 159px, 142px;
  }
  .ent-brain__network--tall .ent-brain__dot--sales {
    --to: 80px, 240px;
  }
  .ent-brain__network--tall .ent-brain__dot--finance {
    --to: 238px, 240px;
  }
  .ent-brain__network--tall .ent-brain__dot--workflows {
    --to: 159px, 290px;
  }
  .ent-brain__core {
    left: 159px;
    top: 142px;
    width: 100px;
    height: 100px;
  }
  .ent-brain__core svg {
    width: 40px;
    height: 32px;
    margin-bottom: 3px;
  }
  .ent-brain__core b {
    width: auto;
    white-space: nowrap;
    line-height: 12px;
  }
  .ent-brain__core em {
    font-size: 9px;
  }
  .ent-brain__agent {
    gap: 5px;
    padding: 6px 9px;
    font-size: 11px;
  }
  .ent-brain__agent--sales {
    left: 80px;
    top: 240px;
  }
  .ent-brain__agent--apps {
    left: 264px;
    top: 142px;
  }
  .ent-brain__agent--support {
    left: 54px;
    top: 142px;
  }
  .ent-brain__agent--finance {
    left: 238px;
    top: 240px;
  }
  .ent-brain__agent--workflows {
    left: 159px;
    top: 290px;
  }
  .ent-brain__event {
    top: 0;
    right: 0;
    margin: 0 auto;
    width: fit-content;
  }
  .ent-brain__memory-update {
    padding: 6px 10px;
    font-size: 11.5px;
  }
}

/* Reduced motion: freeze on the Share step (96.4% of the cycle). The Share cards use shifted entrances,
   which a single frozen delay cannot place, so they are simply shown. */
@media (prefers-reduced-motion: reduce) {
  .ent-brain * {
    animation-delay: calc(var(--ent-brain-cycle) * -0.964) !important;
    animation-play-state: paused !important;
  }
  .ent-brain__event,
  .ent-brain__memory-update,
  .ent-brain__updated,
  .ent-brain__agent::after {
    animation: none;
    opacity: 1;
  }
}