Continuous Convergence Pulse

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

export const meta: CompendiumMeta = {
  id: 506,
  slug: 'continuous-convergence-pulse',
  name: 'Continuous Convergence Pulse',
  category: 'maturity-process',
  subcategory: 'flow',
  pillar: 'de',
  description: 'Pulsing dot indicating the system is converging — small, steady, always-on, the opposite of a release ceremony.',
  spec: `## Intent
DoCoDeGo replaces ceremony with rhythm. This pulse is the heartbeat of continuous convergence: persistent, low-amplitude, signal-driven.

## Acceptance Criteria
- [ ] Concentric pulses radiating from a centre dot
- [ ] Slow, steady rhythm (~2s period)
- [ ] Negative: does NOT advertise a release window

## Constraints
- Pure CSS animation
- Reduced-motion friendly
- Theme-aware`,
  tags: ['animated', 'reduced-motion', 'real-content', 'dark-mode-tested'],
  status: 'stable',
  health: { ics: 86, a11y: 'aa', themed: true, animated: true },
};
---

<div data-this-component class="w-full bg-paper text-black border-4 border-black p-4 flex flex-col items-center overflow-hidden">
  <div class="relative w-24 h-24 flex items-center justify-center" aria-hidden="true">
    <span class="absolute inset-0 border-4 border-de pulse-ring pulse-ring-1"></span>
    <span class="absolute inset-2 border-4 border-de pulse-ring pulse-ring-2"></span>
    <span class="relative w-4 h-4 bg-de border-2 border-black"></span>
  </div>
  <div class="mt-2 font-mono text-[10px] uppercase tracking-widest opacity-60">continuous convergence</div>
  <div class="font-black text-[11px] uppercase tracking-widest">SYSTEM HEARTBEAT</div>
</div>
<style>
  [data-this-component] .pulse-ring {
    border-radius: 0;
    transform-origin: center;
    animation: pulse-out 2.2s ease-out infinite;
    opacity: 0;
  }
  [data-this-component] .pulse-ring-2 { animation-delay: 1.1s; }
  @keyframes pulse-out {
    0%   { transform: scale(0.4); opacity: 0.9; }
    100% { transform: scale(1.2); opacity: 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    [data-this-component] .pulse-ring { animation: none; opacity: 0.4; }
  }
</style>