Manifesto Axiom

---
import type { CompendiumMeta } from '../../../data/types';

export const meta: CompendiumMeta = {
  id: 102,
  slug: 'manifesto-axiom',
  name: 'Manifesto Axiom',
  category: 'compositions',
  subcategory: 'heroes',
  description: 'The DoCoDeGo axiom rendered as an editorial hero — three clauses revealed in sequence, each anchored to its pillar accent, framed for the manifesto landing page.',
  spec: `## Intent
Render the framework's foundational axiom — "Intent is the primary artefact. Implementation is a compiled derivative. Governance is earned through the loop." — as a marketing-grade hero suitable for the top of /manifesto. Sequential reveal of each clause communicates that the three statements compose into a single thesis; they are not three bullets.

## Acceptance Criteria
- [ ] Three clauses, one per line, in editorial display type
- [ ] Each clause carries a pillar accent (DO yellow / CO blue / GO green)
- [ ] Sequential entrance: clause 2 only after clause 1 settles
- [ ] Number markers (01 / 02 / 03) lead each line as quiet wayfinders
- [ ] Caption strip below states the axiom is what the four pillars compile from
- [ ] No JS for content — animation is CSS-only with staggered delays
- [ ] Respects prefers-reduced-motion — no movement under reduce

## Constraints
- Pure Astro + Tailwind, no external deps
- Tokens only — no brand hex literals
- ≤ 250 lines body`,
  tags: ['real-content', 'animated', 'reduced-motion', 'banner', 'responsive', 'dark-mode-tested'],
  status: 'stable',
  kind: 'composition',
  aspect: 'full',
  health: { ics: 100, a11y: 'aa', themed: true, animated: true },
};

const clauses = [
  {
    n: '01',
    bg: 'bg-do',
    lead: 'Intent',
    rest: 'is the primary artefact.',
    note: 'What we mean — written, versioned, owned.',
  },
  {
    n: '02',
    bg: 'bg-co',
    lead: 'Implementation',
    rest: 'is a compiled derivative.',
    note: 'Code is the output of intent under constraint, not the source.',
  },
  {
    n: '03',
    bg: 'bg-go',
    lead: 'Governance',
    rest: 'is earned through the loop.',
    note: 'Trust accrues from review cycles that actually closed.',
  },
];
---

<div data-this-component class="w-full bg-paper text-black border-4 border-black p-5 md:p-10 lg:p-14 overflow-hidden">

  <header class="mb-8 md:mb-12 flex flex-wrap items-center gap-3">
    <div class="inline-flex items-center gap-2 bg-ink text-paper px-2.5 py-1 border-2 border-black">
      <span class="text-[10px] font-mono uppercase tracking-widest">The Axiom</span>
    </div>
    <span class="text-[10px] md:text-xs font-mono uppercase tracking-widest text-black opacity-60">
      Three clauses · one thesis
    </span>
  </header>

  <ol class="space-y-5 md:space-y-7 max-w-5xl">
    {clauses.map((c, i) => (
      <li class="reveal flex items-start gap-4 md:gap-6" style={`--reveal-i:${i}`}>
        <span class:list={['shrink-0 inline-flex items-center justify-center w-10 h-10 md:w-14 md:h-14 border-4 border-black font-black tabular-nums text-sm md:text-lg', c.bg, 'text-black']}>
          {c.n}
        </span>
        <div class="min-w-0 grow">
          <p class="text-2xl sm:text-3xl md:text-5xl lg:text-6xl font-black tracking-tight leading-[1.05] text-black">
            <span class:list={['border-b-4 md:border-b-[6px] border-black inline-block', c.bg, 'text-black', 'px-1.5 md:px-2']}>{c.lead}</span>
            <span class="ms-2 md:ms-3">{c.rest}</span>
          </p>
          <p class="mt-2 md:mt-3 text-sm md:text-base font-mono text-black opacity-70 leading-snug">
            <span class="opacity-60">// </span>{c.note}
          </p>
        </div>
      </li>
    ))}
  </ol>

  <footer class="reveal mt-10 md:mt-14 border-t-4 border-black pt-5 md:pt-6 max-w-5xl flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3" style="--reveal-i:3">
    <p class="text-xs md:text-sm font-mono uppercase tracking-widest text-black opacity-80">
      DOcument · COmpose · DEmonstrate · GOvern
    </p>
    <p class="text-xs md:text-sm font-black uppercase tracking-wide text-black">
      The four pillars compile from the axiom →
    </p>
  </footer>

</div>

<style>
  [data-this-component] .reveal {
    opacity: 0;
    transform: translateY(20px);
    animation: cpd-102-reveal 620ms cubic-bezier(0.2, 0, 0.13, 1.2) forwards;
    animation-delay: calc(var(--reveal-i, 0) * 220ms);
  }
  @keyframes cpd-102-reveal {
    to { opacity: 1; transform: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    [data-this-component] .reveal {
      animation: none;
      opacity: 1;
      transform: none;
    }
  }
</style>