/* ============================================================================
   Chapters 2–4 — the story arc (Agent A)
   ② complexity: the litany + the constellation web that connects, then breaks
   ③ turn:       the Venn ignition — the page's focal moment
   ④ exceptions: the first calm proof, in the light world
   All markup inside the -stage divs is built by assets/js/ch-story.js.
   ========================================================================== */


/* ── ② Litany ──────────────────────────────────────────────────────────── */

#complexity .litany {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.6vw, 2.4rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: var(--track-display);
}
#complexity .litany + p { margin-top: var(--sp-8); }

/* Scenes run edge to edge; the chapter's own padding stops above them. */
#complexity { padding-bottom: 0; }
#complexity .scene {
  margin-top: var(--sp-16);
  margin-inline: calc(-1 * var(--sp-6));
}
#turn { padding: 0; }


/* ── ② Web scene ───────────────────────────────────────────────────────── */

#web-scene { height: 340svh; }

.web-layer { position: absolute; inset: 0; }

.web-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;   /* overrides the base canvas rule */
}

.web-nodes { position: absolute; inset: 0; }

.web-node {
  position: absolute;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  opacity: 0;
  line-height: 1.25;
}

.web-head {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  letter-spacing: -0.012em;
}
.web-head[data-cluster="products"]  { color: var(--green-text); }
.web-head[data-cluster="workflows"] { color: var(--cyan-text); }
.web-head[data-cluster="knowledge"] { color: var(--accent-text); }

.web-word {
  font-size: clamp(0.9rem, 1.02vw, 1.02rem);
  color: var(--ink-mute);
}

/* Second ring — one step down from a word: smaller, a notch fainter.
   --ink-faint on the dark ground is 6.4:1, so it stays well clear of the
   floor while the scene is live; it joins the same end-of-scene dim. */
.web-sat {
  font-size: clamp(0.78rem, 0.86vw, 0.86rem);
  color: var(--ink-faint);
}

.web-alert {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(0.95rem, 1.15vw, 1.15rem);
  color: var(--accent-text);
}

.web-close {
  position: absolute;
  left: 50%;
  top: 51%;
  transform: translate(-50%, -50%);
  width: min(90%, 22ch);
  padding: var(--sp-8) var(--sp-12);
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4.5vw, 3rem);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: var(--track-display);
  text-wrap: balance;
  color: var(--ink);
  opacity: 0;
  background: radial-gradient(closest-side,
              color-mix(in srgb, var(--bg) 92%, transparent),
              color-mix(in srgb, var(--bg) 72%, transparent) 58%,
              transparent);
}


/* ── ③ Venn scene ──────────────────────────────────────────────────────── */

#venn-scene { height: 360svh; }

#venn-stage {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
  max-width: 78rem;
  margin-inline: auto;
  padding-inline: var(--sp-6);
}

.venn-figure {
  position: relative;
  width: 100%;
  aspect-ratio: 460 / 440;
}

.venn-svg { position: absolute; inset: 0; width: 100%; height: 100%; }

.vn-c circle { fill: none; stroke-width: var(--vn-sw, 1.5); }
.vn-c1 circle { stroke: var(--ink); }
.vn-c2 circle { stroke: var(--cyan); }
.vn-c3 circle { stroke: var(--orange); }

.vn-fill rect { fill: var(--orange); }
#vn-glow-grad stop { stop-color: var(--orange); }

.vn-mark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 46px;
  letter-spacing: -0.03em;
  fill: #fff;
  text-anchor: middle;
  dominant-baseline: central;
}

.venn-label {
  position: absolute;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(0.82rem, 1.05vw, 0.98rem);
  line-height: 1.25;
  white-space: nowrap;
  text-align: center;
  opacity: 0;
}
.venn-label[data-ring="1"] { left: 50%; top: 4.5%;  color: var(--ink-mute); }
.venn-label[data-ring="2"] { left: 17%; top: 88.5%; color: var(--cyan-text); }
.venn-label[data-ring="3"] { left: 83%; top: 88.5%; color: var(--accent-text); }

.venn-copy { max-width: 34ch; }
/* White (not --ink-mute): these lines get dimmed to 55% once read, and 55% of
   --ink-mute would land at 4.1:1 — under the floor. Weight carries emphasis. */
.venn-line {
  margin: 0;
  max-width: none;
  font-size: clamp(1.02rem, 1.35vw, 1.24rem);
  line-height: 1.55;
  color: var(--ink);
  opacity: 0;
}
.venn-line + .venn-line { margin-top: var(--sp-8); }
.venn-line strong { font-weight: 600; }
.venn-line em { font-style: italic; }


/* ── ④ Exceptions ──────────────────────────────────────────────────────── */

.exc-grid {
  display: grid;
  grid-template-columns: 40fr 60fr;
  gap: clamp(2rem, 4.5vw, 4rem);
  align-items: center;
}

.exc-jumble {
  position: relative;
  height: clamp(250px, 30vw, 360px);
  overflow: clip;
}
/* Real task scraps, not skeleton bars — clipped to sliver scale so the pile
   reads as noise at a glance and only resolves into words up close. */
.exc-sliver {
  position: absolute;
  font-size: 11px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: color-mix(in srgb, var(--ink-faint) 72%, transparent);
  transform: rotate(var(--r));
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
  transition-delay: calc(var(--i) * 6ms);
}
.exc-jumble.is-settled .exc-sliver {
  opacity: 0.6;
  transform: translateX(var(--dx)) rotate(var(--r));
}

.exc-caption {
  margin-top: var(--sp-6);
  font-size: var(--size-small);
  color: var(--ink-mute);
}

.exc-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow-float);
  padding: clamp(1.5rem, 2.6vw, 2.25rem);
}
.exc-card-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--size-h3);
  line-height: 1.2;
}
.exc-card-sub {
  margin-top: var(--sp-1);
  font-size: var(--size-small);
  font-weight: 500;
  color: var(--green-text);
}
.exc-rows { margin-top: var(--sp-6); }
.exc-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-6);
  padding: var(--sp-4) 0;
}
.exc-row + .exc-row { border-top: 1px solid var(--card-line); }
.exc-row:last-child { padding-bottom: 0; }
.exc-row-title { font-weight: 500; color: var(--ink); line-height: 1.35; }
.exc-row-ctx {
  margin-top: var(--sp-1);
  font-size: var(--size-small);
  color: var(--ink-mute);
  line-height: 1.45;
}
.exc-chip {
  flex: none;
  margin-top: 2px;
  border-radius: 999px;
  padding: 0.3em 0.85em;
  font-size: var(--size-small);
  font-weight: 600;
  color: var(--accent-text);
  background: color-mix(in srgb, var(--orange) 12%, transparent);
}

#exceptions .stage-note {
  margin: var(--sp-12) auto 0;
  max-width: 44ch;
  text-align: center;
}


/* ── Mobile ────────────────────────────────────────────────────────────── */

@media (max-width: 760px) {
  /* No clear pocket in the mobile stack — the closing line lands as a full
     band so the dimmed web reads as texture behind it, never as clutter. */
  .web-close {
    width: 100%;
    padding: var(--sp-16) var(--sp-6);
    background: linear-gradient(to bottom,
                transparent 0%,
                color-mix(in srgb, var(--bg) 97%, transparent) 20%,
                color-mix(in srgb, var(--bg) 97%, transparent) 80%,
                transparent 100%);
  }

  .web-sat { font-size: 0.78rem; }

  #venn-stage {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
    align-content: center;
    padding-block: var(--sp-8);
  }
  .venn-figure { width: min(86vw, 340px); margin-inline: auto; }
  .venn-label {
    white-space: normal;
    max-width: 7.5rem;
    font-size: 0.82rem;
  }
  .venn-label[data-ring="2"] { left: 20%; }
  .venn-label[data-ring="3"] { left: 80%; }
  .venn-copy { max-width: none; }
  .venn-line { font-size: 1rem; }
  .venn-line + .venn-line { margin-top: var(--sp-6); }

  .exc-grid { grid-template-columns: 1fr; gap: var(--sp-8); }
  .exc-jumble { height: min(55vw, 240px); }
  .exc-jumble.is-settled .exc-sliver {
    transform: translateY(var(--dx)) rotate(var(--r));
  }
}


/* Reduced motion: the scenes render their final state, so they don't need a
   scrub run-up — collapse them to a single screen of static composition. */
@media (prefers-reduced-motion: reduce) {
  #web-scene, #venn-scene { height: 100svh; }
}