From 4fac442089ce4fcd31dbb8cfe2e52ad2d68ae265 Mon Sep 17 00:00:00 2001
From: felirami <felirami@users.noreply.github.com>
Date: Tue, 1 Sep 2026 23:11:59 -0400
Subject: [PATCH 1/4] Add motion layer and hero signal board scripts

Introduce two dependency-free TypeScript modules bundled by Astro: motion.ts
(scroll reveals, condensed masthead with progress line, active nav, pointer
highlights, magnetic buttons, metric counters, self-drawing signal map) and
signal-board.ts (the hero canvas: procedurally routed traces with travelling
pulses, pointer spotlight, off-screen and hidden-tab pausing, static frame
under reduced motion).

Load Google Fonts through preconnect and link tags instead of a CSS @import,
and add the inline html.js gate that scopes every hidden-until-animated rule
so the page stays fully readable without JavaScript.
---
 src/layouts/BaseLayout.astro |   7 +
 src/scripts/motion.ts        | 251 +++++++++++++++++++
 src/scripts/signal-board.ts  | 458 +++++++++++++++++++++++++++++++++++
 3 files changed, 716 insertions(+)
 create mode 100644 src/scripts/motion.ts
 create mode 100644 src/scripts/signal-board.ts

diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index 4da1b3c..0a5ba6d 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -50,7 +50,14 @@ const canonicalURL = canonicalPath === null ? null : new URL(canonicalPath, Astr
     <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
     <link rel="manifest" href="/manifest.webmanifest" />
     <title>{title}</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=Manrope:wght@400;500;600&display=swap"
+    />
     <link rel="stylesheet" href="/styles.css" />
+    <script is:inline>document.documentElement.classList.add('js');</script>
 
     {structuredData && (
       <script type="application/ld+json" is:inline>
diff --git a/src/scripts/motion.ts b/src/scripts/motion.ts
new file mode 100644
index 0000000..14585f8
--- /dev/null
+++ b/src/scripts/motion.ts
@@ -0,0 +1,251 @@
+/**
+ * Motion layer for the Arca Computer homepage.
+ *
+ * Everything here is progressive enhancement: the page is fully readable with
+ * this script absent, and every hidden-until-revealed rule in styles.css is
+ * scoped to `html.js` + `prefers-reduced-motion: no-preference`.
+ */
+
+const REVEAL_SELECTOR = '[data-reveal], [data-reveal-line], [data-reveal-stagger] > *';
+const HIGHLIGHT_SELECTOR =
+  '.work-card, .proof-grid > a, .agent-grid > article, .founder-card, .metrics-strip > a';
+const STAGGER_STEP_MS = 70;
+const REVEAL_MS = 800;
+
+const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
+const finePointer = window.matchMedia('(hover: hover) and (pointer: fine)');
+
+function setupReveal(): void {
+  const targets = Array.from(document.querySelectorAll<HTMLElement>(REVEAL_SELECTOR));
+  if (targets.length === 0) return;
+
+  const finish = (el: HTMLElement, index: number) => {
+    el.style.setProperty('--i', String(index));
+    el.classList.add('is-in');
+    // Hand the element back to its own transitions once the reveal has played.
+    window.setTimeout(
+      () => el.classList.add('is-done'),
+      reduceMotion.matches ? 0 : REVEAL_MS + index * STAGGER_STEP_MS + 120,
+    );
+  };
+
+  if (!('IntersectionObserver' in window)) {
+    targets.forEach((el) => finish(el, 0));
+    return;
+  }
+
+  const observer = new IntersectionObserver(
+    (entries) => {
+      let batch = 0;
+      for (const entry of entries) {
+        if (!entry.isIntersecting) continue;
+        observer.unobserve(entry.target);
+        finish(entry.target as HTMLElement, Math.min(batch, 7));
+        batch += 1;
+      }
+    },
+    { threshold: 0.12, rootMargin: '0px 0px -8% 0px' },
+  );
+
+  targets.forEach((el) => observer.observe(el));
+}
+
+function setupMasthead(): void {
+  const masthead = document.querySelector<HTMLElement>('.masthead');
+  if (!masthead) return;
+
+  const links = Array.from(masthead.querySelectorAll<HTMLAnchorElement>('nav a[href^="#"]'));
+  const sections = links
+    .map((link) => ({ link, section: document.getElementById(link.hash.slice(1)) }))
+    .filter((entry): entry is { link: HTMLAnchorElement; section: HTMLElement } => entry.section !== null);
+
+  let scheduled = false;
+  const update = () => {
+    scheduled = false;
+    const y = window.scrollY;
+    const max = document.documentElement.scrollHeight - window.innerHeight;
+    masthead.classList.toggle('is-condensed', y > 24);
+    masthead.style.setProperty('--progress', max > 0 ? Math.min(1, y / max).toFixed(4) : '0');
+
+    // The active section is the last one whose top has passed 40% of the viewport.
+    const probe = window.innerHeight * 0.4;
+    let active: HTMLAnchorElement | null = null;
+    for (const { link, section } of sections) {
+      if (section.getBoundingClientRect().top <= probe) active = link;
+    }
+    for (const link of links) {
+      if (link === active) link.setAttribute('aria-current', 'true');
+      else link.removeAttribute('aria-current');
+    }
+  };
+
+  window.addEventListener(
+    'scroll',
+    () => {
+      if (scheduled) return;
+      scheduled = true;
+      window.requestAnimationFrame(update);
+    },
+    { passive: true },
+  );
+  window.addEventListener('resize', update, { passive: true });
+  update();
+}
+
+function setupPointerHighlight(): void {
+  if (!finePointer.matches) return;
+
+  document.addEventListener(
+    'pointermove',
+    (event) => {
+      const target = event.target;
+      if (!(target instanceof Element)) return;
+      const card = target.closest<HTMLElement>(HIGHLIGHT_SELECTOR);
+      if (!card) return;
+      const rect = card.getBoundingClientRect();
+      card.style.setProperty('--mx', `${(event.clientX - rect.left).toFixed(1)}px`);
+      card.style.setProperty('--my', `${(event.clientY - rect.top).toFixed(1)}px`);
+    },
+    { passive: true },
+  );
+}
+
+function setupMagneticButtons(): void {
+  if (!finePointer.matches || reduceMotion.matches) return;
+
+  for (const button of document.querySelectorAll<HTMLElement>('.button')) {
+    button.classList.add('is-magnetic');
+
+    button.addEventListener(
+      'pointermove',
+      (event) => {
+        const rect = button.getBoundingClientRect();
+        const dx = event.clientX - (rect.left + rect.width / 2);
+        const dy = event.clientY - (rect.top + rect.height / 2);
+        const x = Math.max(-6, Math.min(6, dx * 0.16));
+        const y = Math.max(-5, Math.min(5, dy * 0.28));
+        button.classList.remove('is-returning');
+        button.style.transform = `translate(${x.toFixed(1)}px, ${y.toFixed(1)}px)`;
+      },
+      { passive: true },
+    );
+
+    button.addEventListener('pointerleave', () => {
+      button.classList.add('is-returning');
+      button.style.transform = '';
+    });
+
+    button.addEventListener('transitionend', (event) => {
+      if (event.propertyName === 'transform') button.classList.remove('is-returning');
+    });
+  }
+}
+
+function setupCounters(): void {
+  const counters = Array.from(document.querySelectorAll<HTMLElement>('[data-count]'));
+  if (counters.length === 0 || reduceMotion.matches || !('IntersectionObserver' in window)) return;
+
+  const format = new Intl.NumberFormat('en-US');
+
+  const run = (el: HTMLElement) => {
+    const target = Number(el.dataset.count);
+    if (!Number.isFinite(target)) return;
+    const suffix = el.dataset.suffix ?? '';
+    const duration = 1400;
+    const start = performance.now();
+
+    const tick = (now: number) => {
+      const progress = Math.min(1, (now - start) / duration);
+      const eased = progress === 1 ? 1 : 1 - Math.pow(2, -10 * progress);
+      el.textContent = format.format(Math.round(target * eased)) + suffix;
+      if (progress < 1) window.requestAnimationFrame(tick);
+    };
+
+    window.requestAnimationFrame(tick);
+  };
+
+  const observer = new IntersectionObserver(
+    (entries) => {
+      for (const entry of entries) {
+        if (!entry.isIntersecting) continue;
+        observer.unobserve(entry.target);
+        run(entry.target as HTMLElement);
+      }
+    },
+    { threshold: 0.4 },
+  );
+
+  counters.forEach((el) => observer.observe(el));
+}
+
+/** Measures the on-screen length of a non-scaling-stroke path so dash offsets match. */
+function screenLength(path: SVGPathElement): number {
+  const userLength = path.getTotalLength();
+  const matrix = path.getScreenCTM();
+  if (!matrix || userLength === 0) return userLength;
+  const samples = 120;
+  let total = 0;
+  let previous = path.getPointAtLength(0).matrixTransform(matrix);
+  for (let i = 1; i <= samples; i += 1) {
+    const point = path.getPointAtLength((userLength * i) / samples).matrixTransform(matrix);
+    total += Math.hypot(point.x - previous.x, point.y - previous.y);
+    previous = point;
+  }
+  return total;
+}
+
+function setupSignalMap(): void {
+  const map = document.querySelector<HTMLElement>('.signal-map');
+  if (!map) return;
+  const paths = Array.from(map.querySelectorAll<SVGPathElement>('.signal-line, .signal-glow'));
+  const canDraw =
+    paths.length > 0 &&
+    !reduceMotion.matches &&
+    'IntersectionObserver' in window &&
+    typeof paths[0].getTotalLength === 'function';
+
+  if (!canDraw) {
+    map.classList.add('is-drawn');
+    return;
+  }
+
+  const prime = () => {
+    for (const path of paths) {
+      const length = Math.ceil(screenLength(path)) + 2;
+      path.style.strokeDasharray = `${length}`;
+      path.style.strokeDashoffset = `${length}`;
+    }
+    map.classList.add('is-primed');
+  };
+  prime();
+
+  const observer = new IntersectionObserver(
+    (entries) => {
+      if (!entries.some((entry) => entry.isIntersecting)) return;
+      observer.disconnect();
+      // Re-measure right before drawing in case the layout changed since priming.
+      prime();
+      window.requestAnimationFrame(() => {
+        map.classList.add('is-drawn');
+        for (const path of paths) path.style.strokeDashoffset = '0';
+      });
+      window.setTimeout(() => {
+        for (const path of paths) {
+          path.style.strokeDasharray = '';
+          path.style.strokeDashoffset = '';
+        }
+      }, 2600);
+    },
+    { threshold: 0.35 },
+  );
+  observer.observe(map);
+}
+
+export function initMotion(): void {
+  setupReveal();
+  setupMasthead();
+  setupPointerHighlight();
+  setupMagneticButtons();
+  setupCounters();
+  setupSignalMap();
+}
diff --git a/src/scripts/signal-board.ts b/src/scripts/signal-board.ts
new file mode 100644
index 0000000..0feccd9
--- /dev/null
+++ b/src/scripts/signal-board.ts
@@ -0,0 +1,458 @@
+/**
+ * Signal board — the hero centerpiece.
+ *
+ * A procedurally routed board of PCB-like traces with teal pulses travelling
+ * along them, junction pads that flash as pulses pass, and a pointer spotlight
+ * that tints nearby traces. Purely decorative: the host is aria-hidden, the
+ * loop pauses off-screen and when the tab is hidden, and reduced-motion users
+ * get a single static frame.
+ */
+
+type Point = { x: number; y: number };
+
+type Trace = {
+  points: Point[];
+  cumulative: number[];
+  total: number;
+  nodes: number[];
+};
+
+type BoardNode = { x: number; y: number; at: number; pad: boolean };
+
+type Pulse = { trace: number; head: number; speed: number; length: number; bronze: boolean };
+
+const TEAL = '104, 219, 195';
+const PAPER = '226, 229, 218';
+const BRONZE = '192, 139, 84';
+const TAU = Math.PI * 2;
+
+const DIRECTIONS: Point[] = [
+  { x: 1, y: 0 },
+  { x: 1, y: 1 },
+  { x: 0, y: 1 },
+  { x: -1, y: 1 },
+  { x: -1, y: 0 },
+  { x: -1, y: -1 },
+  { x: 0, y: -1 },
+  { x: 1, y: -1 },
+];
+
+function mulberry32(seed: number): () => number {
+  let state = seed >>> 0;
+  return () => {
+    state = (state + 0x6d2b79f5) >>> 0;
+    let t = state;
+    t = Math.imul(t ^ (t >>> 15), t | 1);
+    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+  };
+}
+
+function buildBoard(
+  width: number,
+  height: number,
+  cell: number,
+  traceCount: number,
+  random: () => number,
+): { traces: Trace[]; nodes: BoardNode[] } {
+  const cols = Math.ceil(width / cell) + 2;
+  const rows = Math.ceil(height / cell) + 2;
+  const occupied = new Set<number>();
+  const key = (gx: number, gy: number) => (gy + 2) * 8192 + (gx + 2);
+  const traces: Trace[] = [];
+  const nodes: BoardNode[] = [];
+
+  let attempts = 0;
+  while (traces.length < traceCount && attempts < traceCount * 8) {
+    attempts += 1;
+    let gx = Math.floor(random() * cols) - 1;
+    let gy = Math.floor(random() * rows) - 1;
+    if (occupied.has(key(gx, gy))) continue;
+
+    let direction = [0, 2, 4, 6][Math.floor(random() * 4)];
+    const gridPoints: Point[] = [{ x: gx, y: gy }];
+    const cells = [key(gx, gy)];
+    const steps = 8 + Math.floor(random() * 20);
+    let run = 0;
+    let runTarget = 2 + Math.floor(random() * 6);
+
+    for (let step = 0; step < steps; step += 1) {
+      if (run >= runTarget) {
+        const turn = random() < 0.5 ? 1 : -1;
+        direction = (direction + turn + 8) % 8;
+        run = 0;
+        runTarget = direction % 2 === 1 ? 1 + Math.floor(random() * 3) : 2 + Math.floor(random() * 6);
+        gridPoints.push({ x: gx, y: gy });
+      }
+      const d = DIRECTIONS[direction];
+      const nx = gx + d.x;
+      const ny = gy + d.y;
+      if (nx < -1 || ny < -1 || nx > cols || ny > rows || occupied.has(key(nx, ny))) break;
+      gx = nx;
+      gy = ny;
+      run += 1;
+      cells.push(key(gx, gy));
+    }
+
+    if (cells.length < 5) continue;
+    const last = gridPoints[gridPoints.length - 1];
+    if (last.x !== gx || last.y !== gy) gridPoints.push({ x: gx, y: gy });
+    if (gridPoints.length < 2) continue;
+    for (const c of cells) occupied.add(c);
+
+    const points = gridPoints.map((p) => ({ x: p.x * cell + cell / 2, y: p.y * cell + cell / 2 }));
+    const cumulative = [0];
+    for (let i = 1; i < points.length; i += 1) {
+      cumulative.push(cumulative[i - 1] + Math.hypot(points[i].x - points[i - 1].x, points[i].y - points[i - 1].y));
+    }
+    const total = cumulative[cumulative.length - 1];
+    const traceNodes: number[] = [];
+    points.forEach((p, i) => {
+      const pad = i === 0 || i === points.length - 1;
+      if (!pad && random() > 0.55) return;
+      traceNodes.push(nodes.length);
+      nodes.push({ x: p.x, y: p.y, at: cumulative[i], pad });
+    });
+    traces.push({ points, cumulative, total, nodes: traceNodes });
+  }
+
+  return { traces, nodes };
+}
+
+function pointAt(trace: Trace, distance: number): Point {
+  const { points, cumulative } = trace;
+  if (distance <= 0) return points[0];
+  if (distance >= trace.total) return points[points.length - 1];
+  let i = 1;
+  while (cumulative[i] < distance) i += 1;
+  const segment = cumulative[i] - cumulative[i - 1];
+  const t = segment > 0 ? (distance - cumulative[i - 1]) / segment : 0;
+  return {
+    x: points[i - 1].x + (points[i].x - points[i - 1].x) * t,
+    y: points[i - 1].y + (points[i].y - points[i - 1].y) * t,
+  };
+}
+
+function tracePath(ctx: CanvasRenderingContext2D, trace: Trace, from: number, to: number): void {
+  const start = pointAt(trace, from);
+  const end = pointAt(trace, to);
+  ctx.moveTo(start.x, start.y);
+  for (let i = 1; i < trace.points.length - 1; i += 1) {
+    const at = trace.cumulative[i];
+    if (at > from && at < to) ctx.lineTo(trace.points[i].x, trace.points[i].y);
+  }
+  ctx.lineTo(end.x, end.y);
+}
+
+function makeLayer(width: number, height: number, dpr: number): CanvasRenderingContext2D | null {
+  const canvas = document.createElement('canvas');
+  canvas.width = Math.max(1, Math.round(width * dpr));
+  canvas.height = Math.max(1, Math.round(height * dpr));
+  const ctx = canvas.getContext('2d');
+  if (!ctx) return null;
+  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+  return ctx;
+}
+
+function paintTraces(
+  ctx: CanvasRenderingContext2D,
+  traces: Trace[],
+  nodes: BoardNode[],
+  color: string,
+  lineAlpha: number,
+  padAlpha: number,
+): void {
+  ctx.lineWidth = 1;
+  ctx.lineJoin = 'round';
+  ctx.lineCap = 'round';
+  ctx.strokeStyle = `rgba(${color}, ${lineAlpha})`;
+  ctx.beginPath();
+  for (const trace of traces) {
+    ctx.moveTo(trace.points[0].x, trace.points[0].y);
+    for (let i = 1; i < trace.points.length; i += 1) ctx.lineTo(trace.points[i].x, trace.points[i].y);
+  }
+  ctx.stroke();
+
+  for (const node of nodes) {
+    if (node.pad) {
+      ctx.fillStyle = `rgba(${color}, ${padAlpha})`;
+      ctx.fillRect(node.x - 2.5, node.y - 2.5, 5, 5);
+      ctx.fillStyle = 'rgb(13, 20, 18)';
+      ctx.fillRect(node.x - 1, node.y - 1, 2, 2);
+    } else {
+      ctx.fillStyle = `rgba(${color}, ${padAlpha * 0.8})`;
+      ctx.beginPath();
+      ctx.arc(node.x, node.y, 1.5, 0, TAU);
+      ctx.fill();
+    }
+  }
+}
+
+export function mountSignalBoard(host: HTMLElement): void {
+  try {
+    boot(host);
+  } catch {
+    // Decorative only — never let the board break the page.
+  }
+}
+
+function boot(host: HTMLElement): void {
+  const canvas = document.createElement('canvas');
+  const ctx = canvas.getContext('2d');
+  if (!ctx) return;
+  host.appendChild(canvas);
+
+  const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+  const finePointer = window.matchMedia('(hover: hover) and (pointer: fine)').matches;
+  const compact = window.matchMedia('(max-width: 760px)').matches;
+  const random = mulberry32(20260901);
+
+  let width = 0;
+  let height = 0;
+  let dpr = 1;
+  let traces: Trace[] = [];
+  let nodes: BoardNode[] = [];
+  let pulses: Pulse[] = [];
+  let lit = new Float32Array(0);
+  let spark = new Float32Array(0);
+  let staticLayer: CanvasRenderingContext2D | null = null;
+  let brightLayer: CanvasRenderingContext2D | null = null;
+  let litLayer: CanvasRenderingContext2D | null = null;
+  let sparkTimer = 1.5;
+
+  const pointer = { x: 0, y: 0, strength: 0, target: 0 };
+  let frameId = 0;
+  let running = false;
+  let inView = true;
+  let lastTime = 0;
+
+  const spawn = (pulse: Pulse, fresh: boolean) => {
+    pulse.trace = Math.floor(random() * traces.length);
+    const trace = traces[pulse.trace];
+    pulse.length = 36 + random() * 70;
+    pulse.speed = 55 + random() * 95;
+    pulse.bronze = random() < 0.08;
+    pulse.head = fresh ? random() * (trace.total + pulse.length) : -random() * 240;
+  };
+
+  const build = () => {
+    width = host.clientWidth;
+    height = host.clientHeight;
+    if (width < 10 || height < 10) return false;
+    dpr = Math.min(window.devicePixelRatio || 1, compact ? 1 : 1.5, 2600 / width);
+    canvas.width = Math.round(width * dpr);
+    canvas.height = Math.round(height * dpr);
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+
+    const cell = compact ? 22 : 26;
+    const traceCount = Math.max(18, Math.min(64, Math.round((width * height) / 24000)));
+    const board = buildBoard(width, height, cell, traceCount, random);
+    traces = board.traces;
+    nodes = board.nodes;
+    if (traces.length === 0) return false;
+    lit = new Float32Array(nodes.length);
+    spark = new Float32Array(nodes.length);
+
+    staticLayer = makeLayer(width, height, dpr);
+    if (staticLayer) paintTraces(staticLayer, traces, nodes, PAPER, 0.13, 0.3);
+    if (finePointer && !reduceMotion) {
+      brightLayer = makeLayer(width, height, dpr);
+      if (brightLayer) paintTraces(brightLayer, traces, nodes, TEAL, 0.5, 0.85);
+      litLayer = makeLayer(width, height, dpr);
+    }
+
+    const pulseCount = Math.round(traces.length * (compact ? 0.75 : 1.15));
+    pulses = Array.from({ length: pulseCount }, () => {
+      const pulse: Pulse = { trace: 0, head: 0, speed: 0, length: 0, bronze: false };
+      spawn(pulse, true);
+      return pulse;
+    });
+    return true;
+  };
+
+  const drawPulse = (pulse: Pulse, trace: Trace) => {
+    const color = pulse.bronze ? BRONZE : TEAL;
+    const chunks = 4;
+    const tail = pulse.head - pulse.length;
+    ctx.lineCap = 'round';
+    ctx.lineJoin = 'round';
+    for (let k = 0; k < chunks; k += 1) {
+      const a = Math.max(0, tail + (pulse.length * k) / chunks);
+      const b = Math.min(trace.total, tail + (pulse.length * (k + 1)) / chunks);
+      if (b <= a) continue;
+      const alpha = 0.1 + 0.9 * ((k + 1) / chunks);
+      ctx.beginPath();
+      tracePath(ctx, trace, a, b);
+      ctx.strokeStyle = `rgba(${color}, ${(alpha * 0.16).toFixed(3)})`;
+      ctx.lineWidth = 5;
+      ctx.stroke();
+      ctx.strokeStyle = `rgba(${color}, ${alpha.toFixed(3)})`;
+      ctx.lineWidth = 1.4;
+      ctx.stroke();
+    }
+    if (pulse.head >= 0 && pulse.head <= trace.total) {
+      const head = pointAt(trace, pulse.head);
+      ctx.fillStyle = pulse.bronze ? '#f2cf9f' : '#dffff6';
+      ctx.fillRect(head.x - 1.5, head.y - 1.5, 3, 3);
+    }
+  };
+
+  const drawNodes = (dt: number) => {
+    const decay = Math.pow(0.1, dt);
+    const sparkDecay = Math.pow(0.03, dt);
+    for (let n = 0; n < nodes.length; n += 1) {
+      const node = nodes[n];
+      if (lit[n] > 0.02) {
+        const a = lit[n];
+        ctx.fillStyle = `rgba(${TEAL}, ${(a * 0.22).toFixed(3)})`;
+        ctx.beginPath();
+        ctx.arc(node.x, node.y, 7, 0, TAU);
+        ctx.fill();
+        ctx.fillStyle = `rgba(${TEAL}, ${a.toFixed(3)})`;
+        ctx.beginPath();
+        ctx.arc(node.x, node.y, 2.2, 0, TAU);
+        ctx.fill();
+        lit[n] = a * decay;
+      }
+      if (spark[n] > 0.02) {
+        const a = spark[n];
+        ctx.fillStyle = `rgba(${BRONZE}, ${(a * 0.3).toFixed(3)})`;
+        ctx.beginPath();
+        ctx.arc(node.x, node.y, 9, 0, TAU);
+        ctx.fill();
+        ctx.fillStyle = `rgba(${BRONZE}, ${a.toFixed(3)})`;
+        ctx.fillRect(node.x - 2, node.y - 2, 4, 4);
+        spark[n] = a * sparkDecay;
+      }
+    }
+  };
+
+  const drawSpotlight = () => {
+    if (!brightLayer || !litLayer || pointer.strength < 0.01) return;
+    const layer = litLayer;
+    layer.globalCompositeOperation = 'source-over';
+    layer.clearRect(0, 0, width, height);
+    layer.drawImage(brightLayer.canvas, 0, 0, width, height);
+    layer.globalCompositeOperation = 'destination-in';
+    const gradient = layer.createRadialGradient(pointer.x, pointer.y, 0, pointer.x, pointer.y, 300);
+    gradient.addColorStop(0, 'rgba(0, 0, 0, 1)');
+    gradient.addColorStop(0.45, 'rgba(0, 0, 0, 0.55)');
+    gradient.addColorStop(1, 'rgba(0, 0, 0, 0)');
+    layer.fillStyle = gradient;
+    layer.fillRect(0, 0, width, height);
+    ctx.globalAlpha = pointer.strength * 0.9;
+    ctx.drawImage(layer.canvas, 0, 0, width, height);
+    ctx.globalAlpha = 1;
+  };
+
+  const renderFrame = (dt: number) => {
+    ctx.clearRect(0, 0, width, height);
+    if (staticLayer) ctx.drawImage(staticLayer.canvas, 0, 0, width, height);
+    drawSpotlight();
+
+    for (const pulse of pulses) {
+      pulse.head += pulse.speed * dt;
+      const trace = traces[pulse.trace];
+      if (pulse.head - pulse.length > trace.total) {
+        spawn(pulse, false);
+        continue;
+      }
+      drawPulse(pulse, trace);
+      const reach = pulse.speed * dt + 3;
+      for (const n of trace.nodes) {
+        if (Math.abs(nodes[n].at - pulse.head) < reach) lit[n] = 1;
+      }
+    }
+
+    sparkTimer -= dt;
+    if (sparkTimer <= 0 && nodes.length > 0) {
+      sparkTimer = 1.2 + random() * 2.2;
+      spark[Math.floor(random() * nodes.length)] = 1;
+    }
+    drawNodes(dt);
+  };
+
+  const frame = (now: number) => {
+    if (!running) return;
+    const dt = lastTime ? Math.min(0.05, (now - lastTime) / 1000) : 0.016;
+    lastTime = now;
+    pointer.strength += (pointer.target - pointer.strength) * Math.min(1, dt * 5);
+    renderFrame(dt);
+    frameId = window.requestAnimationFrame(frame);
+  };
+
+  const start = () => {
+    if (running || reduceMotion) return;
+    running = true;
+    lastTime = 0;
+    frameId = window.requestAnimationFrame(frame);
+  };
+
+  const stop = () => {
+    running = false;
+    if (frameId) window.cancelAnimationFrame(frameId);
+    frameId = 0;
+  };
+
+  const sync = () => {
+    if (inView && !document.hidden) start();
+    else stop();
+  };
+
+  const renderStatic = () => {
+    // One considered frame: traces, a handful of frozen pulses, a few lit pads.
+    for (let i = 0; i < 6; i += 1) renderFrame(0.016);
+    for (let i = 0; i < Math.min(8, nodes.length); i += 1) lit[Math.floor(random() * nodes.length)] = 0.8;
+    renderFrame(0.016);
+  };
+
+  if (!build()) return;
+
+  if (reduceMotion) {
+    renderStatic();
+  } else {
+    if ('IntersectionObserver' in window) {
+      const observer = new IntersectionObserver(
+        (entries) => {
+          inView = entries.some((entry) => entry.isIntersecting);
+          sync();
+        },
+        { threshold: 0 },
+      );
+      observer.observe(host);
+    }
+    document.addEventListener('visibilitychange', sync);
+    sync();
+
+    if (finePointer) {
+      window.addEventListener(
+        'pointermove',
+        (event) => {
+          const rect = host.getBoundingClientRect();
+          pointer.x = event.clientX - rect.left;
+          pointer.y = event.clientY - rect.top;
+          pointer.target = pointer.y >= 0 && pointer.y <= rect.height ? 1 : 0;
+        },
+        { passive: true },
+      );
+      document.documentElement.addEventListener('pointerleave', () => {
+        pointer.target = 0;
+      });
+    }
+  }
+
+  if ('ResizeObserver' in window) {
+    let resizeTimer = 0;
+    const observer = new ResizeObserver(() => {
+      if (host.clientWidth === width && host.clientHeight === height) return;
+      window.clearTimeout(resizeTimer);
+      resizeTimer = window.setTimeout(() => {
+        if (build()) {
+          if (reduceMotion) renderStatic();
+          else renderFrame(0);
+        }
+      }, 150);
+    });
+    observer.observe(host);
+  }
+}

From 7798401b30bf6b68c745eb97db9c3b6eb5347494 Mon Sep 17 00:00:00 2001
From: felirami <felirami@users.noreply.github.com>
Date: Tue, 1 Sep 2026 23:11:59 -0400
Subject: [PATCH 2/4] Redesign homepage with choreographed motion and public
 metrics

Hero: masked line-rise headline with a mint gradient on the second line,
staged entrance for eyebrow, lede, buttons and index cells, and the signal
board layered behind the copy. Masthead condenses on scroll with backdrop
blur, a scroll-progress hairline, animated nav underlines and a Deck link.

Sections: scroll reveals with staggered children; a six-column work grid
(two featured plus three) with product marks and status pills on every card;
pointer-follow highlight and border glow on cards; the operating-model map
draws itself with sequenced nodes and a travelling packet; unique sigils and
live dots for the five operators; a metrics strip above the proof tiles using
the figures already published in the deck; a monogram and pill links on the
founder card; a deck call to action in the contact section; an outlined ARCA
watermark in the footer.

Replace the blanket reduced-motion reset with a policy: transforms, blur,
delays, counters and the packet are dropped while short opacity fades stay.
---
 public/styles.css     | 782 ++++++++++++++++++++++++++++++++++++++++--
 src/pages/index.astro | 130 +++++--
 2 files changed, 850 insertions(+), 62 deletions(-)

diff --git a/public/styles.css b/public/styles.css
index bf1597e..dad53ab 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -1,5 +1,3 @@
-@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=Manrope:wght@400;500;600&display=swap");
-
 :root {
   color-scheme: dark;
   --ink: #0d1412;
@@ -11,12 +9,19 @@
   --line: rgba(226, 229, 218, 0.17);
   --line-strong: rgba(226, 229, 218, 0.3);
   --signal: #68dbc3;
+  --signal-rgb: 104, 219, 195;
   --signal-soft: rgba(104, 219, 195, 0.12);
   --bronze: #c08b54;
+  --bronze-rgb: 192, 139, 84;
   --bronze-soft: rgba(192, 139, 84, 0.12);
   --mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
   --sans: Manrope, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   --content: 1180px;
+  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
+  --t-micro: 180ms;
+  --t-reveal: 800ms;
 }
 
 * {
@@ -30,6 +35,7 @@ html {
 }
 
 body {
+  position: relative;
   margin: 0;
   min-width: 320px;
   min-height: 100vh;
@@ -59,6 +65,30 @@ body {
   background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.14'/%3E%3C/svg%3E");
 }
 
+/* Hero centerpiece: decorative canvas layer behind the hero. */
+.signal-board {
+  position: absolute;
+  inset: 0 0 auto;
+  z-index: 0;
+  height: min(100vh, 920px);
+  overflow: hidden;
+  pointer-events: none;
+  -webkit-mask-image:
+    linear-gradient(90deg, rgba(0, 0, 0, 0.16) 0%, rgba(0, 0, 0, 0.4) 34%, #000 60%),
+    linear-gradient(180deg, #000 58%, transparent 100%);
+  -webkit-mask-composite: source-in;
+  mask-image:
+    linear-gradient(90deg, rgba(0, 0, 0, 0.16) 0%, rgba(0, 0, 0, 0.4) 34%, #000 60%),
+    linear-gradient(180deg, #000 58%, transparent 100%);
+  mask-composite: intersect;
+}
+
+.signal-board canvas {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
 .skip-link {
   position: fixed;
   top: 12px;
@@ -95,6 +125,13 @@ footer {
   margin-inline: auto;
 }
 
+main {
+  position: relative;
+  z-index: 1;
+  overflow-x: clip;
+  overflow-clip-margin: 12px;
+}
+
 .masthead {
   position: sticky;
   top: 0;
@@ -109,6 +146,32 @@ footer {
   font: 400 11px/1 var(--mono);
   letter-spacing: 0.09em;
   text-transform: uppercase;
+  transition:
+    top 0.45s var(--ease-out),
+    padding-top 0.45s var(--ease-out),
+    background 0.45s var(--ease-out);
+}
+
+.masthead::after {
+  position: absolute;
+  right: 0;
+  bottom: -1px;
+  left: 0;
+  height: 1px;
+  content: "";
+  background: var(--signal);
+  transform: scaleX(var(--progress, 0));
+  transform-origin: left;
+}
+
+@media (min-width: 761px) {
+  .masthead.is-condensed {
+    top: -28px;
+    padding-top: 28px;
+    background: rgba(13, 20, 18, 0.8);
+    -webkit-backdrop-filter: blur(14px) saturate(1.3);
+    backdrop-filter: blur(14px) saturate(1.3);
+  }
 }
 
 .wordmark {
@@ -127,6 +190,12 @@ footer {
   height: 32px;
   border: 1px solid var(--bronze);
   color: var(--paper);
+  transition: border-color 0.3s var(--ease-out), background 0.3s var(--ease-out);
+}
+
+.wordmark:hover .mark {
+  border-color: var(--signal);
+  background: var(--signal-soft);
 }
 
 .mark svg {
@@ -154,15 +223,36 @@ footer {
 }
 
 .masthead nav a {
+  position: relative;
+  padding: 6px 0;
   color: var(--muted);
   text-decoration: none;
-  transition: color 140ms ease;
+  transition: color var(--t-micro) ease;
 }
 
-.masthead nav a:hover {
+.masthead nav a::after {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  height: 1px;
+  content: "";
+  background: var(--signal);
+  transform: scaleX(0);
+  transform-origin: left;
+  transition: transform 0.3s var(--ease-out);
+}
+
+.masthead nav a:hover,
+.masthead nav a[aria-current="true"] {
   color: var(--paper-strong);
 }
 
+.masthead nav a:hover::after,
+.masthead nav a[aria-current="true"]::after {
+  transform: scaleX(1);
+}
+
 .status {
   display: flex;
   align-items: center;
@@ -184,6 +274,7 @@ main:focus {
 }
 
 .hero {
+  position: relative;
   min-height: calc(100vh - 92px);
   display: flex;
   flex-direction: column;
@@ -229,6 +320,30 @@ h1 {
   letter-spacing: -0.075em;
 }
 
+h1 .line {
+  display: block;
+  overflow: hidden;
+  padding: 0.08em 0 0.16em;
+  margin: -0.08em 0 -0.16em;
+}
+
+h1 .line > span {
+  display: block;
+}
+
+h1 .line-2 > span {
+  background: linear-gradient(90deg, var(--paper-strong) 48%, #c2efe0 100%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  -webkit-text-fill-color: transparent;
+}
+
+h1 .line-2 > span::selection {
+  color: var(--ink-deep);
+  -webkit-text-fill-color: var(--ink-deep);
+}
+
 .lede {
   margin: 0;
   padding-bottom: 8px;
@@ -257,7 +372,25 @@ h1 {
   letter-spacing: 0.05em;
   text-decoration: none;
   text-transform: uppercase;
-  transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
+  transition:
+    border-color var(--t-micro) ease,
+    background var(--t-micro) ease,
+    color var(--t-micro) ease,
+    transform 0.4s var(--ease-out);
+}
+
+.button.is-returning {
+  transition-duration: var(--t-micro), var(--t-micro), var(--t-micro), 0.6s;
+  transition-timing-function: ease, ease, ease, var(--ease-spring);
+}
+
+.button span {
+  display: inline-block;
+  transition: transform 0.25s var(--ease-out);
+}
+
+.button:hover span {
+  transform: translate(2px, -2px);
 }
 
 .button-primary {
@@ -293,6 +426,11 @@ h1 {
   gap: 18px;
   padding: 22px 20px;
   border-left: 1px solid var(--line);
+  transition: background 0.3s var(--ease-out);
+}
+
+.hero-index div:hover {
+  background: rgba(13, 20, 18, 0.5);
 }
 
 .hero-index div:last-child {
@@ -363,6 +501,11 @@ h1 {
   min-height: 278px;
   padding: 32px 30px;
   border-left: 1px solid var(--line);
+  transition: background 0.35s var(--ease-out);
+}
+
+.principles article:hover {
+  background: rgba(13, 20, 18, 0.5);
 }
 
 .principles article:last-child {
@@ -376,6 +519,23 @@ h1 {
   font: 400 10px/1 var(--mono);
 }
 
+.principles span::after {
+  display: block;
+  width: 26px;
+  height: 1px;
+  margin-top: 12px;
+  content: "";
+  background: var(--bronze);
+  transform: scaleX(0);
+  transform-origin: left;
+  transition: transform 0.9s var(--ease-out) 0.35s;
+}
+
+.principles article.is-in span::after,
+html:not(.js) .principles span::after {
+  transform: none;
+}
+
 .principles h3 {
   margin: 78px 0 14px;
   color: var(--paper-strong);
@@ -392,12 +552,13 @@ h1 {
 
 .work-grid {
   display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+  grid-template-columns: repeat(6, minmax(0, 1fr));
   border-top: 1px solid var(--line);
   border-left: 1px solid var(--line);
 }
 
 .work-card {
+  grid-column: span 2;
   min-height: 390px;
   display: flex;
   flex-direction: column;
@@ -405,16 +566,15 @@ h1 {
   border-right: 1px solid var(--line);
   border-bottom: 1px solid var(--line);
   background: rgba(13, 20, 18, 0.42);
+  transition: background 0.35s var(--ease-out);
 }
 
-@media (min-width: 761px) {
-  .work-card:last-child:nth-child(odd) {
-    grid-column: 1 / -1;
-    min-height: 320px;
-  }
+.work-card:hover {
+  background: rgba(17, 27, 24, 0.72);
 }
 
 .work-card-featured {
+  grid-column: span 3;
   min-height: 480px;
   border-top: 2px solid var(--bronze);
   background:
@@ -422,6 +582,12 @@ h1 {
     rgba(13, 20, 18, 0.58);
 }
 
+.work-card-featured:hover {
+  background:
+    linear-gradient(135deg, var(--bronze-soft), transparent 46%),
+    rgba(17, 27, 24, 0.78);
+}
+
 .card-topline {
   display: flex;
   justify-content: space-between;
@@ -436,6 +602,32 @@ h1 {
   text-align: right;
 }
 
+.status-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  white-space: nowrap;
+}
+
+.status-pill::before {
+  width: 5px;
+  height: 5px;
+  flex: none;
+  border-radius: 999px;
+  content: "";
+  background: var(--paper);
+}
+
+.status-pill[data-state="live"]::before {
+  background: var(--signal);
+  box-shadow: 0 0 10px var(--signal);
+}
+
+.status-pill[data-state="beta"]::before {
+  background: var(--bronze);
+  box-shadow: 0 0 8px rgba(192, 139, 84, 0.6);
+}
+
 .work-mark {
   width: 70px;
   height: 70px;
@@ -450,6 +642,13 @@ h1 {
   background-size: 14px 14px;
   font: 400 17px/1 var(--mono);
   letter-spacing: 0.04em;
+  transition: border-color 0.4s var(--ease-out), background-position 0.9s var(--ease-out), box-shadow 0.4s var(--ease-out);
+}
+
+.work-card:hover .work-mark {
+  border-color: rgba(104, 219, 195, 0.6);
+  background-position: 7px 7px, 7px 7px;
+  box-shadow: 0 0 0 1px rgba(104, 219, 195, 0.12), 0 0 28px rgba(104, 219, 195, 0.12);
 }
 
 .work-card h3 {
@@ -484,21 +683,57 @@ h1 {
   font: 400 9px/1 var(--mono);
   letter-spacing: 0.08em;
   text-transform: uppercase;
+  transition: border-color 0.3s var(--ease-out), color 0.3s var(--ease-out);
+}
+
+.work-card:hover .tag-list li {
+  border-color: var(--line-strong);
+  color: var(--paper);
+}
+
+.card-link,
+.network-note a,
+.founder-links a {
+  text-decoration: none;
+  background:
+    linear-gradient(var(--signal), var(--signal)) no-repeat 0 100% / 0 1px,
+    linear-gradient(var(--bronze), var(--bronze)) no-repeat 0 100% / 100% 1px;
+  transition: background-size 0.45s var(--ease-out), color var(--t-micro) ease;
+}
+
+.card-link:hover,
+.network-note a:hover,
+.founder-links a:hover {
+  background-size: 100% 1px, 100% 1px;
 }
 
 .card-link {
   width: fit-content;
   margin-top: 32px;
+  padding-bottom: 4px;
   color: var(--paper);
   font: 400 11px/1.4 var(--mono);
   letter-spacing: 0.04em;
-  text-decoration-color: var(--bronze);
   text-transform: uppercase;
 }
 
 .card-link:hover {
   color: var(--signal);
-  text-decoration-color: var(--signal);
+}
+
+.card-link span,
+.network-note a span,
+.founder-links a span,
+.proof-grid i {
+  display: inline-block;
+  transition: transform 0.3s var(--ease-out);
+}
+
+.card-link:hover span,
+.network-note a:hover span,
+.founder-links a:hover span,
+.proof-grid a:hover i {
+  transform: translate(3px, -3px);
 }
 
 .signal-map {
@@ -531,6 +766,7 @@ h1 {
 .signal-line {
   fill: none;
   vector-effect: non-scaling-stroke;
+  transition: stroke-dashoffset 2.2s var(--ease-io);
 }
 
 .signal-glow {
@@ -549,6 +785,7 @@ h1 {
   stroke: var(--paper);
   stroke-width: 1.2;
   vector-effect: non-scaling-stroke;
+  transition: opacity 0.5s var(--ease-out);
 }
 
 .signal-map .signal-active {
@@ -556,6 +793,18 @@ h1 {
   stroke: var(--signal);
 }
 
+.signal-map .signal-packet {
+  fill: #dbfff5;
+  stroke: none;
+  transition: opacity 0.8s ease 2.3s;
+}
+
+.signal-map.is-drawn circle:nth-of-type(1) { transition-delay: 0.25s; }
+.signal-map.is-drawn circle:nth-of-type(2) { transition-delay: 0.7s; }
+.signal-map.is-drawn circle:nth-of-type(3) { transition-delay: 1.15s; }
+.signal-map.is-drawn circle:nth-of-type(4) { transition-delay: 1.6s; }
+.signal-map.is-drawn circle:nth-of-type(5) { transition-delay: 2.05s; }
+
 .signal-copy {
   position: absolute;
   z-index: 2;
@@ -566,8 +815,13 @@ h1 {
   background: var(--ink);
   font-family: var(--mono);
   text-transform: uppercase;
+  transition: opacity 0.7s var(--ease-out), translate 0.7s var(--ease-out);
 }
 
+.signal-map.is-drawn .signal-copy-start { transition-delay: 0.15s; }
+.signal-map.is-drawn .signal-copy-mid { transition-delay: 1.1s; }
+.signal-map.is-drawn .signal-copy-end { transition-delay: 2s; }
+
 .signal-copy span {
   color: var(--bronze);
   font-size: 9px;
@@ -599,6 +853,7 @@ h1 {
 }
 
 .process-grid {
+  position: relative;
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   margin: 0;
@@ -607,10 +862,33 @@ h1 {
   list-style: none;
 }
 
+.process-grid::before {
+  position: absolute;
+  top: -1px;
+  right: 0;
+  left: 0;
+  height: 1px;
+  content: "";
+  background: linear-gradient(90deg, var(--signal), var(--bronze));
+  transform: scaleX(0);
+  transform-origin: left;
+  transition: transform 1.6s var(--ease-io) 0.2s;
+}
+
+.process-grid.is-in::before,
+html:not(.js) .process-grid::before {
+  transform: none;
+}
+
 .process-grid li {
   min-height: 230px;
   padding: 30px 24px;
   border-left: 1px solid var(--line);
+  transition: background 0.35s var(--ease-out);
+}
+
+.process-grid li:hover {
+  background: rgba(13, 20, 18, 0.5);
 }
 
 .process-grid li:last-child {
@@ -644,16 +922,65 @@ h1 {
   border-right: 1px solid var(--line);
   border-bottom: 1px solid var(--line);
   background: rgba(13, 20, 18, 0.38);
+  transition: background 0.35s var(--ease-out);
+}
+
+.agent-grid article:hover {
+  background: rgba(17, 27, 24, 0.7);
+}
+
+.agent-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 12px;
 }
 
 .agent-code {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
   color: var(--bronze);
   font: 400 9px/1 var(--mono);
   letter-spacing: 0.08em;
 }
 
+.agent-code::before {
+  width: 5px;
+  height: 5px;
+  flex: none;
+  border-radius: 999px;
+  content: "";
+  background: var(--signal);
+  box-shadow: 0 0 8px var(--signal);
+}
+
+.sigil {
+  width: 28px;
+  height: 28px;
+  flex: none;
+  color: var(--paper);
+  overflow: visible;
+}
+
+.sigil path {
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  opacity: 0.7;
+  stroke-dasharray: 110;
+  stroke-dashoffset: 0;
+}
+
+.sigil circle {
+  fill: var(--signal);
+  transition: r 0.3s var(--ease-out);
+}
+
 .agent-grid h3 {
-  margin: 82px 0 7px;
+  margin: 74px 0 7px;
   color: var(--paper-strong);
   font-size: 27px;
   font-weight: 500;
@@ -690,9 +1017,61 @@ h1 {
 }
 
 .network-note a {
+  padding-bottom: 3px;
   color: var(--paper);
 }
 
+.network-note a:hover {
+  color: var(--signal);
+}
+
+.metrics-strip {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  border-top: 1px solid var(--line-strong);
+  border-left: 1px solid var(--line);
+}
+
+.metrics-strip > a {
+  min-height: 196px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: 22px;
+  padding: 26px 24px;
+  border-right: 1px solid var(--line);
+  border-bottom: 1px solid var(--line);
+  background: rgba(13, 20, 18, 0.42);
+  text-decoration: none;
+  transition: background 0.35s var(--ease-out);
+}
+
+.metrics-strip > a:hover {
+  background: rgba(17, 27, 24, 0.72);
+}
+
+.metrics-strip strong {
+  color: var(--signal);
+  font: 400 clamp(44px, 5vw, 72px)/1 var(--mono);
+  font-variant-numeric: tabular-nums;
+  letter-spacing: -0.06em;
+}
+
+.metrics-strip span {
+  max-width: 260px;
+  color: var(--muted);
+  font-size: 12px;
+  line-height: 1.6;
+}
+
+.as-of {
+  margin: 18px 0 44px;
+  color: var(--muted);
+  font: 400 10px/1.6 var(--mono);
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
 .proof-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -711,7 +1090,7 @@ h1 {
   border-right: 1px solid var(--line);
   border-bottom: 1px solid var(--line);
   text-decoration: none;
-  transition: background 140ms ease;
+  transition: background 0.35s var(--ease-out);
 }
 
 .proof-grid a:hover {
@@ -759,6 +1138,11 @@ h1 {
   padding: 17px 24px;
   border-right: 1px solid var(--line);
   border-bottom: 1px solid var(--line);
+  transition: background 0.3s var(--ease-out);
+}
+
+.company-ledger div:hover {
+  background: rgba(13, 20, 18, 0.5);
 }
 
 .company-ledger dt,
@@ -779,6 +1163,8 @@ h1 {
 }
 
 .founder-card {
+  --glow: var(--bronze-rgb);
+  position: relative;
   min-height: 432px;
   display: flex;
   flex-direction: column;
@@ -788,7 +1174,20 @@ h1 {
   background: var(--bronze-soft);
 }
 
+.monogram {
+  position: absolute;
+  top: 14px;
+  right: 22px;
+  color: transparent;
+  font: 500 clamp(96px, 11vw, 150px)/0.8 var(--sans);
+  letter-spacing: -0.08em;
+  -webkit-text-stroke: 1px rgba(192, 139, 84, 0.3);
+  pointer-events: none;
+  user-select: none;
+}
+
 .founder-card h3 {
+  position: relative;
   margin: auto 0 20px;
   color: var(--paper-strong);
   font-size: clamp(31px, 4vw, 48px);
@@ -798,6 +1197,7 @@ h1 {
 }
 
 .founder-card > p:not(.section-index) {
+  position: relative;
   margin: 0;
   color: var(--muted);
   font-size: 14px;
@@ -805,16 +1205,28 @@ h1 {
 }
 
 .founder-links {
+  position: relative;
   display: flex;
   flex-wrap: wrap;
-  gap: 18px;
+  gap: 10px;
   margin-top: 28px;
   font: 400 10px/1.4 var(--mono);
   text-transform: uppercase;
 }
 
 .founder-links a {
+  padding: 9px 12px;
+  border: 1px solid var(--line);
   color: var(--paper);
+  background-size: 0 0, 0 0;
+  transition: border-color 0.3s var(--ease-out), color 0.3s var(--ease-out), background 0.3s var(--ease-out);
+}
+
+.founder-links a:hover {
+  color: var(--paper-strong);
+  border-color: var(--signal);
+  background-color: var(--signal-soft);
+  background-size: 0 0, 0 0;
 }
 
 .contact-section {
@@ -829,27 +1241,63 @@ h1 {
   max-width: 830px;
 }
 
-.contact-link {
+.contact-actions {
   grid-column: 2;
-  width: fit-content;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 26px;
   margin-top: 36px;
+}
+
+.contact-link {
+  width: fit-content;
+  padding-bottom: 6px;
   color: var(--signal);
   font: 400 clamp(22px, 3.4vw, 42px)/1.2 var(--mono);
   letter-spacing: -0.04em;
-  text-decoration-color: var(--bronze);
+  text-decoration: none;
+  background:
+    linear-gradient(var(--signal), var(--signal)) no-repeat 0 100% / 0 2px,
+    linear-gradient(var(--bronze), var(--bronze)) no-repeat 0 100% / 100% 1px;
+  transition: background-size 0.5s var(--ease-out);
+}
+
+.contact-link:hover {
+  background-size: 100% 2px, 100% 1px;
 }
 
 footer {
+  position: relative;
   min-height: 180px;
   display: grid;
   grid-template-columns: 1fr minmax(280px, 0.85fr) auto auto;
   align-items: center;
   gap: 34px;
+  overflow: hidden;
   border-top: 1px solid var(--line);
   color: var(--muted);
   font: 400 10px/1.65 var(--mono);
 }
 
+.footer-mark {
+  position: absolute;
+  right: -0.04em;
+  bottom: -0.32em;
+  z-index: 0;
+  color: transparent;
+  font: 600 clamp(150px, 22vw, 300px)/1 var(--sans);
+  letter-spacing: -0.06em;
+  -webkit-text-stroke: 1px rgba(226, 229, 218, 0.08);
+  pointer-events: none;
+  user-select: none;
+}
+
+footer > :not(.footer-mark) {
+  position: relative;
+  z-index: 1;
+}
+
 footer div {
   display: flex;
   flex-direction: column;
@@ -869,10 +1317,96 @@ footer nav {
   gap: 16px;
 }
 
+footer nav a {
+  text-decoration: none;
+  background: linear-gradient(var(--signal), var(--signal)) no-repeat 0 100% / 0 1px;
+  transition: background-size 0.35s var(--ease-out), color var(--t-micro) ease;
+}
+
+footer nav a:hover {
+  background-size: 100% 1px;
+}
+
 footer a:hover {
   color: var(--signal);
 }
 
+/* Pointer-follow highlight and border glow on cards. */
+@media (hover: hover) and (pointer: fine) {
+  .work-card,
+  .proof-grid > a,
+  .agent-grid > article,
+  .founder-card,
+  .metrics-strip > a {
+    position: relative;
+    isolation: isolate;
+  }
+
+  .work-card::before,
+  .proof-grid > a::before,
+  .agent-grid > article::before,
+  .founder-card::before,
+  .metrics-strip > a::before {
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    content: "";
+    pointer-events: none;
+    opacity: 0;
+    background: radial-gradient(
+      380px circle at var(--mx, 50%) var(--my, 50%),
+      rgba(var(--glow, var(--signal-rgb)), 0.11),
+      transparent 62%
+    );
+    transition: opacity 0.4s var(--ease-out);
+  }
+
+  .work-card::after,
+  .proof-grid > a::after,
+  .agent-grid > article::after,
+  .founder-card::after,
+  .metrics-strip > a::after {
+    position: absolute;
+    inset: -1px;
+    z-index: 2;
+    padding: 1px;
+    content: "";
+    pointer-events: none;
+    opacity: 0;
+    background: radial-gradient(
+      320px circle at var(--mx, 50%) var(--my, 50%),
+      rgba(var(--glow, var(--signal-rgb)), 0.8),
+      transparent 60%
+    );
+    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+    -webkit-mask-composite: xor;
+    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+    mask-composite: exclude;
+    transition: opacity 0.4s var(--ease-out);
+  }
+
+  .work-card:hover::before,
+  .work-card:hover::after,
+  .proof-grid > a:hover::before,
+  .proof-grid > a:hover::after,
+  .agent-grid > article:hover::before,
+  .agent-grid > article:hover::after,
+  .founder-card:hover::before,
+  .founder-card:hover::after,
+  .metrics-strip > a:hover::before,
+  .metrics-strip > a:hover::after {
+    opacity: 1;
+  }
+
+  .agent-grid article:hover .sigil path {
+    animation: sigil-draw 1s var(--ease-out);
+  }
+
+  .agent-grid article:hover .sigil circle {
+    r: 2.4;
+  }
+}
+
 @media (max-width: 1080px) {
   .masthead {
     grid-template-columns: auto 1fr;
@@ -913,6 +1447,10 @@ footer a:hover {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
 
+  .metrics-strip {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
   .company-grid {
     grid-template-columns: 1fr;
   }
@@ -938,6 +1476,15 @@ footer a:hover {
     width: min(100% - 28px, var(--content));
   }
 
+  .signal-board {
+    height: min(100vh, 760px);
+    opacity: 0.6;
+    -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
+    -webkit-mask-composite: source-over;
+    mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
+    mask-composite: add;
+  }
+
   .masthead {
     position: relative;
     min-height: 126px;
@@ -946,6 +1493,10 @@ footer a:hover {
     padding: 18px 0 14px;
   }
 
+  .masthead::after {
+    display: none;
+  }
+
   .masthead nav {
     width: 100%;
     justify-content: flex-start;
@@ -964,6 +1515,7 @@ footer a:hover {
     min-height: 32px;
     display: inline-flex;
     align-items: center;
+    padding: 0;
   }
 
   .hero {
@@ -1050,6 +1602,7 @@ footer a:hover {
 
   .work-card,
   .work-card-featured {
+    grid-column: auto;
     min-height: 0;
     padding: 26px;
   }
@@ -1059,10 +1612,6 @@ footer a:hover {
   }
 
   .work-card h3 {
-    margin: 64px 0 14px;
-  }
-
-  .work-card-featured h3 {
     margin-top: 0;
   }
 
@@ -1102,7 +1651,7 @@ footer a:hover {
   }
 
   .agent-grid h3 {
-    margin-top: 44px;
+    margin-top: 40px;
   }
 
   .network-note {
@@ -1110,6 +1659,15 @@ footer a:hover {
     flex-direction: column;
   }
 
+  .metrics-strip > a {
+    min-height: 160px;
+    padding: 22px 18px;
+  }
+
+  .as-of {
+    margin-bottom: 36px;
+  }
+
   .proof-grid a {
     min-height: 170px;
     padding: 24px;
@@ -1125,13 +1683,23 @@ footer a:hover {
     padding: 26px;
   }
 
+  .monogram {
+    top: 10px;
+    right: 14px;
+    font-size: 96px;
+  }
+
   .contact-section {
     padding: 88px 0 94px;
   }
 
-  .contact-link {
+  .contact-actions {
     grid-column: 1;
     margin-top: 12px;
+    gap: 22px;
+  }
+
+  .contact-link {
     font-size: clamp(18px, 5.6vw, 26px);
     white-space: nowrap;
   }
@@ -1142,6 +1710,12 @@ footer a:hover {
     padding: 38px 0;
   }
 
+  .footer-mark {
+    right: -0.03em;
+    bottom: -0.3em;
+    font-size: 150px;
+  }
+
   footer nav a {
     min-height: 32px;
     display: inline-flex;
@@ -1182,22 +1756,155 @@ footer a:hover {
     display: none;
   }
 
+  .metrics-strip {
+    grid-template-columns: 1fr;
+  }
+
   .proof-grid a {
     grid-template-columns: 42px 1fr auto;
   }
 }
 
+/* Motion: entrance choreography, scroll reveals, and ambient animation. */
+@keyframes pulse {
+  50% {
+    opacity: 0.42;
+    filter: drop-shadow(0 0 2px var(--signal));
+  }
+}
+
+@keyframes fade-down {
+  from {
+    opacity: 0;
+    transform: translateY(-12px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+@keyframes fade-up {
+  from {
+    opacity: 0;
+    transform: translateY(16px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+@keyframes rise {
+  from {
+    transform: translateY(112%);
+  }
+  to {
+    transform: none;
+  }
+}
+
+@keyframes board-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes sigil-draw {
+  from {
+    stroke-dashoffset: 110;
+  }
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+
 @media (prefers-reduced-motion: no-preference) {
   .status i,
-  .signal-active {
+  .signal-active,
+  .status-pill[data-state="live"]::before,
+  .agent-code::before {
     animation: pulse 2.8s ease-in-out infinite;
   }
 
-  @keyframes pulse {
-    50% {
-      opacity: 0.42;
-      filter: drop-shadow(0 0 2px var(--signal));
-    }
+  .agent-grid article:nth-child(2) .agent-code::before { animation-delay: -0.6s; }
+  .agent-grid article:nth-child(3) .agent-code::before { animation-delay: -1.2s; }
+  .agent-grid article:nth-child(4) .agent-code::before { animation-delay: -1.8s; }
+  .agent-grid article:nth-child(5) .agent-code::before { animation-delay: -2.4s; }
+
+  /* Entrance choreography (only when the motion script can run). */
+  html.js .masthead {
+    animation: fade-down 0.8s var(--ease-out) backwards;
+  }
+
+  html.js .signal-board {
+    animation: board-in 2s var(--ease-out) 0.35s backwards;
+  }
+
+  html.js .hero .eyebrow {
+    animation: fade-up 0.7s var(--ease-out) 0.12s backwards;
+  }
+
+  html.js .hero h1 .line > span {
+    animation: rise 1s var(--ease-out) 0.2s backwards;
+  }
+
+  html.js .hero h1 .line-2 > span {
+    animation-delay: 0.3s;
+  }
+
+  html.js .lede {
+    animation: fade-up 0.8s var(--ease-out) 0.48s backwards;
+  }
+
+  html.js .hero-actions .button {
+    animation: fade-up 0.7s var(--ease-out) 0.6s backwards;
+  }
+
+  html.js .hero-actions .button + .button {
+    animation-delay: 0.68s;
+  }
+
+  html.js .hero-index > div {
+    animation: fade-up 0.8s var(--ease-out) backwards;
+    animation-delay: calc(0.75s + var(--i, 0) * 80ms);
+  }
+
+  html.js .hero-index > div:nth-child(2) { --i: 1; }
+  html.js .hero-index > div:nth-child(3) { --i: 2; }
+  html.js .hero-index > div:nth-child(4) { --i: 3; }
+
+  /* Scroll reveals. */
+  html.js [data-reveal]:not(.is-done),
+  html.js [data-reveal-stagger] > :not(.is-done) {
+    opacity: 0;
+    transform: translateY(26px);
+    filter: blur(5px);
+    transition:
+      opacity var(--t-reveal) var(--ease-out),
+      transform var(--t-reveal) var(--ease-out),
+      filter var(--t-reveal) var(--ease-out);
+    transition-delay: calc(var(--i, 0) * 70ms);
+  }
+
+  html.js [data-reveal].is-in:not(.is-done),
+  html.js [data-reveal-stagger] > .is-in:not(.is-done) {
+    opacity: 1;
+    transform: none;
+    filter: none;
+  }
+
+  /* Signal map: hidden until the line draws itself. */
+  html.js .signal-map:not(.is-drawn) circle {
+    opacity: 0;
+  }
+
+  html.js .signal-map:not(.is-drawn) .signal-copy {
+    opacity: 0;
+    translate: 0 8px;
   }
 }
 
@@ -1206,17 +1913,26 @@ footer a:hover {
     scroll-behavior: auto;
   }
 
+  .signal-map .signal-packet {
+    display: none;
+  }
+
+  .signal-board {
+    opacity: 0.7;
+  }
+
   *,
   *::before,
   *::after {
     scroll-behavior: auto !important;
-    transition-duration: 0.01ms !important;
+    transition-duration: 0.15s !important;
+    transition-delay: 0s !important;
     animation-duration: 0.01ms !important;
+    animation-delay: 0s !important;
     animation-iteration-count: 1 !important;
   }
 }
 
-
 .error-page {
   min-height: 100vh;
   display: grid;
diff --git a/src/pages/index.astro b/src/pages/index.astro
index c16818d..fce3368 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -5,6 +5,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
 <BaseLayout>
 <a class="skip-link" href="#content">Skip to content</a>
     <div class="grain" aria-hidden="true"></div>
+    <div class="signal-board" aria-hidden="true"></div>
 
     <header class="masthead">
       <a class="wordmark" href="#top" aria-label="Arca Computer home">
@@ -22,6 +23,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
         <a href="#model">Model</a>
         <a href="#network">Network</a>
         <a href="#company">Company</a>
+        <a href="/deck">Deck</a>
       </nav>
 
       <span class="status"><i aria-hidden="true"></i> Santiago · Incorporated 2026</span>
@@ -31,7 +33,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
       <section class="hero" id="top" aria-labelledby="hero-title">
         <div class="hero-copy">
           <p class="eyebrow">Arca Computer, Inc. / Santiago, Chile</p>
-          <h1 id="hero-title">The company<br />is the computer.</h1>
+          <h1 id="hero-title"><span class="line line-1"><span>The company</span></span> <span class="line line-2"><span>is the computer.</span></span></h1>
           <p class="lede">
             Arca is an AI-native product company. Humans set direction.
             Specialized agents research, build, verify, and operate software products.
@@ -63,7 +65,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
       </section>
 
       <section class="build-section" aria-labelledby="build-title">
-        <div class="section-heading">
+        <div class="section-heading" data-reveal>
           <p class="section-index">00 / Product company</p>
           <div>
             <h2 id="build-title">One vessel. Many kinds of work.</h2>
@@ -75,7 +77,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
           </div>
         </div>
 
-        <div class="principles">
+        <div class="principles" data-reveal-stagger>
           <article>
             <span>01</span>
             <h3>Products</h3>
@@ -98,7 +100,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
       </section>
 
       <section class="section" id="work" aria-labelledby="work-title">
-        <div class="section-heading">
+        <div class="section-heading" data-reveal>
           <p class="section-index">01 / Selected work</p>
           <div>
             <h2 id="work-title">Working software, not roadmap confetti.</h2>
@@ -109,11 +111,11 @@ import BaseLayout from '../layouts/BaseLayout.astro';
           </div>
         </div>
 
-        <div class="work-grid">
+        <div class="work-grid" data-reveal-stagger>
           <article class="work-card work-card-featured">
             <div class="card-topline">
               <span>Primary product</span>
-              <span>MIT licensed</span>
+              <span class="status-pill" data-state="open">MIT licensed</span>
             </div>
             <div class="work-mark" aria-hidden="true">CF</div>
             <h3>ClawFix</h3>
@@ -127,7 +129,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
           <article class="work-card work-card-featured">
             <div class="card-topline">
               <span>Supporting infrastructure</span>
-              <span>Open source</span>
+              <span class="status-pill" data-state="open">Open source</span>
             </div>
             <div class="work-mark" aria-hidden="true">A3</div>
             <h3>A3Stack</h3>
@@ -141,8 +143,9 @@ import BaseLayout from '../layouts/BaseLayout.astro';
           <article class="work-card">
             <div class="card-topline">
               <span>Playable world</span>
-              <span>Live</span>
+              <span class="status-pill" data-state="live">Live</span>
             </div>
+            <div class="work-mark" aria-hidden="true">CW</div>
             <h3>Castaway</h3>
             <p>A cozy 3D island with fishing, crab traps, rooms, island chat, a Shells economy, and Farcaster sharing.</p>
             <a class="card-link" href="https://castaway.social/world">Visit the island <span aria-hidden="true">↗</span></a>
@@ -151,8 +154,9 @@ import BaseLayout from '../layouts/BaseLayout.astro';
           <article class="work-card">
             <div class="card-topline">
               <span>Farcaster client</span>
-              <span>Public beta</span>
+              <span class="status-pill" data-state="beta">Public beta</span>
             </div>
+            <div class="work-mark" aria-hidden="true">CS</div>
             <h3>Castora</h3>
             <p>An Arca-maintained workspace for fast reading, controlled publishing, profile context, clean embeds, and mobile checks.</p>
             <a class="card-link" href="https://castora.social/">Open Castora <span aria-hidden="true">↗</span></a>
@@ -161,8 +165,9 @@ import BaseLayout from '../layouts/BaseLayout.astro';
           <article class="work-card">
             <div class="card-topline">
               <span>Node operations</span>
-              <span>Independent tooling</span>
+              <span class="status-pill" data-state="open">Independent tooling</span>
             </div>
+            <div class="work-mark" aria-hidden="true">HS</div>
             <h3>Hypersnap Toolkit</h3>
             <p>Install, diagnostics, safe repair, and sanitized support tooling for Hypersnap and Snapchain node operators.</p>
             <a class="card-link" href="https://github.com/arcabotai/hypersnap">Inspect the toolkit <span aria-hidden="true">↗</span></a>
@@ -171,7 +176,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
       </section>
 
       <section class="section model-section" id="model" aria-labelledby="model-title">
-        <div class="section-heading">
+        <div class="section-heading" data-reveal>
           <p class="section-index">02 / Operating model</p>
           <div>
             <h2 id="model-title">Human judgment at the center. Machines with real responsibility.</h2>
@@ -182,7 +187,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
           </div>
         </div>
 
-        <div class="signal-map" role="img" aria-label="Human direction flows through specialist agent execution to a working public artifact">
+        <div class="signal-map" role="img" aria-label="Human direction flows through specialist agent execution to a working public artifact" data-reveal>
           <div class="signal-copy signal-copy-start">
             <span>Input / 001</span>
             <strong>Human direction</strong>
@@ -203,10 +208,13 @@ import BaseLayout from '../layouts/BaseLayout.astro';
             <circle class="signal-active" cx="498" cy="146" r="7" />
             <circle cx="725" cy="54" r="6" />
             <circle cx="946" cy="118" r="6" />
+            <circle class="signal-packet" r="3.2">
+              <animateMotion dur="7s" repeatCount="indefinite" path="M52 202 L260 76 L498 146 L725 54 L946 118" />
+            </circle>
           </svg>
         </div>
 
-        <ol class="process-grid">
+        <ol class="process-grid" data-reveal-stagger data-reveal-line>
           <li><span>01</span><h3>Set direction</h3><p>A person defines the goal, context, risk, and authority boundary.</p></li>
           <li><span>02</span><h3>Route the work</h3><p>The right specialist receives a bounded task instead of a vague mandate.</p></li>
           <li><span>03</span><h3>Exercise reality</h3><p>Agents use source, code, browsers, APIs, and infrastructure to produce the artifact.</p></li>
@@ -215,7 +223,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
       </section>
 
       <section class="section" id="network" aria-labelledby="network-title">
-        <div class="section-heading">
+        <div class="section-heading" data-reveal>
           <p class="section-index">03 / Operator network</p>
           <div>
             <h2 id="network-title">Specialists, not one assistant wearing five hats.</h2>
@@ -226,47 +234,77 @@ import BaseLayout from '../layouts/BaseLayout.astro';
           </div>
         </div>
 
-        <div class="agent-grid">
+        <div class="agent-grid" data-reveal-stagger>
           <article>
-            <span class="agent-code">AR / 01</span>
+            <div class="agent-head">
+              <span class="agent-code">AR / 01</span>
+              <svg class="sigil" viewBox="0 0 28 28" aria-hidden="true" focusable="false">
+                <path d="M5 23 14 5l9 18M8.5 17h11" />
+                <circle cx="14" cy="5" r="1.6" />
+              </svg>
+            </div>
             <h3>Arca</h3>
             <strong>Primary operator</strong>
             <p>Strategy, product direction, and durable execution across the company.</p>
           </article>
           <article>
-            <span class="agent-code">CD / 02</span>
+            <div class="agent-head">
+              <span class="agent-code">CD / 02</span>
+              <svg class="sigil" viewBox="0 0 28 28" aria-hidden="true" focusable="false">
+                <path d="M6 6h16v16H6zM6 22 22 6" />
+                <circle cx="22" cy="6" r="1.6" />
+              </svg>
+            </div>
             <h3>Cad</h3>
             <strong>Scout + builder</strong>
             <p>Experiments, implementation, verification, and deployment.</p>
           </article>
           <article>
-            <span class="agent-code">AD / 03</span>
+            <div class="agent-head">
+              <span class="agent-code">AD / 03</span>
+              <svg class="sigil" viewBox="0 0 28 28" aria-hidden="true" focusable="false">
+                <path d="M4 23C6 12 12 6 24 6M13 11v12" />
+                <circle cx="24" cy="6" r="1.6" />
+              </svg>
+            </div>
             <h3>Ardea</h3>
             <strong>Knowledge steward</strong>
             <p>Source-backed guidance for Hypersnap, Snapchain, and Farcaster-fork builders.</p>
           </article>
           <article>
-            <span class="agent-code">ME / 04</span>
+            <div class="agent-head">
+              <span class="agent-code">ME / 04</span>
+              <svg class="sigil" viewBox="0 0 28 28" aria-hidden="true" focusable="false">
+                <path d="M4 9l10 8 10-8M4 16l10 8 10-8" />
+                <circle cx="14" cy="17" r="1.6" />
+              </svg>
+            </div>
             <h3>Meles</h3>
             <strong>OSS release steward</strong>
             <p>Upstream reconnaissance, proof packets, and merge-quality work.</p>
           </article>
           <article>
-            <span class="agent-code">CO / 05</span>
+            <div class="agent-head">
+              <span class="agent-code">CO / 05</span>
+              <svg class="sigil" viewBox="0 0 28 28" aria-hidden="true" focusable="false">
+                <path d="M3 18C8 8 20 8 25 18M14 10v14" />
+                <circle cx="14" cy="10" r="1.6" />
+              </svg>
+            </div>
             <h3>Corvus</h3>
             <strong>Public signal scout</strong>
             <p>Useful social signal, context, and project texture without filler.</p>
           </article>
         </div>
 
-        <div class="network-note">
+        <div class="network-note" data-reveal>
           <p>Private topology stays private. Public claims still get receipts.</p>
           <a href="https://arcabot.ai/#public-works">See the wider product network <span aria-hidden="true">↗</span></a>
         </div>
       </section>
 
       <section class="section proof-section" aria-labelledby="proof-title">
-        <div class="section-heading">
+        <div class="section-heading" data-reveal>
           <p class="section-index">04 / Public proof</p>
           <div>
             <h2 id="proof-title">Software should leave receipts.</h2>
@@ -277,7 +315,27 @@ import BaseLayout from '../layouts/BaseLayout.astro';
           </div>
         </div>
 
-        <div class="proof-grid">
+        <div class="metrics-strip" aria-label="Current public engineering metrics" data-reveal-stagger>
+          <a href="https://oss.arcabot.ai/">
+            <strong data-count="75">75</strong>
+            <span>Public, non-fork repositories: 11 company · 31 agent · 33 founder</span>
+          </a>
+          <a href="https://www.npmjs.com/package/clawfix">
+            <strong data-count="2051" data-suffix="+">2,051+</strong>
+            <span>ClawFix npm downloads since February 22, 2026</span>
+          </a>
+          <a href="https://github.com/arcabotai/clawfix">
+            <strong data-count="49">49</strong>
+            <span>Deterministic ClawFix detectors in the public package and source</span>
+          </a>
+          <a href="https://github.com/arcabotai/arca-openclaw-contributions">
+            <strong>Open</strong>
+            <span>Upstream ledger with pull requests, reviews, and exact merge states</span>
+          </a>
+        </div>
+        <p class="as-of" data-reveal>Metrics and public status verified August 30, 2026. Unavailable evidence is not counted as live.</p>
+
+        <div class="proof-grid" data-reveal-stagger>
           <a href="https://oss.arcabot.ai/">
             <span>01</span><strong>OSS index</strong><small>Licensed repositories, ownership labels, and maintenance boundaries.</small><i aria-hidden="true">↗</i>
           </a>
@@ -294,7 +352,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
       </section>
 
       <section class="section company-section" id="company" aria-labelledby="company-title">
-        <div class="section-heading">
+        <div class="section-heading" data-reveal>
           <p class="section-index">05 / Company</p>
           <div>
             <h2 id="company-title">Incorporated in Delaware. Built from Santiago.</h2>
@@ -307,7 +365,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
         </div>
 
         <div class="company-grid">
-          <dl class="company-ledger">
+          <dl class="company-ledger" data-reveal-stagger>
             <div><dt>Legal entity</dt><dd>Arca Computer, Inc.</dd></div>
             <div><dt>Structure</dt><dd>Delaware C-Corporation</dd></div>
             <div><dt>Incorporated</dt><dd>July 2026</dd></div>
@@ -316,7 +374,8 @@ import BaseLayout from '../layouts/BaseLayout.astro';
             <div><dt>Primary work</dt><dd>Products · developer infrastructure · open source</dd></div>
           </dl>
 
-          <article class="founder-card">
+          <article class="founder-card" data-reveal>
+            <span class="monogram" aria-hidden="true">LFA</span>
             <p class="section-index">Founder / 001</p>
             <h3>Luis Felipe Abarca</h3>
             <p>
@@ -333,17 +392,21 @@ import BaseLayout from '../layouts/BaseLayout.astro';
         </div>
       </section>
 
-      <section class="contact-section" id="contact" aria-labelledby="contact-title">
+      <section class="contact-section" id="contact" aria-labelledby="contact-title" data-reveal-stagger>
         <p class="section-index">06 / Contact</p>
         <div>
           <h2 id="contact-title">Build with Arca's products.</h2>
           <p>For product access, open-source collaboration, developer integrations, or technical partnerships, write directly.</p>
         </div>
-        <a class="contact-link" href="mailto:contact@arca.computer">contact@arca.computer <span aria-hidden="true">↗</span></a>
+        <div class="contact-actions">
+          <a class="contact-link" href="mailto:contact@arca.computer">contact@arca.computer <span aria-hidden="true">↗</span></a>
+          <a class="button button-secondary" href="/deck">Read the company deck <span aria-hidden="true">→</span></a>
+        </div>
       </section>
     </main>
 
-    <footer>
+    <footer data-reveal-stagger>
+      <span class="footer-mark" aria-hidden="true">ARCA</span>
       <div>
         <strong>Arca Computer, Inc.</strong>
         <span>Delaware C-Corporation · Santiago, Chile</span>
@@ -357,4 +420,13 @@ import BaseLayout from '../layouts/BaseLayout.astro';
       </nav>
       <span>© 2026</span>
     </footer>
+
+    <script>
+      import { initMotion } from '../scripts/motion';
+      import { mountSignalBoard } from '../scripts/signal-board';
+
+      initMotion();
+      const board = document.querySelector<HTMLElement>('.signal-board');
+      if (board) mountSignalBoard(board);
+    </script>
 </BaseLayout>

From 4465d5a9000f6d1ae7880ec5993f91b6967519c8 Mon Sep 17 00:00:00 2001
From: felirami <felirami@users.noreply.github.com>
Date: Tue, 1 Sep 2026 23:11:59 -0400
Subject: [PATCH 3/4] Extend site contracts and QA for the motion layer

Add tests covering the progressive-enhancement gate, font loading, the
reduced-motion policy, the deck links, and that the homepage metrics match
the deck figures exactly. Walk the page in the Playwright QA before the
screenshot and axe run so scroll-triggered reveals have fired. Document the
motion layer in the README.
---
 README.md                    |  9 +++++++++
 scripts/qa.mjs               | 11 +++++++++++
 tests/site-contract.test.mjs | 36 ++++++++++++++++++++++++++++++++++++
 3 files changed, 56 insertions(+)

diff --git a/README.md b/README.md
index 2492c9f..4ba8ac1 100644
--- a/README.md
+++ b/README.md
@@ -19,3 +19,12 @@ npm run preview
 ## Deployment
 
 Production will deploy from the tested `main` branch to the Arca Computer Cloudflare account after the company zone is attached and the first deployment is verified. The Vercel deployment remains the live rollback target until that cutover passes.
+
+## Motion
+
+The homepage is fully readable without JavaScript. A one-line inline script in `src/layouts/BaseLayout.astro` adds `html.js`, and every hidden-until-revealed rule in `public/styles.css` is scoped to that class and to `prefers-reduced-motion: no-preference`.
+
+- `src/scripts/motion.ts` — scroll reveals, condensed masthead + progress line, active nav, pointer highlights, magnetic buttons, metric counters, and the self-drawing signal map.
+- `src/scripts/signal-board.ts` — the hero canvas (procedural traces with travelling pulses). It pauses off-screen and when the tab is hidden, and renders one static frame under reduced motion.
+
+To test the reduced-motion path, emulate `prefers-reduced-motion: reduce` in DevTools (Rendering panel) and reload.
diff --git a/scripts/qa.mjs b/scripts/qa.mjs
index 224c146..abe5016 100644
--- a/scripts/qa.mjs
+++ b/scripts/qa.mjs
@@ -20,6 +20,17 @@ for (const [name, viewport] of Object.entries({
   });
   page.on('pageerror', (error) => consoleErrors.push(error.message));
   const response = await page.goto(baseURL, { waitUntil: 'networkidle' });
+  // Walk the page so scroll-triggered reveals have fired before screenshots and axe run.
+  await page.evaluate(async () => {
+    const step = Math.max(240, Math.round(window.innerHeight * 0.6));
+    const height = document.documentElement.scrollHeight;
+    for (let y = 0; y <= height; y += step) {
+      window.scrollTo({ top: y, behavior: 'instant' });
+      await new Promise((resolve) => setTimeout(resolve, 120));
+    }
+    window.scrollTo({ top: 0, behavior: 'instant' });
+  });
+  await page.waitForTimeout(1500);
   await page.screenshot({ path: `artifacts/${name}.png`, fullPage: true });
   await page.addScriptTag({ content: AxeBuilder.source });
   const axe = await page.evaluate(async () => globalThis.axe.run(document));
diff --git a/tests/site-contract.test.mjs b/tests/site-contract.test.mjs
index 8cf73f0..50614c5 100644
--- a/tests/site-contract.test.mjs
+++ b/tests/site-contract.test.mjs
@@ -94,3 +94,39 @@ test('the company deck reflects the current August 30 product state', async () =
 
   assert.match(styles, /\.deck-header nav a\s*\{[^}]*min-height:\s*24px/s);
 });
+
+const literal = (value) => new RegExp(value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'));
+
+test('the homepage motion layer is progressive and reduced-motion aware', async () => {
+  const layout = await read('src/layouts/BaseLayout.astro');
+  const page = await read('src/pages/index.astro');
+  const styles = await read('public/styles.css');
+
+  assert.match(layout, /documentElement\.classList\.add\('js'\)/);
+  assert.match(layout, /rel="preconnect" href="https:\/\/fonts\.gstatic\.com"/);
+  assert.match(layout, /fonts\.googleapis\.com\/css2\?family=DM\+Mono/);
+  assert.doesNotMatch(styles, /@import/);
+  assert.match(styles, /@media \(prefers-reduced-motion: no-preference\)/);
+  assert.match(styles, /@media \(prefers-reduced-motion: reduce\)/);
+  assert.match(styles, /html\.js \[data-reveal\]/);
+  assert.match(page, /class="signal-board" aria-hidden="true"/);
+  assert.match(page, /<h1 id="hero-title">[\s\S]*The company[\s\S]*is the computer\.[\s\S]*<\/h1>/);
+  assert.match(page, /import \{ initMotion \} from '\.\.\/scripts\/motion'/);
+  assert.match(page, /import \{ mountSignalBoard \} from '\.\.\/scripts\/signal-board'/);
+});
+
+test('the homepage links to the deck and repeats the deck metrics exactly', async () => {
+  const page = await read('src/pages/index.astro');
+  const deck = await read('public/deck/index.html');
+
+  assert.match(page, /<nav aria-label="Primary navigation">[\s\S]*href="\/deck"[\s\S]*<\/nav>/);
+  assert.match(page, /class="button button-secondary" href="\/deck"/);
+
+  for (const figure of ['2,051+', '11 company · 31 agent · 33 founder', 'August 30, 2026']) {
+    assert.match(page, literal(figure));
+    assert.match(deck, literal(figure));
+  }
+  assert.match(page, /data-count="75"/);
+  assert.match(page, /data-count="2051" data-suffix="\+"/);
+  assert.match(page, /data-count="49"/);
+});

From 86b68c04ed194493c40ac4177114b2c76010b857 Mon Sep 17 00:00:00 2001
From: felirami <felirami@users.noreply.github.com>
Date: Tue, 1 Sep 2026 23:35:17 -0400
Subject: [PATCH 4/4] Bring the company deck into Astro with the shared motion
 layer

Move /deck from a static HTML file to src/pages/deck.astro so it renders
through BaseLayout and reuses motion.ts and signal-board.ts. The cover gets
the signal board, a masked line-rise title, staged entrance, and a cover
diagram that draws itself with sequenced nodes and a travelling packet.
Every slide reveals its content on arrival; launchpad, product, range,
metric, and system cards carry the pointer glow; the proof metrics count up.

Extract the shared engine styles into public/motion.css (tokens, board host,
reveal system, glow cards, drawing transitions, reduced-motion policy, and
print overrides that force every reveal visible and hide the canvas so the
deck still exports cleanly to PDF). The homepage stylesheet keeps only its
page-specific rules and its cards use the shared .glow class. BaseLayout
takes a stylesheet prop and always loads motion.css.

Because /deck is now a real route, the sitemap lists it on its own with
trailingSlash set to never so the URL matches the canonical. The QA script
covers both pages, check-build requires motion.css, and the deck content
contracts read the Astro page. The old static deck HTML and rail script are
removed.
---
 README.md                                     |   4 +-
 astro.config.mjs                              |   3 +-
 public/deck/deck.js                           |  25 --
 public/deck/styles.css                        |  57 +++-
 public/motion.css                             | 247 ++++++++++++++++++
 public/styles.css                             | 220 +---------------
 scripts/check-build.mjs                       |   2 +
 scripts/qa.mjs                                |   9 +-
 src/layouts/BaseLayout.astro                  |   5 +-
 .../deck/index.html => src/pages/deck.astro   | 149 +++++------
 src/pages/index.astro                         |  40 +--
 src/scripts/motion.ts                         | 122 +++++----
 tests/site-contract.test.mjs                  |  30 ++-
 13 files changed, 496 insertions(+), 417 deletions(-)
 delete mode 100644 public/deck/deck.js
 create mode 100644 public/motion.css
 rename public/deck/index.html => src/pages/deck.astro (61%)

diff --git a/README.md b/README.md
index 4ba8ac1..f7fabb2 100644
--- a/README.md
+++ b/README.md
@@ -22,9 +22,9 @@ Production will deploy from the tested `main` branch to the Arca Computer Cloudf
 
 ## Motion
 
-The homepage is fully readable without JavaScript. A one-line inline script in `src/layouts/BaseLayout.astro` adds `html.js`, and every hidden-until-revealed rule in `public/styles.css` is scoped to that class and to `prefers-reduced-motion: no-preference`.
+The homepage (`src/pages/index.astro`) and the company deck (`src/pages/deck.astro`, served at `/deck`) share one motion engine: `public/motion.css` plus the scripts below. Each page keeps its own stylesheet. Both pages are fully readable without JavaScript. A one-line inline script in `src/layouts/BaseLayout.astro` adds `html.js`, and every hidden-until-revealed rule in `public/styles.css` is scoped to that class and to `prefers-reduced-motion: no-preference`.
 
 - `src/scripts/motion.ts` — scroll reveals, condensed masthead + progress line, active nav, pointer highlights, magnetic buttons, metric counters, and the self-drawing signal map.
 - `src/scripts/signal-board.ts` — the hero canvas (procedural traces with travelling pulses). It pauses off-screen and when the tab is hidden, and renders one static frame under reduced motion.
 
-To test the reduced-motion path, emulate `prefers-reduced-motion: reduce` in DevTools (Rendering panel) and reload.
+Print styles force every reveal visible and hide the canvas, so the deck still exports cleanly to PDF. To test the reduced-motion path, emulate `prefers-reduced-motion: reduce` in DevTools (Rendering panel) and reload.
diff --git a/astro.config.mjs b/astro.config.mjs
index e57af5d..05f4638 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -4,5 +4,6 @@ import sitemap from '@astrojs/sitemap';
 export default defineConfig({
   site: 'https://arca.computer',
   output: 'static',
-  integrations: [sitemap({ customPages: ['https://arca.computer/deck'] })],
+  trailingSlash: 'never',
+  integrations: [sitemap()],
 });
diff --git a/public/deck/deck.js b/public/deck/deck.js
deleted file mode 100644
index 4e997d2..0000000
--- a/public/deck/deck.js
+++ /dev/null
@@ -1,25 +0,0 @@
-(() => {
-  const sections = [...document.querySelectorAll("main > section[id]")];
-  const links = [...document.querySelectorAll(".rail a")];
-
-  if (!("IntersectionObserver" in window)) return;
-
-  const observer = new IntersectionObserver(
-    (entries) => {
-      const visible = entries
-        .filter((entry) => entry.isIntersecting)
-        .sort((a, b) => b.intersectionRatio - a.intersectionRatio)[0];
-
-      if (!visible) return;
-
-      links.forEach((link) => {
-        const current = link.getAttribute("href") === `#${visible.target.id}`;
-        if (current) link.setAttribute("aria-current", "true");
-        else link.removeAttribute("aria-current");
-      });
-    },
-    { threshold: [0.35, 0.6] }
-  );
-
-  sections.forEach((section) => observer.observe(section));
-})();
diff --git a/public/deck/styles.css b/public/deck/styles.css
index 9a63d6b..acf1d36 100644
--- a/public/deck/styles.css
+++ b/public/deck/styles.css
@@ -84,7 +84,7 @@ a:focus-visible, [tabindex="-1"]:focus-visible { outline: 2px solid var(--signal
 }
 .rail a:hover, .rail a[aria-current="true"] { color: var(--signal); border-color: var(--line-strong); background: var(--signal-soft); }
 
-main { scroll-snap-type: y proximity; }
+main { position: relative; z-index: 1; scroll-snap-type: y proximity; }
 main:focus { outline: none; }
 .slide {
   position: relative; min-height: 100svh; display: grid; align-items: center;
@@ -281,14 +281,57 @@ h2 { max-width: 900px; font-size: clamp(48px, 6.7vw, 90px); line-height: .95; }
   .proof-links { grid-template-columns: 1fr; }
 }
 
-@media (prefers-reduced-motion: reduce) {
-  html { scroll-behavior: auto; }
-  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
-}
-
 @media print {
-  .deck-header, .rail, .grain, .skip-link { display: none; }
+  .deck-header, .rail, .grain, .skip-link, .signal-board { display: none; }
   body { background: var(--ink); }
   .slide { min-height: 100vh; break-after: page; padding: 52px; }
   .slide:last-child { break-after: auto; }
 }
+
+/* Deck motion: entrance choreography and cover diagram (engine in /motion.css). */
+.deck-header::after {
+  position: absolute; right: 0; bottom: -1px; left: 0; height: 1px; content: "";
+  background: var(--signal); transform: scaleX(var(--progress, 0)); transform-origin: left;
+}
+.deck-header.is-condensed { background: rgba(13,20,18,.9); }
+
+h1 .line { display: block; overflow: hidden; padding: .08em 0 .18em; margin: -.08em 0 -.18em; }
+h1 .line > span { display: block; }
+
+.metrics strong { font-variant-numeric: tabular-nums; }
+.range-grid a.glow { --glow: var(--bronze-rgb); }
+.system-loop li { transition: background .3s var(--ease-out); }
+.system-loop li:hover { background: rgba(17,27,24,.7); }
+.launchpad-grid article { transition: background .3s var(--ease-out); }
+.launchpad-grid article:hover { background: rgba(17,27,24,.75); }
+
+.cover-diagram span { transition: opacity .6s var(--ease-out), translate .6s var(--ease-out); }
+.cover-diagram .signal-packet { fill: #dbfff5; stroke: none; transition: opacity .8s ease 3.4s; }
+.cover-diagram[data-draw] path { transition-delay: .9s; }
+.cover-diagram.is-drawn circle:nth-of-type(1) { transition-delay: 1s; }
+.cover-diagram.is-drawn circle:nth-of-type(2) { transition-delay: 1.4s; }
+.cover-diagram.is-drawn circle:nth-of-type(3) { transition-delay: 1.8s; }
+.cover-diagram.is-drawn circle:nth-of-type(4) { transition-delay: 2.2s; }
+.cover-diagram.is-drawn circle:nth-of-type(5) { transition-delay: 2.6s; }
+.cover-diagram.is-drawn circle:nth-of-type(6) { transition-delay: 3s; }
+.cover-diagram.is-drawn span:nth-of-type(1) { transition-delay: 1s; }
+.cover-diagram.is-drawn span:nth-of-type(2) { transition-delay: 1.4s; }
+.cover-diagram.is-drawn span:nth-of-type(3) { transition-delay: 1.8s; }
+.cover-diagram.is-drawn span:nth-of-type(4) { transition-delay: 2.2s; }
+.cover-diagram.is-drawn span:nth-of-type(5) { transition-delay: 2.6s; }
+.cover-diagram.is-drawn span:nth-of-type(6) { transition-delay: 3s; }
+
+@media (prefers-reduced-motion: no-preference) {
+  html.js .deck-header { animation: fade-down .8s var(--ease-out) backwards; }
+  html.js .rail { animation: board-in 1s var(--ease-out) .6s backwards; }
+  html.js .cover .kicker { animation: fade-up .7s var(--ease-out) .12s backwards; }
+  html.js .cover h1 .line > span { animation: rise 1s var(--ease-out) .2s backwards; }
+  html.js .cover h1 .line-2 > span { animation-delay: .3s; }
+  html.js .cover .lead { animation: fade-up .8s var(--ease-out) .48s backwards; }
+  html.js .cover-index p { animation: fade-up .8s var(--ease-out) backwards; animation-delay: calc(.6s + var(--i, 0) * 80ms); }
+  html.js .cover-index p:nth-child(2) { --i: 1; }
+  html.js .cover-index p:nth-child(3) { --i: 2; }
+  html.js .cover-index p:nth-child(4) { --i: 3; }
+  html.js .cover-diagram { animation: fade-up .9s var(--ease-out) .8s backwards; }
+  html.js .cover-diagram:not(.is-drawn) span { opacity: 0; translate: 0 6px; }
+}
diff --git a/public/motion.css b/public/motion.css
new file mode 100644
index 0000000..7daa6d7
--- /dev/null
+++ b/public/motion.css
@@ -0,0 +1,247 @@
+/* Shared motion layer for arca.computer pages. Loaded after each page's own stylesheet. */
+
+:root {
+  --signal-rgb: 104, 219, 195;
+  --bronze-rgb: 192, 139, 84;
+  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
+  --t-micro: 180ms;
+  --t-reveal: 800ms;
+}
+
+/* Decorative canvas layer behind the first screen. */
+.signal-board {
+  position: absolute;
+  inset: 0 0 auto;
+  z-index: 0;
+  height: min(100vh, 920px);
+  overflow: hidden;
+  pointer-events: none;
+  -webkit-mask-image:
+    linear-gradient(90deg, rgba(0, 0, 0, 0.16) 0%, rgba(0, 0, 0, 0.4) 34%, #000 60%),
+    linear-gradient(180deg, #000 58%, transparent 100%);
+  -webkit-mask-composite: source-in;
+  mask-image:
+    linear-gradient(90deg, rgba(0, 0, 0, 0.16) 0%, rgba(0, 0, 0, 0.4) 34%, #000 60%),
+    linear-gradient(180deg, #000 58%, transparent 100%);
+  mask-composite: intersect;
+}
+
+.signal-board canvas {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+/* Magnetic buttons (class added by motion.ts). */
+.button.is-magnetic {
+  transition:
+    border-color var(--t-micro) ease,
+    background var(--t-micro) ease,
+    color var(--t-micro) ease,
+    transform 0.4s var(--ease-out);
+}
+
+.button.is-magnetic.is-returning {
+  transition-duration: var(--t-micro), var(--t-micro), var(--t-micro), 0.6s;
+  transition-timing-function: ease, ease, ease, var(--ease-spring);
+}
+
+/* Self-drawing diagrams: any [data-draw] container with SVG paths and circles. */
+[data-draw] path {
+  transition: stroke-dashoffset 2.2s var(--ease-io);
+}
+
+[data-draw] circle {
+  transition: opacity 0.5s var(--ease-out);
+}
+
+/* Pointer-follow highlight and border glow on .glow cards. */
+@media (hover: hover) and (pointer: fine) {
+  .glow {
+    position: relative;
+    isolation: isolate;
+  }
+
+  .glow::before {
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    content: "";
+    pointer-events: none;
+    opacity: 0;
+    background: radial-gradient(
+      380px circle at var(--mx, 50%) var(--my, 50%),
+      rgba(var(--glow, var(--signal-rgb)), 0.11),
+      transparent 62%
+    );
+    transition: opacity 0.4s var(--ease-out);
+  }
+
+  .glow::after {
+    position: absolute;
+    inset: -1px;
+    z-index: 2;
+    padding: 1px;
+    content: "";
+    pointer-events: none;
+    opacity: 0;
+    background: radial-gradient(
+      320px circle at var(--mx, 50%) var(--my, 50%),
+      rgba(var(--glow, var(--signal-rgb)), 0.8),
+      transparent 60%
+    );
+    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+    -webkit-mask-composite: xor;
+    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+    mask-composite: exclude;
+    transition: opacity 0.4s var(--ease-out);
+  }
+
+  .glow:hover::before,
+  .glow:hover::after {
+    opacity: 1;
+  }
+}
+
+@media (max-width: 760px) {
+  .signal-board {
+    height: min(100vh, 760px);
+    opacity: 0.6;
+    -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
+    -webkit-mask-composite: source-over;
+    mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
+    mask-composite: add;
+  }
+}
+
+@keyframes pulse {
+  50% {
+    opacity: 0.42;
+    filter: drop-shadow(0 0 2px var(--signal));
+  }
+}
+
+@keyframes fade-down {
+  from {
+    opacity: 0;
+    transform: translateY(-12px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+@keyframes fade-up {
+  from {
+    opacity: 0;
+    transform: translateY(16px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+@keyframes rise {
+  from {
+    transform: translateY(112%);
+  }
+  to {
+    transform: none;
+  }
+}
+
+@keyframes board-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  html.js .signal-board {
+    animation: board-in 2s var(--ease-out) 0.35s backwards;
+  }
+
+  /* Scroll reveals: hidden only when the motion script can run. */
+  html.js [data-reveal]:not(.is-done),
+  html.js [data-reveal-stagger] > :not(.is-done) {
+    opacity: 0;
+    transform: translateY(26px);
+    filter: blur(5px);
+    transition:
+      opacity var(--t-reveal) var(--ease-out),
+      transform var(--t-reveal) var(--ease-out),
+      filter var(--t-reveal) var(--ease-out);
+    transition-delay: calc(var(--i, 0) * 70ms);
+  }
+
+  html.js [data-reveal].is-in:not(.is-done),
+  html.js [data-reveal-stagger] > .is-in:not(.is-done) {
+    opacity: 1;
+    transform: none;
+    filter: none;
+  }
+
+  /* Diagram nodes stay hidden until the line has drawn itself. */
+  html.js [data-draw]:not(.is-drawn) circle {
+    opacity: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html {
+    scroll-behavior: auto;
+  }
+
+  .signal-packet {
+    display: none;
+  }
+
+  .signal-board {
+    opacity: 0.7;
+  }
+
+  *,
+  *::before,
+  *::after {
+    scroll-behavior: auto !important;
+    transition-duration: 0.15s !important;
+    transition-delay: 0s !important;
+    animation-duration: 0.01ms !important;
+    animation-delay: 0s !important;
+    animation-iteration-count: 1 !important;
+  }
+}
+
+@media print {
+  .signal-board,
+  .signal-packet {
+    display: none;
+  }
+
+  html.js [data-reveal],
+  html.js [data-reveal-stagger] > *,
+  html.js [data-draw] circle {
+    opacity: 1 !important;
+    transform: none !important;
+    filter: none !important;
+  }
+
+  [data-draw] path {
+    stroke-dasharray: none !important;
+    stroke-dashoffset: 0 !important;
+  }
+
+  *,
+  *::before,
+  *::after {
+    animation: none !important;
+    transition: none !important;
+  }
+}
diff --git a/public/styles.css b/public/styles.css
index dad53ab..99b7f4c 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -9,19 +9,12 @@
   --line: rgba(226, 229, 218, 0.17);
   --line-strong: rgba(226, 229, 218, 0.3);
   --signal: #68dbc3;
-  --signal-rgb: 104, 219, 195;
   --signal-soft: rgba(104, 219, 195, 0.12);
   --bronze: #c08b54;
-  --bronze-rgb: 192, 139, 84;
   --bronze-soft: rgba(192, 139, 84, 0.12);
   --mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
   --sans: Manrope, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   --content: 1180px;
-  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
-  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
-  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
-  --t-micro: 180ms;
-  --t-reveal: 800ms;
 }
 
 * {
@@ -65,30 +58,6 @@ body {
   background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.14'/%3E%3C/svg%3E");
 }
 
-/* Hero centerpiece: decorative canvas layer behind the hero. */
-.signal-board {
-  position: absolute;
-  inset: 0 0 auto;
-  z-index: 0;
-  height: min(100vh, 920px);
-  overflow: hidden;
-  pointer-events: none;
-  -webkit-mask-image:
-    linear-gradient(90deg, rgba(0, 0, 0, 0.16) 0%, rgba(0, 0, 0, 0.4) 34%, #000 60%),
-    linear-gradient(180deg, #000 58%, transparent 100%);
-  -webkit-mask-composite: source-in;
-  mask-image:
-    linear-gradient(90deg, rgba(0, 0, 0, 0.16) 0%, rgba(0, 0, 0, 0.4) 34%, #000 60%),
-    linear-gradient(180deg, #000 58%, transparent 100%);
-  mask-composite: intersect;
-}
-
-.signal-board canvas {
-  display: block;
-  width: 100%;
-  height: 100%;
-}
-
 .skip-link {
   position: fixed;
   top: 12px;
@@ -375,13 +344,7 @@ h1 .line-2 > span::selection {
   transition:
     border-color var(--t-micro) ease,
     background var(--t-micro) ease,
-    color var(--t-micro) ease,
-    transform 0.4s var(--ease-out);
-}
-
-.button.is-returning {
-  transition-duration: var(--t-micro), var(--t-micro), var(--t-micro), 0.6s;
-  transition-timing-function: ease, ease, ease, var(--ease-spring);
+    color var(--t-micro) ease;
 }
 
 .button span {
@@ -766,7 +729,6 @@ html:not(.js) .principles span::after {
 .signal-line {
   fill: none;
   vector-effect: non-scaling-stroke;
-  transition: stroke-dashoffset 2.2s var(--ease-io);
 }
 
 .signal-glow {
@@ -785,7 +747,6 @@ html:not(.js) .principles span::after {
   stroke: var(--paper);
   stroke-width: 1.2;
   vector-effect: non-scaling-stroke;
-  transition: opacity 0.5s var(--ease-out);
 }
 
 .signal-map .signal-active {
@@ -1331,73 +1292,7 @@ footer a:hover {
   color: var(--signal);
 }
 
-/* Pointer-follow highlight and border glow on cards. */
 @media (hover: hover) and (pointer: fine) {
-  .work-card,
-  .proof-grid > a,
-  .agent-grid > article,
-  .founder-card,
-  .metrics-strip > a {
-    position: relative;
-    isolation: isolate;
-  }
-
-  .work-card::before,
-  .proof-grid > a::before,
-  .agent-grid > article::before,
-  .founder-card::before,
-  .metrics-strip > a::before {
-    position: absolute;
-    inset: 0;
-    z-index: -1;
-    content: "";
-    pointer-events: none;
-    opacity: 0;
-    background: radial-gradient(
-      380px circle at var(--mx, 50%) var(--my, 50%),
-      rgba(var(--glow, var(--signal-rgb)), 0.11),
-      transparent 62%
-    );
-    transition: opacity 0.4s var(--ease-out);
-  }
-
-  .work-card::after,
-  .proof-grid > a::after,
-  .agent-grid > article::after,
-  .founder-card::after,
-  .metrics-strip > a::after {
-    position: absolute;
-    inset: -1px;
-    z-index: 2;
-    padding: 1px;
-    content: "";
-    pointer-events: none;
-    opacity: 0;
-    background: radial-gradient(
-      320px circle at var(--mx, 50%) var(--my, 50%),
-      rgba(var(--glow, var(--signal-rgb)), 0.8),
-      transparent 60%
-    );
-    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-    -webkit-mask-composite: xor;
-    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-    mask-composite: exclude;
-    transition: opacity 0.4s var(--ease-out);
-  }
-
-  .work-card:hover::before,
-  .work-card:hover::after,
-  .proof-grid > a:hover::before,
-  .proof-grid > a:hover::after,
-  .agent-grid > article:hover::before,
-  .agent-grid > article:hover::after,
-  .founder-card:hover::before,
-  .founder-card:hover::after,
-  .metrics-strip > a:hover::before,
-  .metrics-strip > a:hover::after {
-    opacity: 1;
-  }
-
   .agent-grid article:hover .sigil path {
     animation: sigil-draw 1s var(--ease-out);
   }
@@ -1476,15 +1371,6 @@ footer a:hover {
     width: min(100% - 28px, var(--content));
   }
 
-  .signal-board {
-    height: min(100vh, 760px);
-    opacity: 0.6;
-    -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
-    -webkit-mask-composite: source-over;
-    mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
-    mask-composite: add;
-  }
-
   .masthead {
     position: relative;
     min-height: 126px;
@@ -1765,54 +1651,7 @@ footer a:hover {
   }
 }
 
-/* Motion: entrance choreography, scroll reveals, and ambient animation. */
-@keyframes pulse {
-  50% {
-    opacity: 0.42;
-    filter: drop-shadow(0 0 2px var(--signal));
-  }
-}
-
-@keyframes fade-down {
-  from {
-    opacity: 0;
-    transform: translateY(-12px);
-  }
-  to {
-    opacity: 1;
-    transform: none;
-  }
-}
-
-@keyframes fade-up {
-  from {
-    opacity: 0;
-    transform: translateY(16px);
-  }
-  to {
-    opacity: 1;
-    transform: none;
-  }
-}
-
-@keyframes rise {
-  from {
-    transform: translateY(112%);
-  }
-  to {
-    transform: none;
-  }
-}
-
-@keyframes board-in {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
+/* Homepage motion: entrance choreography and ambient animation (engine in /motion.css). */
 @keyframes sigil-draw {
   from {
     stroke-dashoffset: 110;
@@ -1840,10 +1679,6 @@ footer a:hover {
     animation: fade-down 0.8s var(--ease-out) backwards;
   }
 
-  html.js .signal-board {
-    animation: board-in 2s var(--ease-out) 0.35s backwards;
-  }
-
   html.js .hero .eyebrow {
     animation: fade-up 0.7s var(--ease-out) 0.12s backwards;
   }
@@ -1877,62 +1712,13 @@ footer a:hover {
   html.js .hero-index > div:nth-child(3) { --i: 2; }
   html.js .hero-index > div:nth-child(4) { --i: 3; }
 
-  /* Scroll reveals. */
-  html.js [data-reveal]:not(.is-done),
-  html.js [data-reveal-stagger] > :not(.is-done) {
-    opacity: 0;
-    transform: translateY(26px);
-    filter: blur(5px);
-    transition:
-      opacity var(--t-reveal) var(--ease-out),
-      transform var(--t-reveal) var(--ease-out),
-      filter var(--t-reveal) var(--ease-out);
-    transition-delay: calc(var(--i, 0) * 70ms);
-  }
-
-  html.js [data-reveal].is-in:not(.is-done),
-  html.js [data-reveal-stagger] > .is-in:not(.is-done) {
-    opacity: 1;
-    transform: none;
-    filter: none;
-  }
-
-  /* Signal map: hidden until the line draws itself. */
-  html.js .signal-map:not(.is-drawn) circle {
-    opacity: 0;
-  }
-
+  /* Signal map labels follow the drawing. */
   html.js .signal-map:not(.is-drawn) .signal-copy {
     opacity: 0;
     translate: 0 8px;
   }
 }
 
-@media (prefers-reduced-motion: reduce) {
-  html {
-    scroll-behavior: auto;
-  }
-
-  .signal-map .signal-packet {
-    display: none;
-  }
-
-  .signal-board {
-    opacity: 0.7;
-  }
-
-  *,
-  *::before,
-  *::after {
-    scroll-behavior: auto !important;
-    transition-duration: 0.15s !important;
-    transition-delay: 0s !important;
-    animation-duration: 0.01ms !important;
-    animation-delay: 0s !important;
-    animation-iteration-count: 1 !important;
-  }
-}
-
 .error-page {
   min-height: 100vh;
   display: grid;
diff --git a/scripts/check-build.mjs b/scripts/check-build.mjs
index e612cb3..85465cf 100644
--- a/scripts/check-build.mjs
+++ b/scripts/check-build.mjs
@@ -8,6 +8,8 @@ await Promise.all([
   exists('index.html'),
   exists('404.html'),
   exists('styles.css'),
+  exists('motion.css'),
+  exists('deck/styles.css'),
   exists('robots.txt'),
   exists('sitemap-index.xml'),
   exists('og-image.png'),
diff --git a/scripts/qa.mjs b/scripts/qa.mjs
index abe5016..e438642 100644
--- a/scripts/qa.mjs
+++ b/scripts/qa.mjs
@@ -8,6 +8,7 @@ const systemChrome = '/usr/bin/google-chrome';
 const browser = await chromium.launch({ executablePath: existsSync(systemChrome) ? systemChrome : undefined, headless: true });
 const results = {};
 
+for (const path of ['/', '/deck']) {
 for (const [name, viewport] of Object.entries({
   desktop: { width: 1440, height: 1000 },
   mobile: { width: 390, height: 844 },
@@ -19,7 +20,8 @@ for (const [name, viewport] of Object.entries({
     if (message.type() === 'error') consoleErrors.push(message.text());
   });
   page.on('pageerror', (error) => consoleErrors.push(error.message));
-  const response = await page.goto(baseURL, { waitUntil: 'networkidle' });
+  const label = path === '/' ? name : `${name}-${path.slice(1)}`;
+  const response = await page.goto(new URL(path, baseURL).href, { waitUntil: 'networkidle' });
   // Walk the page so scroll-triggered reveals have fired before screenshots and axe run.
   await page.evaluate(async () => {
     const step = Math.max(240, Math.round(window.innerHeight * 0.6));
@@ -31,7 +33,7 @@ for (const [name, viewport] of Object.entries({
     window.scrollTo({ top: 0, behavior: 'instant' });
   });
   await page.waitForTimeout(1500);
-  await page.screenshot({ path: `artifacts/${name}.png`, fullPage: true });
+  await page.screenshot({ path: `artifacts/${label}.png`, fullPage: true });
   await page.addScriptTag({ content: AxeBuilder.source });
   const axe = await page.evaluate(async () => globalThis.axe.run(document));
   const metrics = await page.evaluate(() => {
@@ -47,7 +49,7 @@ for (const [name, viewport] of Object.entries({
       contactLines: contact ? new Set([...contactRange.getClientRects()].map((rect) => Math.round(rect.top))).size : 0,
     };
   });
-  results[name] = {
+  results[label] = {
     status: response?.status(),
     consoleErrors,
     metrics,
@@ -56,6 +58,7 @@ for (const [name, viewport] of Object.entries({
   await page.close();
   await context.close();
 }
+}
 
 await browser.close();
 await writeFile('artifacts/qa.json', JSON.stringify(results, null, 2) + '\n');
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index 0a5ba6d..0d8bd47 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -5,6 +5,7 @@ export interface Props {
   canonicalPath?: string | null;
   noindex?: boolean;
   structuredData?: boolean;
+  stylesheet?: string;
 }
 
 const {
@@ -13,6 +14,7 @@ const {
   canonicalPath = '/',
   noindex = false,
   structuredData = true,
+  stylesheet = '/styles.css',
 } = Astro.props;
 const canonicalURL = canonicalPath === null ? null : new URL(canonicalPath, Astro.site).href;
 ---
@@ -56,7 +58,8 @@ const canonicalURL = canonicalPath === null ? null : new URL(canonicalPath, Astr
       rel="stylesheet"
       href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=Manrope:wght@400;500;600&display=swap"
     />
-    <link rel="stylesheet" href="/styles.css" />
+    <link rel="stylesheet" href={stylesheet} />
+    <link rel="stylesheet" href="/motion.css" />
     <script is:inline>document.documentElement.classList.add('js');</script>
 
     {structuredData && (
diff --git a/public/deck/index.html b/src/pages/deck.astro
similarity index 61%
rename from public/deck/index.html
rename to src/pages/deck.astro
index 859ac33..80f1827 100644
--- a/public/deck/index.html
+++ b/src/pages/deck.astro
@@ -1,35 +1,17 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#0d1412" />
-    <meta name="color-scheme" content="dark" />
-    <meta name="description" content="Arca Computer company deck: Agent Launchpad, persistent agent infrastructure, shipped products, open-source tools, and public engineering evidence." />
-    <meta name="author" content="Arca Computer, Inc." />
-    <link rel="canonical" href="https://arca.computer/deck" />
+---
+import BaseLayout from '../layouts/BaseLayout.astro';
+---
 
-    <meta property="og:type" content="website" />
-    <meta property="og:site_name" content="Arca Computer" />
-    <meta property="og:title" content="Arca Computer — Company Deck" />
-    <meta property="og:description" content="One founder and a working agent company building persistent personal agents, products, developer infrastructure, and open-source systems from Santiago, Chile." />
-    <meta property="og:url" content="https://arca.computer/deck" />
-    <meta property="og:image" content="https://arca.computer/og-image.png" />
-
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:title" content="Arca Computer — Company Deck" />
-    <meta name="twitter:description" content="Agent Launchpad, shipped products, open infrastructure, and public engineering receipts." />
-    <meta name="twitter:image" content="https://arca.computer/og-image.png" />
-
-    <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
-    <link rel="icon" href="/favicon-32.png" sizes="32x32" type="image/png" />
-    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
-    <title>Arca Computer — Company Deck</title>
-    <link rel="stylesheet" href="/deck/styles.css" />
-  </head>
-  <body>
-    <a class="skip-link" href="#deck">Skip to deck</a>
+<BaseLayout
+  title="Arca Computer — Company Deck"
+  description="Arca Computer company deck: Agent Launchpad, persistent agent infrastructure, shipped products, open-source tools, and public engineering evidence."
+  canonicalPath="/deck"
+  structuredData={false}
+  stylesheet="/deck/styles.css"
+>
+<a class="skip-link" href="#deck">Skip to deck</a>
     <div class="grain" aria-hidden="true"></div>
+    <div class="signal-board" aria-hidden="true"></div>
 
     <header class="deck-header">
       <a class="wordmark" href="/" aria-label="Arca Computer home">
@@ -64,7 +46,7 @@
         <div class="slide-inner cover-grid">
           <div class="cover-copy">
             <p class="kicker">Arca Computer, Inc. / Santiago, Chile</p>
-            <h1 id="cover-title">The company<br />is the <em>computer.</em></h1>
+            <h1 id="cover-title"><span class="line line-1"><span>The company</span></span> <span class="line line-2"><span>is the <em>computer.</em></span></span></h1>
             <p class="lead">One founder directs specialist agents and is turning that operating system into Agent Launchpad: persistent personal agents with real tools, memory, and identity.</p>
           </div>
           <div class="cover-index" role="group" aria-label="Company summary">
@@ -73,12 +55,15 @@ <h1 id="cover-title">The company<br />is the <em>computer.</em></h1>
             <p><span>Mode</span><strong>Human direction<br />Agent execution</strong></p>
             <p><span>Scope</span><strong>Agent infrastructure · products · OSS · research</strong></p>
           </div>
-          <div class="cover-diagram" aria-hidden="true">
+          <div class="cover-diagram" aria-hidden="true" data-draw>
             <svg viewBox="0 0 1000 190" preserveAspectRatio="none">
               <path class="diagram-glow" d="M25 135 L190 74 L355 116 L535 42 L710 98 L975 34" />
               <path class="diagram-line" d="M25 135 L190 74 L355 116 L535 42 L710 98 L975 34" />
               <circle cx="25" cy="135" r="5" /><circle cx="190" cy="74" r="5" /><circle cx="355" cy="116" r="5" />
               <circle class="active" cx="535" cy="42" r="7" /><circle cx="710" cy="98" r="5" /><circle cx="975" cy="34" r="5" />
+              <circle class="signal-packet" r="3.2">
+                <animateMotion dur="8s" repeatCount="indefinite" path="M25 135 L190 74 L355 116 L535 42 L710 98 L975 34" />
+              </circle>
             </svg>
             <span>Direction</span><span>Research</span><span>Build</span><span>Verify</span><span>Operate</span><span>Receipt</span>
           </div>
@@ -87,12 +72,12 @@ <h1 id="cover-title">The company<br />is the <em>computer.</em></h1>
 
       <section class="slide" id="company" aria-labelledby="company-title">
         <div class="slide-inner split-slide">
-          <div>
+          <div data-reveal>
             <p class="kicker">02 / The company</p>
             <h2 id="company-title">One founder.<br />A working agent company.</h2>
             <p class="big-copy">Luis Felipe Abarca sets direction and final authority. Named specialist agents research, implement, review, deploy, and maintain bounded work. Agent Launchpad packages that operating model for other people without removing human control.</p>
           </div>
-          <div class="operating-stack">
+          <div class="operating-stack" data-reveal-stagger>
             <article><span>01</span><strong>Luis Felipe</strong><p>Founder · product direction, risk, taste, and final authority.</p></article>
             <article><span>02</span><strong>Cad · Meles</strong><p>Implementation, verification, OSS triage, and release-quality evidence.</p></article>
             <article><span>03</span><strong>Ardea · Corvus</strong><p>Protocol knowledge, operator guidance, and public ecosystem signal.</p></article>
@@ -103,7 +88,7 @@ <h2 id="company-title">One founder.<br />A working agent company.</h2>
 
       <section class="slide launchpad" id="launchpad" aria-labelledby="launchpad-title">
         <div class="slide-inner launchpad-layout">
-          <div class="launchpad-copy">
+          <div class="launchpad-copy" data-reveal>
             <p class="kicker">03 / Agent Launchpad</p>
             <h2 id="launchpad-title">A private agent,<br />provisioned like software.</h2>
             <p class="big-copy">Agent Launchpad creates persistent personal agents with isolated workspaces, durable memory, tools, and working communication identities. The product is live as a controlled private preview.</p>
@@ -111,13 +96,13 @@ <h2 id="launchpad-title">A private agent,<br />provisioned like software.</h2>
               <a class="button button-primary" href="https://agent.arca.computer/">Enter private preview ↗</a>
             </div>
           </div>
-          <div class="launchpad-grid" aria-label="Agent Launchpad capabilities">
-            <article><span>01 / Runtime</span><strong>Isolated workspace</strong><p>Persistent files, snapshots, standby and resume keep the agent's working state without keeping compute hot.</p></article>
-            <article><span>02 / Continuity</span><strong>Durable memory</strong><p>Hermes memory and fresh-turn recall are provisioned on persistent storage and verified on a live agent.</p></article>
-            <article><span>03 / Identity</span><strong>AgentMail inbox + messaging</strong><p>A dedicated inbox, web chat, a phone messaging integration, and sender allowlisting give each agent a bounded working identity.</p></article>
-            <article><span>04 / Portability</span><strong>Multi-runtime</strong><p>The primary runtime is live. A second provider passed inference, snapshot, stop/resume, and exact-session continuity canaries; rollout remains gated.</p></article>
+          <div class="launchpad-grid" aria-label="Agent Launchpad capabilities" data-reveal-stagger>
+            <article class="glow"><span>01 / Runtime</span><strong>Isolated workspace</strong><p>Persistent files, snapshots, standby and resume keep the agent's working state without keeping compute hot.</p></article>
+            <article class="glow"><span>02 / Continuity</span><strong>Durable memory</strong><p>Hermes memory and fresh-turn recall are provisioned on persistent storage and verified on a live agent.</p></article>
+            <article class="glow"><span>03 / Identity</span><strong>AgentMail inbox + messaging</strong><p>A dedicated inbox, web chat, a phone messaging integration, and sender allowlisting give each agent a bounded working identity.</p></article>
+            <article class="glow"><span>04 / Portability</span><strong>Multi-runtime</strong><p>The primary runtime is live. A second provider passed inference, snapshot, stop/resume, and exact-session continuity canaries; rollout remains gated.</p></article>
           </div>
-          <div class="launchpad-status" aria-label="Agent Launchpad current state">
+          <div class="launchpad-status" aria-label="Agent Launchpad current state" data-reveal-stagger>
             <p><span>Status</span><strong>Private preview</strong></p>
             <p><span>Interface</span><strong>Web chat · mobile-ready</strong></p>
             <p><span>Channels</span><strong>Email · web chat · phone messaging integration</strong></p>
@@ -128,7 +113,7 @@ <h2 id="launchpad-title">A private agent,<br />provisioned like software.</h2>
 
       <section class="slide" id="products" aria-labelledby="products-title">
         <div class="slide-inner world-layout">
-          <div class="world-copy">
+          <div class="world-copy" data-reveal>
             <p class="kicker">04 / Shipped products</p>
             <h2 id="products-title">The same operators ship outside the agent stack.</h2>
             <p class="big-copy">Castaway is a live browser and mobile 3D Farcaster world with fishing, rooms, chat, friends, quests, crab traps, and an in-game Shells economy.</p>
@@ -137,7 +122,7 @@ <h2 id="products-title">The same operators ship outside the agent stack.</h2>
               <a class="button" href="https://github.com/felirami/castaway-wardrobe">Community wardrobe ↗</a>
             </div>
           </div>
-          <figure class="world-card">
+          <figure class="world-card" data-reveal>
             <img class="world-shot" src="/deck/assets/castaway-gameplay.webp" alt="Live Castaway gameplay showing the player exploring a low-poly 3D island with palms, water, and a glowing portal." />
             <span class="shot-label">Live gameplay · castaway.social</span>
             <figcaption class="world-meta">
@@ -147,14 +132,14 @@ <h2 id="products-title">The same operators ship outside the agent stack.</h2>
               <p><span>Game loop</span><strong>Fish · Quest · Collect</strong></p>
             </figcaption>
           </figure>
-          <div class="product-strips">
-            <a class="portfolio-strip" href="https://www.npmjs.com/package/clawfix">
+          <div class="product-strips" data-reveal-stagger>
+            <a class="portfolio-strip glow" href="https://www.npmjs.com/package/clawfix">
               <span>Live + MIT</span><strong>ClawFix</strong><p>49 deterministic detectors and guarded repairs for broken OpenClaw installations.</p><i>2,051+ npm downloads ↗</i>
             </a>
-            <a class="portfolio-strip" href="https://castora.social/">
+            <a class="portfolio-strip glow" href="https://castora.social/">
               <span>Public beta</span><strong>Castora</strong><p>A faster Farcaster workspace for reading, publishing, profiles, embeds, and mobile use.</p><i>Open Castora ↗</i>
             </a>
-            <a class="portfolio-strip" href="https://github.com/arcabotai/hypersnapdoctor">
+            <a class="portfolio-strip glow" href="https://github.com/arcabotai/hypersnapdoctor">
               <span>Open-source tool</span><strong>Hypersnap Doctor</strong><p>Independent diagnostics, safe repair, and sanitized reports for node operators.</p><i>Inspect source ↗</i>
             </a>
           </div>
@@ -163,61 +148,61 @@ <h2 id="products-title">The same operators ship outside the agent stack.</h2>
 
       <section class="slide" id="range" aria-labelledby="range-title">
         <div class="slide-inner">
-          <div class="slide-heading compact-heading">
+          <div class="slide-heading compact-heading" data-reveal>
             <div><p class="kicker">05 / Selected range</p><h2 id="range-title">Breadth, with honest labels.</h2></div>
             <p>Selected current work across agent infrastructure, open research, onchain systems, developer tools, and evaluated experiments. Maturity labels are deliberate.</p>
           </div>
-          <div class="range-grid">
-            <a href="https://ohl.arca.computer/"><span>Open research · intake live</span><strong>Open Hardware Lab</strong><p>Inventory-driven Linux, hardware, and agent-workload research with public provenance, methods, expenses, and failures.</p></a>
-            <a href="https://web3.arca.computer/"><span>Live portfolio index</span><strong>Web3 field index</strong><p>Farcaster, Base, identity, payment, data, and node work gathered into one evidence-led public surface.</p></a>
-            <a href="https://a3stack.arcabot.ai/"><span>Early public SDK + CLI</span><strong>A3Stack</strong><p>Composable identity, discovery, x402 payments, MCP tools, and account rails for agents.</p></a>
-            <a href="https://github.com/arcacomputer/headlong-agent-findings"><span>Sanitized research</span><strong>Persistent agency findings</strong><p>Failure modes and bounded design lessons from testing a continuously running agent harness.</p></a>
-            <a href="https://github.com/felirami/mayday"><span>Hackathon · evaluated</span><strong>Mayday</strong><p>Six-agent multimodal incident swarm tested across ten graded scenarios.</p></a>
-            <a href="https://github.com/felirami/scratch8"><span>Systems foundation</span><strong>SCRATCH-8</strong><p>A portable Rust fantasy console with a no_std core and hand-built graphics/audio.</p></a>
-            <a href="https://github.com/arcabotai/miniforge"><span>Artifact builder</span><strong>MiniForge</strong><p>Farcaster Mini App builder producing downloadable Next.js starter kits.</p></a>
-            <a href="https://github.com/arcacomputer/clueside"><span>Open-source browser tool</span><strong>Clueside</strong><p>Local browser-side AI-image signals with no image uploads and an explicit evidence boundary.</p></a>
+          <div class="range-grid" data-reveal-stagger>
+            <a class="glow" href="https://ohl.arca.computer/"><span>Open research · intake live</span><strong>Open Hardware Lab</strong><p>Inventory-driven Linux, hardware, and agent-workload research with public provenance, methods, expenses, and failures.</p></a>
+            <a class="glow" href="https://web3.arca.computer/"><span>Live portfolio index</span><strong>Web3 field index</strong><p>Farcaster, Base, identity, payment, data, and node work gathered into one evidence-led public surface.</p></a>
+            <a class="glow" href="https://a3stack.arcabot.ai/"><span>Early public SDK + CLI</span><strong>A3Stack</strong><p>Composable identity, discovery, x402 payments, MCP tools, and account rails for agents.</p></a>
+            <a class="glow" href="https://github.com/arcacomputer/headlong-agent-findings"><span>Sanitized research</span><strong>Persistent agency findings</strong><p>Failure modes and bounded design lessons from testing a continuously running agent harness.</p></a>
+            <a class="glow" href="https://github.com/felirami/mayday"><span>Hackathon · evaluated</span><strong>Mayday</strong><p>Six-agent multimodal incident swarm tested across ten graded scenarios.</p></a>
+            <a class="glow" href="https://github.com/felirami/scratch8"><span>Systems foundation</span><strong>SCRATCH-8</strong><p>A portable Rust fantasy console with a no_std core and hand-built graphics/audio.</p></a>
+            <a class="glow" href="https://github.com/arcabotai/miniforge"><span>Artifact builder</span><strong>MiniForge</strong><p>Farcaster Mini App builder producing downloadable Next.js starter kits.</p></a>
+            <a class="glow" href="https://github.com/arcacomputer/clueside"><span>Open-source browser tool</span><strong>Clueside</strong><p>Local browser-side AI-image signals with no image uploads and an explicit evidence boundary.</p></a>
           </div>
         </div>
       </section>
 
       <section class="slide" id="proof" aria-labelledby="proof-title">
         <div class="slide-inner proof-layout">
-          <div>
+          <div data-reveal>
             <p class="kicker">06 / Public proof</p>
             <h2 id="proof-title">The work leaves receipts.</h2>
             <p class="big-copy">A bootstrap story is cheap. Public source, live products, reproducible tests, usage, and explicit failure boundaries are harder to fake.</p>
           </div>
-          <div class="metrics" role="group" aria-label="Current public engineering metrics">
-            <a href="https://oss.arcabot.ai/"><strong>75</strong><span>Public, non-fork repositories: 11 company · 31 agent · 33 founder</span></a>
-            <a href="https://www.npmjs.com/package/clawfix"><strong>2,051+</strong><span>ClawFix npm downloads since February 22, 2026</span></a>
-            <a href="https://github.com/arcabotai/clawfix"><strong>49</strong><span>Deterministic ClawFix detectors in the public package and source</span></a>
-            <a href="https://ohl.arca.computer/"><strong>Open</strong><span>Hardware intake, methodology, ledger policy, and research queue</span></a>
+          <div class="metrics" role="group" aria-label="Current public engineering metrics" data-reveal-stagger>
+            <a class="glow" href="https://oss.arcabot.ai/"><strong data-count="75">75</strong><span>Public, non-fork repositories: 11 company · 31 agent · 33 founder</span></a>
+            <a class="glow" href="https://www.npmjs.com/package/clawfix"><strong data-count="2051" data-suffix="+">2,051+</strong><span>ClawFix npm downloads since February 22, 2026</span></a>
+            <a class="glow" href="https://github.com/arcabotai/clawfix"><strong data-count="49">49</strong><span>Deterministic ClawFix detectors in the public package and source</span></a>
+            <a class="glow" href="https://ohl.arca.computer/"><strong>Open</strong><span>Hardware intake, methodology, ledger policy, and research queue</span></a>
           </div>
-          <div class="proof-links">
+          <div class="proof-links" data-reveal-stagger>
             <a href="https://oss.arcabot.ai/">OSS index ↗</a>
             <a href="https://web3.arca.computer/">Web3 field index ↗</a>
             <a href="https://github.com/arcacomputer">Company GitHub ↗</a>
             <a href="https://github.com/arcabotai">Agent GitHub ↗</a>
             <a href="https://github.com/felirami">Founder GitHub ↗</a>
           </div>
-          <p class="as-of">Metrics and public status verified August 30, 2026. Broken or unavailable direct evidence is not counted as live.</p>
+          <p class="as-of" data-reveal>Metrics and public status verified August 30, 2026. Broken or unavailable direct evidence is not counted as live.</p>
         </div>
       </section>
 
       <section class="slide" id="system" aria-labelledby="system-title">
         <div class="slide-inner system-layout">
-          <div>
+          <div data-reveal>
             <p class="kicker">07 / The compounding system</p>
             <h2 id="system-title">Each project makes the system more capable.</h2>
             <p class="big-copy">Products create real incidents, edge cases, and user feedback. Arca turns those lessons into runtime adapters, tests, repair patterns, reusable agent skills, operator tools, and upstream work.</p>
           </div>
-          <ol class="system-loop">
-            <li><span>01</span><strong>Observe</strong><p>Live products expose concrete bugs, needs, and operational friction.</p></li>
-            <li><span>02</span><strong>Encode</strong><p>Fixes become tests, diagnostics, agent skills, and bounded workflows.</p></li>
-            <li><span>03</span><strong>Reuse</strong><p>Knowledge moves across products instead of dying in one repository.</p></li>
-            <li><span>04</span><strong>Publish</strong><p>Useful results ship as products, releases, tools, and upstream work.</p></li>
+          <ol class="system-loop" data-reveal-stagger>
+            <li class="glow"><span>01</span><strong>Observe</strong><p>Live products expose concrete bugs, needs, and operational friction.</p></li>
+            <li class="glow"><span>02</span><strong>Encode</strong><p>Fixes become tests, diagnostics, agent skills, and bounded workflows.</p></li>
+            <li class="glow"><span>03</span><strong>Reuse</strong><p>Knowledge moves across products instead of dying in one repository.</p></li>
+            <li class="glow"><span>04</span><strong>Publish</strong><p>Useful results ship as products, releases, tools, and upstream work.</p></li>
           </ol>
-          <div class="system-focus">
+          <div class="system-focus" data-reveal-stagger>
             <p><span>Agent infrastructure</span><strong>Persistent runtimes · durable memory · working identity · multi-runtime portability</strong></p>
             <p><span>Products + tools</span><strong>ClawFix reliability · Castaway live systems · Castora · A3Stack · Hypersnap Doctor</strong></p>
             <p><span>Research</span><strong>Open Hardware Lab · persistent-agency experiments · cross-platform verification · public OSS</strong></p>
@@ -227,27 +212,33 @@ <h2 id="system-title">Each project makes the system more capable.</h2>
 
       <section class="slide ask" id="work" aria-labelledby="work-title">
         <div class="slide-inner ask-layout">
-          <div>
+          <div data-reveal>
             <p class="kicker">08 / Work with Arca</p>
             <h2 id="work-title">Bring Arca a hard, real problem.</h2>
             <p class="lead">Arca works with infrastructure providers, open-source maintainers, hardware companies, and product teams that want agent workflows tested against real systems, not benchmark theater.</p>
           </div>
-          <div class="ask-card">
+          <div class="ask-card" data-reveal>
             <p><span>Infrastructure</span><strong>Agent runtimes · sandboxes · storage · communications · design partnerships</strong></p>
             <p><span>Open source</span><strong>Diagnostics · cross-platform verification · evidence-backed fixes</strong></p>
             <p><span>Products + research</span><strong>Private agent pilots · Farcaster · games · open hardware compatibility</strong></p>
             <p><span>Company</span><strong>Arca Computer, Inc. · Santiago, Chile</strong></p>
           </div>
-          <div class="ask-actions">
+          <div class="ask-actions" data-reveal-stagger>
             <a class="button button-primary" href="mailto:contact@arca.computer">contact@arca.computer ↗</a>
             <a class="button" href="https://arca.computer/">arca.computer ↗</a>
             <a class="button" href="https://github.com/arcacomputer">github.com/arcacomputer ↗</a>
           </div>
-          <p class="closing">The company is the computer.</p>
+          <p class="closing" data-reveal>The company is the computer.</p>
         </div>
       </section>
     </main>
 
-    <script src="/deck/deck.js" defer></script>
-  </body>
-</html>
+    <script>
+      import { initMotion } from '../scripts/motion';
+      import { mountSignalBoard } from '../scripts/signal-board';
+
+      initMotion();
+      const board = document.querySelector<HTMLElement>('.signal-board');
+      if (board) mountSignalBoard(board);
+    </script>
+</BaseLayout>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index fce3368..127d7cb 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -112,7 +112,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
         </div>
 
         <div class="work-grid" data-reveal-stagger>
-          <article class="work-card work-card-featured">
+          <article class="work-card work-card-featured glow">
             <div class="card-topline">
               <span>Primary product</span>
               <span class="status-pill" data-state="open">MIT licensed</span>
@@ -126,7 +126,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
             <a class="card-link" href="https://clawfix.dev/">Run diagnostics <span aria-hidden="true">↗</span></a>
           </article>
 
-          <article class="work-card work-card-featured">
+          <article class="work-card work-card-featured glow">
             <div class="card-topline">
               <span>Supporting infrastructure</span>
               <span class="status-pill" data-state="open">Open source</span>
@@ -140,7 +140,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
             <a class="card-link" href="https://a3stack.arcabot.ai/">Open A3Stack <span aria-hidden="true">↗</span></a>
           </article>
 
-          <article class="work-card">
+          <article class="work-card glow">
             <div class="card-topline">
               <span>Playable world</span>
               <span class="status-pill" data-state="live">Live</span>
@@ -151,7 +151,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
             <a class="card-link" href="https://castaway.social/world">Visit the island <span aria-hidden="true">↗</span></a>
           </article>
 
-          <article class="work-card">
+          <article class="work-card glow">
             <div class="card-topline">
               <span>Farcaster client</span>
               <span class="status-pill" data-state="beta">Public beta</span>
@@ -162,7 +162,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
             <a class="card-link" href="https://castora.social/">Open Castora <span aria-hidden="true">↗</span></a>
           </article>
 
-          <article class="work-card">
+          <article class="work-card glow">
             <div class="card-topline">
               <span>Node operations</span>
               <span class="status-pill" data-state="open">Independent tooling</span>
@@ -187,7 +187,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
           </div>
         </div>
 
-        <div class="signal-map" role="img" aria-label="Human direction flows through specialist agent execution to a working public artifact" data-reveal>
+        <div class="signal-map" role="img" aria-label="Human direction flows through specialist agent execution to a working public artifact" data-reveal data-draw>
           <div class="signal-copy signal-copy-start">
             <span>Input / 001</span>
             <strong>Human direction</strong>
@@ -235,7 +235,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
         </div>
 
         <div class="agent-grid" data-reveal-stagger>
-          <article>
+          <article class="glow">
             <div class="agent-head">
               <span class="agent-code">AR / 01</span>
               <svg class="sigil" viewBox="0 0 28 28" aria-hidden="true" focusable="false">
@@ -247,7 +247,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
             <strong>Primary operator</strong>
             <p>Strategy, product direction, and durable execution across the company.</p>
           </article>
-          <article>
+          <article class="glow">
             <div class="agent-head">
               <span class="agent-code">CD / 02</span>
               <svg class="sigil" viewBox="0 0 28 28" aria-hidden="true" focusable="false">
@@ -259,7 +259,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
             <strong>Scout + builder</strong>
             <p>Experiments, implementation, verification, and deployment.</p>
           </article>
-          <article>
+          <article class="glow">
             <div class="agent-head">
               <span class="agent-code">AD / 03</span>
               <svg class="sigil" viewBox="0 0 28 28" aria-hidden="true" focusable="false">
@@ -271,7 +271,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
             <strong>Knowledge steward</strong>
             <p>Source-backed guidance for Hypersnap, Snapchain, and Farcaster-fork builders.</p>
           </article>
-          <article>
+          <article class="glow">
             <div class="agent-head">
               <span class="agent-code">ME / 04</span>
               <svg class="sigil" viewBox="0 0 28 28" aria-hidden="true" focusable="false">
@@ -283,7 +283,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
             <strong>OSS release steward</strong>
             <p>Upstream reconnaissance, proof packets, and merge-quality work.</p>
           </article>
-          <article>
+          <article class="glow">
             <div class="agent-head">
               <span class="agent-code">CO / 05</span>
               <svg class="sigil" viewBox="0 0 28 28" aria-hidden="true" focusable="false">
@@ -316,19 +316,19 @@ import BaseLayout from '../layouts/BaseLayout.astro';
         </div>
 
         <div class="metrics-strip" aria-label="Current public engineering metrics" data-reveal-stagger>
-          <a href="https://oss.arcabot.ai/">
+          <a class="glow" href="https://oss.arcabot.ai/">
             <strong data-count="75">75</strong>
             <span>Public, non-fork repositories: 11 company · 31 agent · 33 founder</span>
           </a>
-          <a href="https://www.npmjs.com/package/clawfix">
+          <a class="glow" href="https://www.npmjs.com/package/clawfix">
             <strong data-count="2051" data-suffix="+">2,051+</strong>
             <span>ClawFix npm downloads since February 22, 2026</span>
           </a>
-          <a href="https://github.com/arcabotai/clawfix">
+          <a class="glow" href="https://github.com/arcabotai/clawfix">
             <strong data-count="49">49</strong>
             <span>Deterministic ClawFix detectors in the public package and source</span>
           </a>
-          <a href="https://github.com/arcabotai/arca-openclaw-contributions">
+          <a class="glow" href="https://github.com/arcabotai/arca-openclaw-contributions">
             <strong>Open</strong>
             <span>Upstream ledger with pull requests, reviews, and exact merge states</span>
           </a>
@@ -336,16 +336,16 @@ import BaseLayout from '../layouts/BaseLayout.astro';
         <p class="as-of" data-reveal>Metrics and public status verified August 30, 2026. Unavailable evidence is not counted as live.</p>
 
         <div class="proof-grid" data-reveal-stagger>
-          <a href="https://oss.arcabot.ai/">
+          <a class="glow" href="https://oss.arcabot.ai/">
             <span>01</span><strong>OSS index</strong><small>Licensed repositories, ownership labels, and maintenance boundaries.</small><i aria-hidden="true">↗</i>
           </a>
-          <a href="https://github.com/arcabotai/arca-openclaw-contributions">
+          <a class="glow" href="https://github.com/arcabotai/arca-openclaw-contributions">
             <span>02</span><strong>Upstream ledger</strong><small>Pull requests, reviews, merge states, and exact public evidence.</small><i aria-hidden="true">↗</i>
           </a>
-          <a href="https://github.com/arcabotai">
+          <a class="glow" href="https://github.com/arcabotai">
             <span>03</span><strong>GitHub</strong><small>Source, releases, packages, experiments, and working artifacts.</small><i aria-hidden="true">↗</i>
           </a>
-          <a href="https://arcabot.ai/">
+          <a class="glow" href="https://arcabot.ai/">
             <span>04</span><strong>Arca ecosystem</strong><small>The wider product catalogue, public agent system, and onchain identity.</small><i aria-hidden="true">↗</i>
           </a>
         </div>
@@ -374,7 +374,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
             <div><dt>Primary work</dt><dd>Products · developer infrastructure · open source</dd></div>
           </dl>
 
-          <article class="founder-card" data-reveal>
+          <article class="founder-card glow" data-reveal>
             <span class="monogram" aria-hidden="true">LFA</span>
             <p class="section-index">Founder / 001</p>
             <h3>Luis Felipe Abarca</h3>
diff --git a/src/scripts/motion.ts b/src/scripts/motion.ts
index 14585f8..96eba32 100644
--- a/src/scripts/motion.ts
+++ b/src/scripts/motion.ts
@@ -1,14 +1,15 @@
 /**
- * Motion layer for the Arca Computer homepage.
+ * Motion layer shared by the Arca Computer pages.
  *
- * Everything here is progressive enhancement: the page is fully readable with
- * this script absent, and every hidden-until-revealed rule in styles.css is
+ * Everything here is progressive enhancement: each page is fully readable with
+ * this script absent, and every hidden-until-revealed rule in motion.css is
  * scoped to `html.js` + `prefers-reduced-motion: no-preference`.
  */
 
 const REVEAL_SELECTOR = '[data-reveal], [data-reveal-line], [data-reveal-stagger] > *';
-const HIGHLIGHT_SELECTOR =
-  '.work-card, .proof-grid > a, .agent-grid > article, .founder-card, .metrics-strip > a';
+const HIGHLIGHT_SELECTOR = '.glow';
+const HEADER_SELECTOR = '.masthead, .deck-header';
+const SECTION_LINK_SELECTOR = '.masthead nav a[href^="#"], .rail a[href^="#"]';
 const STAGGER_STEP_MS = 70;
 const REVEAL_MS = 800;
 
@@ -50,11 +51,12 @@ function setupReveal(): void {
   targets.forEach((el) => observer.observe(el));
 }
 
-function setupMasthead(): void {
-  const masthead = document.querySelector<HTMLElement>('.masthead');
-  if (!masthead) return;
+/** Condensed header, scroll-progress hairline, and the active section link. */
+function setupHeader(): void {
+  const header = document.querySelector<HTMLElement>(HEADER_SELECTOR);
+  const links = Array.from(document.querySelectorAll<HTMLAnchorElement>(SECTION_LINK_SELECTOR));
+  if (!header && links.length === 0) return;
 
-  const links = Array.from(masthead.querySelectorAll<HTMLAnchorElement>('nav a[href^="#"]'));
   const sections = links
     .map((link) => ({ link, section: document.getElementById(link.hash.slice(1)) }))
     .filter((entry): entry is { link: HTMLAnchorElement; section: HTMLElement } => entry.section !== null);
@@ -63,9 +65,11 @@ function setupMasthead(): void {
   const update = () => {
     scheduled = false;
     const y = window.scrollY;
-    const max = document.documentElement.scrollHeight - window.innerHeight;
-    masthead.classList.toggle('is-condensed', y > 24);
-    masthead.style.setProperty('--progress', max > 0 ? Math.min(1, y / max).toFixed(4) : '0');
+    if (header) {
+      const max = document.documentElement.scrollHeight - window.innerHeight;
+      header.classList.toggle('is-condensed', y > 24);
+      header.style.setProperty('--progress', max > 0 ? Math.min(1, y / max).toFixed(4) : '0');
+    }
 
     // The active section is the last one whose top has passed 40% of the viewport.
     const probe = window.innerHeight * 0.4;
@@ -194,58 +198,62 @@ function screenLength(path: SVGPathElement): number {
   return total;
 }
 
-function setupSignalMap(): void {
-  const map = document.querySelector<HTMLElement>('.signal-map');
-  if (!map) return;
-  const paths = Array.from(map.querySelectorAll<SVGPathElement>('.signal-line, .signal-glow'));
-  const canDraw =
-    paths.length > 0 &&
-    !reduceMotion.matches &&
-    'IntersectionObserver' in window &&
-    typeof paths[0].getTotalLength === 'function';
-
-  if (!canDraw) {
-    map.classList.add('is-drawn');
-    return;
-  }
-
-  const prime = () => {
-    for (const path of paths) {
-      const length = Math.ceil(screenLength(path)) + 2;
-      path.style.strokeDasharray = `${length}`;
-      path.style.strokeDashoffset = `${length}`;
+/** Every [data-draw] container draws its SVG paths on when it scrolls into view. */
+function setupDrawings(): void {
+  const containers = Array.from(document.querySelectorAll<HTMLElement>('[data-draw]'));
+  if (containers.length === 0) return;
+
+  for (const container of containers) {
+    const paths = Array.from(container.querySelectorAll<SVGPathElement>('path'));
+    const canDraw =
+      paths.length > 0 &&
+      !reduceMotion.matches &&
+      'IntersectionObserver' in window &&
+      typeof paths[0].getTotalLength === 'function';
+
+    if (!canDraw) {
+      container.classList.add('is-drawn');
+      continue;
     }
-    map.classList.add('is-primed');
-  };
-  prime();
 
-  const observer = new IntersectionObserver(
-    (entries) => {
-      if (!entries.some((entry) => entry.isIntersecting)) return;
-      observer.disconnect();
-      // Re-measure right before drawing in case the layout changed since priming.
-      prime();
-      window.requestAnimationFrame(() => {
-        map.classList.add('is-drawn');
-        for (const path of paths) path.style.strokeDashoffset = '0';
-      });
-      window.setTimeout(() => {
-        for (const path of paths) {
-          path.style.strokeDasharray = '';
-          path.style.strokeDashoffset = '';
-        }
-      }, 2600);
-    },
-    { threshold: 0.35 },
-  );
-  observer.observe(map);
+    const prime = () => {
+      for (const path of paths) {
+        const length = Math.ceil(screenLength(path)) + 2;
+        path.style.strokeDasharray = `${length}`;
+        path.style.strokeDashoffset = `${length}`;
+      }
+      container.classList.add('is-primed');
+    };
+    prime();
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (!entries.some((entry) => entry.isIntersecting)) return;
+        observer.disconnect();
+        // Re-measure right before drawing in case the layout changed since priming.
+        prime();
+        window.requestAnimationFrame(() => {
+          container.classList.add('is-drawn');
+          for (const path of paths) path.style.strokeDashoffset = '0';
+        });
+        window.setTimeout(() => {
+          for (const path of paths) {
+            path.style.strokeDasharray = '';
+            path.style.strokeDashoffset = '';
+          }
+        }, 3600);
+      },
+      { threshold: 0.35 },
+    );
+    observer.observe(container);
+  }
 }
 
 export function initMotion(): void {
   setupReveal();
-  setupMasthead();
+  setupHeader();
   setupPointerHighlight();
   setupMagneticButtons();
   setupCounters();
-  setupSignalMap();
+  setupDrawings();
 }
diff --git a/tests/site-contract.test.mjs b/tests/site-contract.test.mjs
index 50614c5..ca245ac 100644
--- a/tests/site-contract.test.mjs
+++ b/tests/site-contract.test.mjs
@@ -8,7 +8,9 @@ test('Astro emits a static site for the canonical domain', async () => {
   const config = await read('astro.config.mjs');
   assert.match(config, /site:\s*['"]https:\/\/arca\.computer['"]/);
   assert.match(config, /output:\s*['"]static['"]/);
-  assert.match(config, /sitemap\(\{\s*customPages:\s*\['https:\/\/arca\.computer\/deck'\]\s*\}\)/);
+  assert.match(config, /trailingSlash:\s*['"]never['"]/);
+  assert.match(config, /sitemap\(\)/);
+  assert.match(await read('src/pages/deck.astro'), /canonicalPath="\/deck"/);
 });
 
 test('Cloudflare publishes only dist with no provider preview origins', async () => {
@@ -56,7 +58,7 @@ test('migration removes Vercel configuration and includes a custom 404', async (
 });
 
 test('the company deck reflects the current August 30 product state', async () => {
-  const deck = await read('public/deck/index.html');
+  const deck = await read('src/pages/deck.astro');
   const styles = await read('public/deck/styles.css');
 
   for (const expected of [
@@ -95,20 +97,38 @@ test('the company deck reflects the current August 30 product state', async () =
   assert.match(styles, /\.deck-header nav a\s*\{[^}]*min-height:\s*24px/s);
 });
 
+test('the deck shares the motion layer and keeps print and reduced motion safe', async () => {
+  const deck = await read('src/pages/deck.astro');
+  const styles = await read('public/deck/styles.css');
+  const motion = await read('public/motion.css');
+
+  assert.match(deck, /stylesheet="\/deck\/styles\.css"/);
+  assert.match(deck, /class="signal-board" aria-hidden="true"/);
+  assert.match(deck, /class="cover-diagram" aria-hidden="true" data-draw/);
+  assert.match(deck, /data-count="2051" data-suffix="\+">2,051\+</);
+  assert.match(deck, /import \{ initMotion \} from '\.\.\/scripts\/motion'/);
+  assert.match(styles, /html\.js \.cover h1 \.line > span/);
+  assert.match(styles, /\.signal-board \{ display: none; \}/);
+  assert.match(motion, /@media print \{[\s\S]*\[data-reveal\][\s\S]*opacity: 1 !important/);
+  assert.match(motion, /@media \(prefers-reduced-motion: reduce\)/);
+});
+
 const literal = (value) => new RegExp(value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'));
 
 test('the homepage motion layer is progressive and reduced-motion aware', async () => {
   const layout = await read('src/layouts/BaseLayout.astro');
   const page = await read('src/pages/index.astro');
   const styles = await read('public/styles.css');
+  const motion = await read('public/motion.css');
 
   assert.match(layout, /documentElement\.classList\.add\('js'\)/);
+  assert.match(layout, /<link rel="stylesheet" href="\/motion\.css" \/>/);
   assert.match(layout, /rel="preconnect" href="https:\/\/fonts\.gstatic\.com"/);
   assert.match(layout, /fonts\.googleapis\.com\/css2\?family=DM\+Mono/);
   assert.doesNotMatch(styles, /@import/);
   assert.match(styles, /@media \(prefers-reduced-motion: no-preference\)/);
-  assert.match(styles, /@media \(prefers-reduced-motion: reduce\)/);
-  assert.match(styles, /html\.js \[data-reveal\]/);
+  assert.match(motion, /@media \(prefers-reduced-motion: reduce\)/);
+  assert.match(motion, /html\.js \[data-reveal\]/);
   assert.match(page, /class="signal-board" aria-hidden="true"/);
   assert.match(page, /<h1 id="hero-title">[\s\S]*The company[\s\S]*is the computer\.[\s\S]*<\/h1>/);
   assert.match(page, /import \{ initMotion \} from '\.\.\/scripts\/motion'/);
@@ -117,7 +137,7 @@ test('the homepage motion layer is progressive and reduced-motion aware', async
 
 test('the homepage links to the deck and repeats the deck metrics exactly', async () => {
   const page = await read('src/pages/index.astro');
-  const deck = await read('public/deck/index.html');
+  const deck = await read('src/pages/deck.astro');
 
   assert.match(page, /<nav aria-label="Primary navigation">[\s\S]*href="\/deck"[\s\S]*<\/nav>/);
   assert.match(page, /class="button button-secondary" href="\/deck"/);