/* Brain section: one dark screen with the 3D brain; the narrator moves it between states. */
.brain-story {
  --brain-bg: #000;
  --brain-ink: #f4f4f4;
  --brain-line: #1c1c1c;
  display: block;
  padding: 0;
  background: var(--brain-bg);
  color: var(--brain-ink);
  border-bottom-color: var(--brain-line);
}
/* One slide: the narrator moves the brain through its five steps. */
html.is-presenting .brain-story { padding: 0; overflow: hidden; }
.brain-stage {
  position: relative;
  height: calc(100svh - var(--header-height));
  margin: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
html.is-presenting .brain-stage { height: 100%; }
.brain-viewport { flex: 1; min-height: 200px; position: relative; }
#brain-canvas { display: block; width: 100%; height: 100%; position: absolute; inset: 0; }
#brain-canvas[hidden] { display: none; }
.brain-labels { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; transition: opacity .6s ease; }
/* Labels wait until the chapter intro has revealed the highlighted areas. */
.brain-stage[data-intro] .brain-labels { opacity: 0; transition-duration: .2s; }
.brain-label { opacity: 0; transition: opacity .5s ease; }
.brain-label.is-visible { opacity: 1; }
.brain-label.is-visible.is-muted { opacity: .28; }
/* In a close-up only the area being discussed keeps its label. */
.brain-stage[data-zoom] .brain-label.is-muted { opacity: 0; }
.brain-label.is-focus text { font-weight: 700; font-size: 14px; }
.brain-label line { stroke-width: 1; }
/* No line animation until the label's text is fully typed; then it grows to the area. */
.brain-label.is-drawing line { transition: stroke-dashoffset .5s ease-out; }
/* Before its turn a label is just an empty slot; the dot pops in when it is revealed. */
.brain-label circle { transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform .35s cubic-bezier(.3, 1.6, .5, 1), r .3s ease; }
.brain-label.is-revealed circle { transform: scale(1); }
.brain-label text { fill: #fff; font-size: 13px; letter-spacing: .01em; dominant-baseline: middle; }
/* The name sits in a square black box with no border and no rounded corners (brain.js sizes it); it
   appears as the name starts typing. */
.brain-label rect { fill: #000; opacity: 0; transition: opacity .25s ease; }
.brain-label.is-named rect { opacity: 1; }
/* Every letter is laid out from the start and typed in by making it visible. */
.brain-label text { white-space: pre; }
.brain-label tspan { fill-opacity: 0; transition: fill-opacity .08s linear; }
.brain-label tspan.is-typed { fill-opacity: 1; }
#brain-canvas[hidden] ~ .brain-labels { display: none; }
.brain-loading { position: absolute; inset: 0; margin: 0; display: grid; place-content: center; padding: 32px; text-align: center; color: #b3b3b3; font-size: 1rem; line-height: 1.6; }
.brain-loading[hidden] { display: none; }

.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }


@media (prefers-reduced-motion: reduce) {
  .brain-label, .brain-label line, .brain-label circle, .brain-label tspan { transition: none; }
}