/* Use the manifesto's existing canvas, line weights, and orbital motion. */
.ontology-story { width: 100%; max-width: 1080px; margin: 112px auto 0; padding-top: 40px; border-top: 1px solid var(--hairline); }
.ontology-story__intro h2 { max-width: 680px; font-size: clamp(30px, 3vw, 44px); font-weight: 500; letter-spacing: -.02em; line-height: 1.12; text-wrap: balance; margin-bottom: 24px; }
#manifesto .ontology-story__intro p, #manifesto .ontology-story__outlook { max-width: 680px; font-size: calc(1em + 2pt); }
.ontology-story__figure { margin: 32px 0 0; }
.ontology-story__diagram { display: block; width: 100%; max-width: 640px; margin: 0 auto; overflow: visible; font-family: var(--sans); }
.ontology-story__label { fill: var(--ink); font-size: 21px; font-weight: 400; text-anchor: middle; }
.ontology-story__hub-title { fill: var(--ink); font-size: 26px; font-weight: 500; text-anchor: middle; letter-spacing: -.02em; }
.ontology-story__hub-description { fill: var(--subtle); font-size: 16px; text-anchor: middle; }
.ontology-story__wire { stroke: var(--ink); stroke-opacity: .2; stroke-width: 1; }
.ontology-story__orbit { stroke: var(--ink); stroke-opacity: .17; stroke-width: 1; transform-origin: 280px 300px; animation: ontology-orbit 90s linear infinite; }
.ontology-story__hub-ring { fill: var(--canvas); stroke: var(--ink); stroke-opacity: .45; stroke-width: 1; }
.ontology-story__hub-inner { stroke: var(--ink); stroke-opacity: .12; stroke-width: 1; transform-origin: 280px 300px; animation: ontology-orbit 60s linear infinite reverse; }
.ontology-story__node { fill: var(--canvas); stroke: var(--ink); stroke-width: 1; animation: ontology-node 8s ease infinite; animation-delay: inherit; }
.ontology-story__packet { stroke: var(--lime); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 5 100; opacity: 0; }
.ontology-story__packet--input { animation: ontology-ingest 8s linear infinite; }
.ontology-story__packet--records { animation-delay: .45s; }
.ontology-story__packet--output { animation: ontology-distribute 8s linear infinite; animation-delay: inherit; }
.ontology-story__capture circle { fill: var(--ink); animation: ontology-capture 8s ease infinite; }
.ontology-story__records path { fill: none; stroke: var(--ink); stroke-opacity: .65; stroke-width: 1; }
.ontology-story__records circle { fill: var(--ink); }
.ontology-story__model path { stroke: var(--ink); stroke-opacity: .4; stroke-width: 1; }
.ontology-story__model circle { fill: var(--ink); animation: ontology-model 8s ease infinite; }
.ontology-story__caption { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
#manifesto .ontology-story__outlook { margin-top: 32px; color: var(--subtle); }

/* Only the figure's own reveal starts the sequence, not the heading above it. */
.ontology-story__figure:not(.in) :is(.ontology-story__orbit, .ontology-story__hub-inner, .ontology-story__packet, .ontology-story__node, .ontology-story__capture circle, .ontology-story__model circle) { animation-play-state: paused; }
@keyframes ontology-orbit { to { transform: rotate(360deg); } }
@keyframes ontology-capture { 0%, 100% { opacity: .35; } 8%, 22% { opacity: 1; } 35%, 90% { opacity: .5; } }
@keyframes ontology-ingest { 0% { stroke-dashoffset: 6; opacity: 0; } 3% { opacity: 1; } 25% { stroke-dashoffset: -100; opacity: 1; } 26%, 100% { stroke-dashoffset: -100; opacity: 0; } }
@keyframes ontology-model { 0%, 16%, 100% { fill: var(--ink); } 27%, 72% { fill: var(--lime); } 86% { fill: var(--ink); } }
@keyframes ontology-distribute { 0%, 30% { stroke-dashoffset: 6; opacity: 0; } 32% { opacity: 1; } 55% { stroke-dashoffset: -100; opacity: 1; } 56%, 100% { stroke-dashoffset: -100; opacity: 0; } }
@keyframes ontology-node { 0%, 45%, 100% { fill: var(--canvas); stroke: var(--ink); } 56%, 72% { fill: var(--lime); stroke: var(--lime); } 88% { fill: var(--canvas); stroke: var(--ink); } }
@media (max-width: 800px) { .ontology-story { margin-top: 72px; padding-top: 32px; } }
@media (max-width: 640px) {
  .ontology-story__figure { margin-top: 24px; margin-inline: -12px; }
  .ontology-story__label { font-size: 23px; }
  .ontology-story__hub-title { font-size: 28px; }
  .ontology-story__hub-description { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .ontology-story__diagram * { animation: none !important; }
  .ontology-story__model circle { fill: var(--lime); }
}