diff --git a/app.js b/app.js
index f1563b3..febd0fc 100644
--- a/app.js
+++ b/app.js
@@ -62,6 +62,7 @@ import {
 } from "./src/deployOutcome.js";
 import { buildFlutterFlowSyncMetadata } from "./src/flutterFlowSyncMetadata.js";
 import { initHeroMarkField } from "./src/heroMarkField.js";
+import { createPipelineLogoLoop } from "./src/logoMotion.js";
 import {
   applyDependencyOverrides,
   mergeDependenciesIntoYaml,
@@ -5684,6 +5685,11 @@ document.addEventListener("DOMContentLoaded", async () => {
   // Decorative hero mark field (WebGL with 2D fallback); no dependency on generation state.
   window.__heroField = initHeroMarkField();
 
+  // Decorative pipeline logo loop (120 s authored mark motion in the pipeline
+  // arena). Self-managed: pauses when hidden/offscreen/reduced-motion and is
+  // cleanup-safe on view transition; completion never depends on it.
+  window.__pipelineLogo = createPipelineLogoLoop();
+
   await initializeAuth();
   handleCheckoutRedirect();
   await fetchSubscription();
diff --git a/e2e/stu390-logo-loop.spec.js b/e2e/stu390-logo-loop.spec.js
new file mode 100644
index 0000000..c5bf199
--- /dev/null
+++ b/e2e/stu390-logo-loop.spec.js
@@ -0,0 +1,342 @@
+import { test, expect } from "@playwright/test";
+import {
+  applyDefaultRoutes,
+  ENDPOINTS,
+  freeSubscription,
+  guestIdentity,
+  oneArtifact,
+  quotaExhausted,
+  reviewPassed,
+} from "./fixtures/apiFixtures.js";
+
+/**
+ * STU-390 — the authored logo animation in the pipeline arena.
+ *
+ * The mark is DECORATIVE: pipeline completion depends only on real backend
+ * events, never on this animation. These tests drive the real pipeline stage
+ * machine (hermetic fixtures, no timers gating a stage) alongside the loop,
+ * and separately measure the loop's rendering lifecycle across hidden-tab,
+ * CSS-hidden (display:none) and viewport-offscreen states. `offsetParent`
+ * alone is NOT proof of viewport visibility, so the offscreen case is checked
+ * through the arena's actual on-screen geometry, not just a hidden attribute.
+ */
+
+const DESKTOP = { width: 1440, height: 900 };
+
+const STAGE_RESPONSES = {
+  architect: oneArtifact,
+  generator: oneArtifact,
+  review: reviewPassed,
+};
+
+function deferred() {
+  let resolve;
+  const promise = new Promise((r) => {
+    resolve = r;
+  });
+  return { promise, resolve };
+}
+
+function stepOf(route) {
+  try {
+    return JSON.parse(route.request().postData() || "{}").step || "";
+  } catch {
+    return "";
+  }
+}
+
+async function routePipelineStages(page, { hold = [], responses = {} } = {}) {
+  const gates = Object.fromEntries(hold.map((s) => [s, deferred()]));
+  await page.route(ENDPOINTS.pipeline, async (route) => {
+    const step = stepOf(route);
+    if (gates[step]) await gates[step].promise;
+    const entry = responses[step] ?? STAGE_RESPONSES[step];
+    if (entry === "abort") {
+      await route.abort();
+      return;
+    }
+    await route.fulfill(typeof entry === "function" ? entry() : entry);
+  });
+  return { release: (s) => gates[s].resolve() };
+}
+
+async function openHome(page, overrides = {}) {
+  await page.addInitScript(() => {
+    localStorage.setItem("hasSeenWalkthrough", "true");
+  });
+  await applyDefaultRoutes(page, {
+    [ENDPOINTS.identity]: guestIdentity(),
+    [ENDPOINTS.getSubscription]: freeSubscription(),
+    ...overrides,
+  });
+  await page.goto("/");
+  await expect(page.locator("#pipeline-input")).toBeVisible();
+}
+
+const running = (page) => page.evaluate(() => window.__pipelineLogo?.isRunning() === true);
+
+// Counts only the logo loop's own painted frames over `ms`. This isolates the
+// module from every other requestAnimationFrame consumer on the page (the hero
+// mark field animates independently), so a "still turning over" loop cannot be
+// mistaken for, or hidden by, unrelated page animation.
+async function framesIn(page, ms) {
+  const before = await page.evaluate(() => window.__pipelineLogo?.frameCount() ?? 0);
+  await page.waitForTimeout(ms);
+  const after = await page.evaluate(() => window.__pipelineLogo?.frameCount() ?? 0);
+  return after - before;
+}
+
+const currentTime = (page) => page.evaluate(() => window.__pipelineLogo?.currentTime() ?? -1);
+
+// Painted frames over `ms` measured from a steady state: a fresh loop is given
+// a warm-up before the window opens, so two rate measurements are comparable.
+// A leaked second loop would paint ~2x the frames in the same window.
+async function steadyFramesIn(page, ms = 500) {
+  await page.waitForTimeout(250);
+  const before = await page.evaluate(() => window.__pipelineLogo?.frameCount() ?? 0);
+  await page.waitForTimeout(ms);
+  const after = await page.evaluate(() => window.__pipelineLogo?.frameCount() ?? 0);
+  return after - before;
+}
+
+// Bring the pipeline arena onto screen without a backend run. The progress
+// panel lives in #generation-stage (hidden until a run begins) inside
+// #main-stage-container (opacity 0 unless .visible). showPipelineProgress
+// flips all three; we mirror that so the mark truly renders for the test.
+async function revealPipeline(page) {
+  await page.evaluate(() => {
+    const stage = document.getElementById("generation-stage");
+    stage.hidden = false;
+    stage.inert = false;
+    stage.classList.add("is-active");
+    document.getElementById("main-stage-container").classList.add("visible");
+    document.getElementById("pipeline-progress").classList.add("visible");
+  });
+  await expect.poll(() => running(page), { timeout: 3000 }).toBe(true);
+}
+
+async function hidePipeline(page) {
+  await page.evaluate(() => {
+    document.getElementById("pipeline-progress").classList.remove("visible");
+  });
+  await expect.poll(() => running(page), { timeout: 3000 }).toBe(false);
+}
+
+test.describe("Decorative mark lifecycle in the pipeline arena", () => {
+  test("mark exists in the pipeline arena, is decorative and animates when the pipeline shows", async ({ page }) => {
+    await page.setViewportSize(DESKTOP);
+    await openHome(page);
+
+    const arena = page.locator(".pipeline-glyph.logo-loop");
+    await expect(arena).toHaveCount(1);
+    // Decorative: excluded from the accessibility tree (aria-hidden, not focusable).
+    await expect(arena).toHaveAttribute("aria-hidden", "true");
+    const reachable = await page.evaluate(() => {
+      const mark = document.querySelector(".pipeline-glyph.logo-loop");
+      const focusable = mark.querySelectorAll('a[href], button, [tabindex], input, select, textarea');
+      return focusable.length;
+    });
+    expect(reachable, "decorative mark must expose no focusable control").toBe(0);
+
+    // Hidden by default (pipeline not running) — no loop.
+    await expect.poll(() => running(page), { timeout: 3000 }).toBe(false);
+
+    await revealPipeline(page);
+    // While visible it actively renders: a genuine frame metric from the module.
+    const frames = await framesIn(page, 500);
+    expect(frames, "the mark should animate while its arena is on screen").toBeGreaterThan(5);
+  });
+
+  test("hidden browser tab stops rendering and returning resumes a single loop", async ({ page }) => {
+    await page.setViewportSize(DESKTOP);
+    await openHome(page);
+    await revealPipeline(page);
+
+    const framesOn = await steadyFramesIn(page);
+    expect(framesOn).toBeGreaterThan(5);
+
+    // Simulate the tab being hidden (document.hidden + visibilitychange).
+    await page.evaluate(() => {
+      Object.defineProperty(document, "hidden", { configurable: true, get: () => true });
+      document.dispatchEvent(new Event("visibilitychange"));
+    });
+    await expect.poll(() => running(page), { timeout: 3000 }).toBe(false);
+    const framesHidden = await framesIn(page, 500);
+    expect(framesHidden, "no logo frames while the tab is hidden").toBe(0);
+
+    // Restore visibility; the loop must resume, not accumulate a second loop.
+    await page.evaluate(() => {
+      Object.defineProperty(document, "hidden", { configurable: true, get: () => false });
+      document.dispatchEvent(new Event("visibilitychange"));
+    });
+    await expect.poll(() => running(page), { timeout: 3000 }).toBe(true);
+    const framesReenter = await steadyFramesIn(page);
+    expect(framesReenter, "a restored loop should stay a single loop").toBeGreaterThan(5);
+    // If a second loop had leaked in, the painted-frame rate would ~double.
+    expect(framesReenter).toBeLessThan(framesOn * 1.6);
+  });
+
+  test("CSS-hidden pipeline (display:none) stops rendering with no raf leak", async ({ page }) => {
+    await page.setViewportSize(DESKTOP);
+    await openHome(page);
+    await revealPipeline(page);
+    await expect.poll(() => running(page)).toBe(true);
+    const framesOn = await steadyFramesIn(page);
+    expect(framesOn).toBeGreaterThan(5);
+
+    // display:none -> offsetParent null. This is the CSS-hidden case.
+    await hidePipeline(page);
+    const framesHidden = await framesIn(page, 500);
+    expect(framesHidden, "no logo frames once the pipeline is display:none").toBe(0);
+
+    // Re-enter: still a single loop, never a doubled one.
+    await revealPipeline(page);
+    const framesBack = await steadyFramesIn(page);
+    expect(framesBack).toBeGreaterThan(5);
+    expect(framesBack).toBeLessThan(framesOn * 1.7);
+  });
+
+  test("viewport-offscreen arena stops rendering even though it is not display:none", async ({ page }) => {
+    await page.setViewportSize(DESKTOP);
+    await openHome(page);
+    await revealPipeline(page);
+    await expect.poll(() => running(page)).toBe(true);
+
+    // Move the arena out of the viewport while keeping it in layout (transform,
+    // not display:none), so offsetParent stays non-null. Only the Intersection-
+    // Observer viewport check can catch this.
+    await page.evaluate(() => {
+      document.getElementById("pipeline-progress").style.transform = "translateY(4000px)";
+    });
+    await expect.poll(() => running(page), { timeout: 3000 }).toBe(false);
+    const framesOff = await framesIn(page, 500);
+    expect(framesOff, "no logo frames once the arena is offscreen").toBe(0);
+
+    // Bring it back on screen — one loop resumes.
+    await page.evaluate(() => {
+      document.getElementById("pipeline-progress").style.transform = "none";
+    });
+    await expect.poll(() => running(page), { timeout: 3000 }).toBe(true);
+    expect(await framesIn(page, 500)).toBeGreaterThan(5);
+  });
+
+  test("live reduced-motion toggle freezes to the static rest frame and stops the loop", async ({ page }) => {
+    await page.setViewportSize(DESKTOP);
+    await openHome(page);
+    await revealPipeline(page);
+    const framesOn = await steadyFramesIn(page);
+    expect(framesOn).toBeGreaterThan(5);
+
+    await page.emulateMedia({ reducedMotion: "reduce" });
+    await expect.poll(() => running(page), { timeout: 3000 }).toBe(false);
+    const framesReduced = await framesIn(page, 500);
+    expect(framesReduced, "no logo frames under reduced motion").toBe(0);
+
+    // The clock is frozen while reduced: it must not advance while we wait.
+    const before = await currentTime(page);
+    await page.waitForTimeout(300);
+    const after = await currentTime(page);
+    expect(after).toBe(before);
+    expect(after).toBeGreaterThanOrEqual(0);
+
+    // Static rest frame is painted (browser serialises "1.000" back to "1").
+    const pieces = await page.evaluate(() => ({
+      a: parseFloat(document.querySelector(".loop-piece-a").style.opacity),
+      b: parseFloat(document.querySelector(".loop-piece-b").style.opacity),
+    }));
+    expect(pieces.a).toBe(1);
+    expect(pieces.b).toBe(1);
+
+    // Live toggle back on resumes without accumulating loops.
+    await page.emulateMedia({ reducedMotion: "no-preference" });
+    await expect.poll(() => running(page), { timeout: 3000 }).toBe(true);
+    const framesResumed = await steadyFramesIn(page);
+    expect(framesResumed).toBeGreaterThan(5);
+    expect(framesResumed).toBeLessThan(framesOn * 1.7);
+  });
+});
+
+test.describe("Progress is independent of the animation position", () => {
+  test("a run that is mid-loop still completes when the backend releases every stage", async ({ page }) => {
+    await page.setViewportSize(DESKTOP);
+    await openHome(page);
+    const pipeline = await routePipelineStages(page, { hold: ["architect", "generator", "review"] });
+
+    await page.locator("#pipeline-input").fill("A gauge widget");
+    await page.locator("#hero-send").click();
+
+    // Arena is showing and animating while the first stage is held.
+    await expect.poll(() => running(page), { timeout: 3000 }).toBe(true);
+
+    // Park the animation at a non-rest beat (t=90, the orbit). Completion must
+    // not depend on where the loop is.
+    await page.evaluate(() => window.__pipelineLogo.seek(90));
+
+    pipeline.release("architect");
+    await expect(page.locator("#pdot-1")).toHaveAttribute("data-state", "done");
+    pipeline.release("generator");
+    await expect(page.locator("#pdot-2")).toHaveAttribute("data-state", "done");
+    pipeline.release("review");
+    await expect(page.locator("#results-view")).toHaveClass(/visible/);
+
+    // With Results shown, the arena leaves the screen, so its loop must stop.
+    await expect.poll(() => running(page), { timeout: 3000 }).toBe(false);
+    const framesAfter = await framesIn(page, 500);
+    expect(framesAfter, "no logo frames after the pipeline leaves view").toBe(0);
+  });
+
+  test("a mid-loop run still fails honestly when the backend rejects a stage", async ({ page }) => {
+    await page.setViewportSize(DESKTOP);
+    await openHome(page);
+    const pipeline = await routePipelineStages(page, { hold: ["architect"], responses: { generator: quotaExhausted } });
+
+    await page.locator("#pipeline-input").fill("A gauge widget");
+    await page.locator("#hero-send").click();
+
+    await expect.poll(() => running(page), { timeout: 3000 }).toBe(true);
+    await page.evaluate(() => window.__pipelineLogo.seek(47)); // peek-a-boo beat
+
+    // Let Architect succeed; Generator then answers with a quota rejection.
+    pipeline.release("architect");
+
+    const failure = page.locator("#pipeline-failure");
+    await expect(failure).toBeVisible();
+    await expect(failure).toHaveAttribute("data-kind", "quota");
+    await expect(page.locator("#results-view")).not.toHaveClass(/visible/);
+    await expect(page.locator("#pdot-1")).toHaveAttribute("data-state", "done");
+    await expect(page.locator("#pdot-2")).toHaveAttribute("data-state", "failed");
+  });
+});
+
+test.describe("Visual review artefacts (human review, not pixel baselines)", () => {
+  for (const [name, width, height] of [
+    ["mobile", 360, 800],
+    ["desktop", 1440, 900],
+  ]) {
+    test(`captures representative beats for ${name} review`, async ({ page }, testInfo) => {
+      await page.setViewportSize({ width, height });
+      await openHome(page);
+      await revealPipeline(page);
+      // Freeze the loop so a seek paints a deterministic, stable beat.
+      await page.emulateMedia({ reducedMotion: "reduce" });
+
+      const beats = [
+        [0, "rest"],
+        [47, "peek-a-boo"],
+        [90, "orbit"],
+        [120, "rest-boundary"],
+      ];
+      for (const [beat, label] of beats) {
+        await page.evaluate((t) => window.__pipelineLogo.seek(t), beat);
+        await page.waitForTimeout(40);
+        const pageShot = testInfo.outputPath(`stu390-page-${label}-${name}.png`);
+        await page.screenshot({ path: pageShot });
+        await testInfo.attach(`page @ ${label} (${name})`, { path: pageShot });
+        // Close-up of the two-piece mark itself for brand-geometry review.
+        const markShot = testInfo.outputPath(`stu390-mark-${label}-${name}.png`);
+        await page.locator(".loop-mark").screenshot({ path: markShot });
+        await testInfo.attach(`mark @ ${label} (${name})`, { path: markShot });
+      }
+    });
+  }
+});
diff --git a/index.html b/index.html
index 8b189ef..874793b 100644
--- a/index.html
+++ b/index.html
@@ -34,6 +34,7 @@
     <link rel="stylesheet" href="/src/designTokens.css" />
     <link rel="stylesheet" href="/src/sharedControls.css" />
     <link rel="stylesheet" href="/src/heroMarkField.css" />
+    <link rel="stylesheet" href="/src/logoMotion.css" />
     <style>
       :root {
         /* Layout constants preserved until the shell change that owns them. */
@@ -3464,6 +3465,16 @@ <h3 class="text-base font-semibold text-gray-800 mb-2">Free generations used</h3
 
             <!-- Pipeline Progress View -->
             <div id="pipeline-progress" class="pipeline-progress">
+              <!-- Decorative authored two-piece mark loop (STU-390); never
+                   gates completion - progress depends only on backend events. -->
+              <div class="pipeline-glyph logo-loop" aria-hidden="true">
+                <span class="loop-shadow"></span>
+                <span class="loop-mark">
+                  <span class="loop-halo"></span>
+                  <span class="loop-piece loop-piece-a"><svg viewBox="0 0 44 44" fill="currentColor" focusable="false"><path d="M25 5H17C9.82 5 4 10.82 4 18S9.82 31 17 31H24V25H17A7 7 0 0 1 17 11H25Z"></path></svg></span>
+                  <span class="loop-piece loop-piece-b"><svg viewBox="0 0 44 44" fill="currentColor" focusable="false"><path d="M25 5H17C9.82 5 4 10.82 4 18S9.82 31 17 31H24V25H17A7 7 0 0 1 17 11H25Z" transform="rotate(180 22 22)"></path></svg></span>
+                </span>
+              </div>
               <div class="pipeline-prompt-recap">
                 <p class="pipeline-prompt-kicker">Your prompt</p>
                 <p class="pipeline-prompt-text" id="pipeline-submitted-prompt"></p>
diff --git a/screenshots/stu-390/stu390-mark-orbit-desktop.png b/screenshots/stu-390/stu390-mark-orbit-desktop.png
new file mode 100644
index 0000000..5a2ec5b
Binary files /dev/null and b/screenshots/stu-390/stu390-mark-orbit-desktop.png differ
diff --git a/screenshots/stu-390/stu390-mark-orbit-mobile.png b/screenshots/stu-390/stu390-mark-orbit-mobile.png
new file mode 100644
index 0000000..29b7abc
Binary files /dev/null and b/screenshots/stu-390/stu390-mark-orbit-mobile.png differ
diff --git a/screenshots/stu-390/stu390-mark-peek-a-boo-desktop.png b/screenshots/stu-390/stu390-mark-peek-a-boo-desktop.png
new file mode 100644
index 0000000..c3ebf21
Binary files /dev/null and b/screenshots/stu-390/stu390-mark-peek-a-boo-desktop.png differ
diff --git a/screenshots/stu-390/stu390-mark-peek-a-boo-mobile.png b/screenshots/stu-390/stu390-mark-peek-a-boo-mobile.png
new file mode 100644
index 0000000..7d006fb
Binary files /dev/null and b/screenshots/stu-390/stu390-mark-peek-a-boo-mobile.png differ
diff --git a/screenshots/stu-390/stu390-mark-rest-boundary-desktop.png b/screenshots/stu-390/stu390-mark-rest-boundary-desktop.png
new file mode 100644
index 0000000..fc757d2
Binary files /dev/null and b/screenshots/stu-390/stu390-mark-rest-boundary-desktop.png differ
diff --git a/screenshots/stu-390/stu390-mark-rest-boundary-mobile.png b/screenshots/stu-390/stu390-mark-rest-boundary-mobile.png
new file mode 100644
index 0000000..a7ff0e7
Binary files /dev/null and b/screenshots/stu-390/stu390-mark-rest-boundary-mobile.png differ
diff --git a/screenshots/stu-390/stu390-mark-rest-desktop.png b/screenshots/stu-390/stu390-mark-rest-desktop.png
new file mode 100644
index 0000000..fc757d2
Binary files /dev/null and b/screenshots/stu-390/stu390-mark-rest-desktop.png differ
diff --git a/screenshots/stu-390/stu390-mark-rest-mobile.png b/screenshots/stu-390/stu390-mark-rest-mobile.png
new file mode 100644
index 0000000..a7ff0e7
Binary files /dev/null and b/screenshots/stu-390/stu390-mark-rest-mobile.png differ
diff --git a/screenshots/stu-390/stu390-page-orbit-desktop.png b/screenshots/stu-390/stu390-page-orbit-desktop.png
new file mode 100644
index 0000000..d8449a8
Binary files /dev/null and b/screenshots/stu-390/stu390-page-orbit-desktop.png differ
diff --git a/screenshots/stu-390/stu390-page-orbit-mobile.png b/screenshots/stu-390/stu390-page-orbit-mobile.png
new file mode 100644
index 0000000..49d607d
Binary files /dev/null and b/screenshots/stu-390/stu390-page-orbit-mobile.png differ
diff --git a/screenshots/stu-390/stu390-page-peek-a-boo-desktop.png b/screenshots/stu-390/stu390-page-peek-a-boo-desktop.png
new file mode 100644
index 0000000..9b369b1
Binary files /dev/null and b/screenshots/stu-390/stu390-page-peek-a-boo-desktop.png differ
diff --git a/screenshots/stu-390/stu390-page-peek-a-boo-mobile.png b/screenshots/stu-390/stu390-page-peek-a-boo-mobile.png
new file mode 100644
index 0000000..b06156e
Binary files /dev/null and b/screenshots/stu-390/stu390-page-peek-a-boo-mobile.png differ
diff --git a/screenshots/stu-390/stu390-page-rest-boundary-desktop.png b/screenshots/stu-390/stu390-page-rest-boundary-desktop.png
new file mode 100644
index 0000000..7fd80aa
Binary files /dev/null and b/screenshots/stu-390/stu390-page-rest-boundary-desktop.png differ
diff --git a/screenshots/stu-390/stu390-page-rest-boundary-mobile.png b/screenshots/stu-390/stu390-page-rest-boundary-mobile.png
new file mode 100644
index 0000000..62f0a70
Binary files /dev/null and b/screenshots/stu-390/stu390-page-rest-boundary-mobile.png differ
diff --git a/screenshots/stu-390/stu390-page-rest-desktop.png b/screenshots/stu-390/stu390-page-rest-desktop.png
new file mode 100644
index 0000000..58f2710
Binary files /dev/null and b/screenshots/stu-390/stu390-page-rest-desktop.png differ
diff --git a/screenshots/stu-390/stu390-page-rest-mobile.png b/screenshots/stu-390/stu390-page-rest-mobile.png
new file mode 100644
index 0000000..b7c767d
Binary files /dev/null and b/screenshots/stu-390/stu390-page-rest-mobile.png differ
diff --git a/src/logoMotion.css b/src/logoMotion.css
new file mode 100644
index 0000000..b0b967b
--- /dev/null
+++ b/src/logoMotion.css
@@ -0,0 +1,90 @@
+/* Pipeline arena: authored 120 s, twelve-beat logo loop (STU-390).
+   Decorative only. Two-piece FlutterFlow mark geometry ported from the
+   canonical hero - the mark holds two rotated C pieces plus a halo and a soft
+   ground shadow. Only transform and opacity are animated (by the logo-motion
+   module), so these are pure layout styles. Reduced motion keeps the mark at
+   its static rest frame (the module paints pose(0)); nothing here animates. */
+
+.pipeline-glyph.logo-loop {
+  position: relative;
+  width: 100%;
+  height: 88px;
+  margin: 0 0 12px;
+  overflow: hidden;
+  pointer-events: none;
+  color: var(--fg);
+}
+
+.loop-mark,
+.loop-shadow {
+  position: absolute;
+}
+
+.loop-mark {
+  left: 0;
+  top: 50%;
+  width: 52px;
+  height: 52px;
+  margin: -26px 0 0 0;
+  will-change: transform;
+}
+
+.loop-piece {
+  position: absolute;
+  inset: 0;
+  display: block;
+  will-change: transform, opacity;
+}
+
+.loop-piece svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+}
+
+.loop-halo {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 74px;
+  height: 74px;
+  margin: -37px 0 0 -37px;
+  border-radius: 50%;
+  background: radial-gradient(circle, color-mix(in oklch, var(--accent) 60%, transparent), transparent 64%);
+  filter: blur(5px);
+  opacity: 0.09;
+  will-change: transform, opacity;
+}
+
+.loop-shadow {
+  left: var(--mark-c, 26px);
+  bottom: 13px;
+  width: 46px;
+  height: 6px;
+  margin-left: -23px;
+  border-radius: 50%;
+  background: color-mix(in oklch, var(--fg) 26%, transparent);
+  opacity: 0;
+  will-change: transform, opacity;
+}
+
+@media (max-width: 920px) {
+  .pipeline-glyph.logo-loop {
+    height: 66px;
+    margin-bottom: 8px;
+  }
+  .loop-mark {
+    width: 40px;
+    height: 40px;
+    margin: -20px 0 0 0;
+  }
+  .loop-halo {
+    width: 58px;
+    height: 58px;
+    margin: -29px 0 0 -29px;
+  }
+  .loop-shadow {
+    bottom: 6px;
+  }
+}
diff --git a/src/logoMotion.js b/src/logoMotion.js
new file mode 100644
index 0000000..02243c7
--- /dev/null
+++ b/src/logoMotion.js
@@ -0,0 +1,406 @@
+/**
+ * Pipeline logo loop (STU-390) — the authored logo animation ported into the
+ * pipeline presentation.
+ *
+ * Source: custom-code-connect-hero.html (`hero pose()/paint()/track()` and the
+ * arena lifecycle). This module preserves the hero's two-piece mark geometry
+ * and its twelve-beat, seamless 120-second authored motion for the decorative
+ * mark that sits in the pipeline arena.
+ *
+ * It is strictly DECORATIVE: pipeline completion depends only on real backend
+ * events, never on this module. The transformation/opacity pose is applied to
+ * the same `.loop-*` DOM elements the hero uses, so the two still share one
+ * geometry contract.
+ *
+ * Rendering lifecycle:
+ *  - Pauses/stops the clock when the hidden tab, the CSS-hidden pipeline
+ *    (`display:none` -> `offsetParent === null`) or the viewport-offscreen
+ *    arena (IntersectionObserver) would leave nothing visible on screen.
+ *    These are checked separately, not conflated: `offsetParent` alone proves
+ *    an element is in layout, not that it is on screen.
+ *  - Holds a static rest frame for `prefers-reduced-motion: reduce` and stops
+ *    the loop live when the preference changes, without a reload.
+ *  - The 120 s loop boundary is exact: `pose(0) === pose(120)` for every
+ *    animated key, so the seam is invisible. start() is idempotent, so
+ *    leaving and re-entering the pipeline can never accumulate a second
+ *    requestAnimationFrame loop.
+ *
+ * `pose`, `track` and `LOOP_DURATION` are exported pure so their loop-boundary
+ * and brand-geometry guarantees are unit-testable under Node.
+ */
+
+export const LOOP_DURATION = 120; // seconds, the authored twelve-beat loop length
+
+/* ------------------------------------------------------------------ */
+/* Easing + keyframe helpers (pure)                                    */
+/* ------------------------------------------------------------------ */
+
+function clamp(v, a, b) {
+  return v < a ? a : v > b ? b : v;
+}
+function prog(t, a, b) {
+  return clamp((t - a) / (b - a), 0, 1);
+}
+function io(x) {
+  return x < 0.5 ? 2 * x * x : 1 - Math.pow(-2 * x + 2, 2) / 2;
+}
+function out(x) {
+  return 1 - Math.pow(1 - x, 3);
+}
+function back(x, s) {
+  s = s === undefined ? 1.7 : s;
+  return 1 + (s + 1) * Math.pow(x - 1, 3) + s * Math.pow(x - 1, 2);
+}
+function spring(x) {
+  return 1 - Math.pow(2, -9 * x) * Math.cos(x * 15);
+}
+
+/**
+ * Evaluate a keyframe track at local time `t`. Keys are `[{t, v, e}]` and the
+ * ease belongs to the segment *ending* at that key.
+ */
+export function track(t, keys) {
+  if (t <= keys[0].t) return keys[0].v;
+  for (let i = 1; i < keys.length; i++) {
+    if (t <= keys[i].t) {
+      const a = keys[i - 1];
+      const b = keys[i];
+      return a.v + (b.v - a.v) * (b.e || io)(prog(t, a.t, b.t));
+    }
+  }
+  return keys[keys.length - 1].v;
+}
+
+/* ------------------------------------------------------------------ */
+/* The twelve beats                                                    */
+/* ------------------------------------------------------------------ */
+
+const REST = {
+  /* Defaults are the rest pose, which beat 12 must land on exactly. */
+  x: 0, y: 0, rot: 0, scale: 1,
+  ax: 0, ay: 0, ar: 0, asc: 1, afade: 1,
+  bx: 0, by: 0, br: 0, bsc: 1, bfade: 1,
+  hfade: 1, hsc: 1, shd: 0,
+};
+export const LOGO_POSE_KEYS = Object.freeze(Object.keys(REST));
+
+/**
+ * Pose of the mark at loop-local time `t` (seconds, 0..120). Ported verbatim
+ * from the canonical hero. Returns a plain object of normalised offsets:
+ * mark (x/y/rot/scale), piece A (ax/ay/ar/asc/afade), piece B (bx/by/br/bsc/
+ * bfade), halo (hfade/hsc) and shadow (shd). `pose(120) === pose(0)`.
+ */
+export function pose(t) {
+  const outPose = Object.assign({}, REST);
+  let x = 0, y = 0, rot = 0, scale = 1;
+  let ax = 0, ay = 0, ar = 0, asc = 1, afade = 1;
+  let bx = 0, by = 0, br = 0, bsc = 1, bfade = 1;
+  let hfade = 1, hsc = 1, shd = 0;
+
+  if (t < 9) {
+    /* 01 · Wake up — a swell, a look around, two blinks. */
+    scale = track(t, [{ t: 0, v: 1 }, { t: 1.2, v: 1.062, e: back }, { t: 2.9, v: 1 }]);
+    x = track(t, [{ t: 0, v: 0 }, { t: 2.6, v: 0.18 }, { t: 3.2, v: 0.03 }, { t: 4.8, v: 0, e: back }]);
+    y = track(t, [{ t: 0, v: 0 }, { t: 2.6, v: -0.2 }, { t: 3.2, v: 0.14 }, { t: 4.8, v: 0, e: back }]);
+    rot = track(t, [{ t: 0, v: 0 }, { t: 2.6, v: 3.4 }, { t: 3.2, v: -3.8 }, { t: 4.8, v: 0, e: back }]);
+    if (Math.abs(t - 4.0) < 0.11 || Math.abs(t - 4.45) < 0.12) { afade = 0.32; bfade = 0.32; }
+    hfade = track(t, [{ t: 0, v: 1 }, { t: 4.5, v: 1.9 }, { t: 8.9, v: 1 }]);
+    hsc = track(t, [{ t: 0, v: 1 }, { t: 4.5, v: 1.16 }, { t: 8.9, v: 1 }]);
+  } else if (t < 19) {
+    /* 02 · Glide — two full-width skims across the arena, then a settle run home. */
+    const g = t - 9;
+    x = track(g, [{ t: 0, v: 0 }, { t: 3.6, v: 1 }, { t: 7.4, v: 0.12 }, { t: 10, v: 0 }]);
+    y = track(g, [{ t: 0, v: 0 }, { t: 1.8, v: -0.5 }, { t: 3.6, v: 0 }, { t: 5.5, v: -0.45 }, { t: 7.4, v: 0 }, { t: 8.4, v: -0.18 }, { t: 10, v: 0 }]);
+    rot = track(g, [{ t: 0, v: 0 }, { t: 1, v: 7 }, { t: 2.4, v: 0 }, { t: 4.8, v: -7 }, { t: 6.2, v: 0 }, { t: 8.4, v: 3 }, { t: 10, v: 0 }]);
+    shd = prog(g, 0, 0.4) * (1 - prog(g, 9.4, 10));
+  } else if (t < 23) {
+    /* 03 · Rewind — one fast pass right to left, then a snap home. */
+    const r = t - 19;
+    x = track(r, [{ t: 0, v: 0, e: out }, { t: 1.4, v: 1 }, { t: 2.6, v: 0.08 }, { t: 4, v: 0, e: back }]);
+    y = track(r, [{ t: 0, v: 0 }, { t: 1.4, v: -0.35 }, { t: 2.6, v: -0.3 }, { t: 4, v: 0, e: back }]);
+    rot = track(r, [{ t: 0, v: 0, e: out }, { t: 1.2, v: -9 }, { t: 2.6, v: 11 }, { t: 4, v: 0, e: back }]);
+    shd = prog(r, 0, 0.3) * (1 - prog(r, 3.6, 4));
+  } else if (t < 32) {
+    /* 04 · Magnet — flung wide each way, then a snap and a recoil. */
+    const m = t - 23;
+    const fling = track(m, [{ t: 0, v: 0 }, { t: 1.6, v: 0.72 }, { t: 2.2, v: 0.66 }, { t: 3.4, v: 0, e: back }, { t: 4.1, v: -0.07 }, { t: 5.1, v: 0 }]);
+    ax = fling; bx = -fling; ar = fling * 26; br = -fling * 26;
+    scale = track(m, [{ t: 0, v: 1 }, { t: 1.6, v: 0.94 }, { t: 3.4, v: 1.04, e: back }, { t: 5.1, v: 1 }]);
+    hfade = track(m, [{ t: 0, v: 1 }, { t: 1.6, v: 1.8 }, { t: 5.1, v: 1 }]);
+    shd = prog(m, 0, 0.3) * (1 - prog(m, 8, 9));
+  } else if (t < 42) {
+    /* 05 · Breathe — a slow pulse and one small hiccup. */
+    const b = t - 32;
+    const swell = Math.sin(prog(b, 0, 8) * Math.PI);
+    scale = 1 + 0.055 * swell;
+    y = -0.12 * swell;
+    hfade = 1 + 0.5 * swell;
+    if (b > 8.2 && b < 9.4) scale *= 1 - 0.07 * Math.sin(prog(b, 8.2, 9.4) * Math.PI);
+  } else if (t < 53) {
+    /* 06 · Peek-a-boo — the second C hides, peeks, then ducks back. */
+    const k = t - 42;
+    bfade = track(k, [{ t: 0, v: 1 }, { t: 2, v: 0 }, { t: 4.2, v: 0 }, { t: 4.6, v: 1 }, { t: 6.8, v: 1 }, { t: 7.4, v: 0 }, { t: 9.4, v: 0 }, { t: 10.6, v: 1 }]);
+    bsc = track(k, [{ t: 0, v: 1 }, { t: 2, v: 0.3 }, { t: 4.6, v: 1, e: back }]);
+    bx = track(k, [{ t: 0, v: 0 }, { t: 2, v: 0.3 }, { t: 4.6, v: 0.16, e: back }, { t: 10.6, v: 0 }]);
+    br = track(k, [{ t: 0, v: 0 }, { t: 2, v: -40 }, { t: 4.6, v: 0, e: back }]);
+    ax = track(k, [{ t: 0, v: 0 }, { t: 4.6, v: -0.12 }, { t: 10.6, v: 0 }]);
+  } else if (t < 60) {
+    /* 07 · Insert coin — both Cs drop in onto the mark. Each fades out first, so the jump
+       up to the drop height happens while it is invisible rather than as a visible pop. */
+    const c = t - 53;
+    afade = track(c, [{ t: 0, v: 1 }, { t: 0.35, v: 0 }, { t: 0.45, v: 0 }, { t: 0.7, v: 1 }]);
+    const dropA = prog(c, 0.45, 2.2);
+    ay = dropA > 0 ? -2.6 * (1 - spring(dropA)) : 0;
+    bfade = track(c, [{ t: 0, v: 1 }, { t: 0.57, v: 0 }, { t: 0.67, v: 0 }, { t: 0.92, v: 1 }]);
+    const dropB = prog(c, 0.67, 2.42);
+    by = dropB > 0 ? -2.6 * (1 - spring(dropB)) : 0;
+    scale = 1 - 0.05 * (Math.sin(prog(c, 1.9, 2.5) * Math.PI) + Math.sin(prog(c, 2.5, 3.1) * Math.PI));
+  } else if (t < 74) {
+    /* 08 · Pac-chase — a full lap of the arena; the second piece trails the first. */
+    const p = t - 60;
+    function lap(u) {
+      return [
+        track(u, [{ t: 0, v: 0 }, { t: 0.25, v: 1 }, { t: 0.5, v: 1 }, { t: 0.72, v: 0.14 }, { t: 0.82, v: 0.14 }, { t: 1, v: 0 }]),
+        track(u, [{ t: 0, v: 0 }, { t: 0.08, v: -0.62 }, { t: 0.25, v: -0.62 }, { t: 0.33, v: 0.62 }, { t: 0.7, v: 0.62 }, { t: 0.82, v: -0.62 }, { t: 1, v: -0.62 }]),
+      ];
+    }
+    const settle = 1 - prog(p, 12, 14);
+    const head = lap(prog(p, 0, 12));
+    const tail = lap(prog(p - 0.5, 0, 12));
+    x = head[0] * settle;
+    y = (head[1] + 0.05 * Math.sin(p * 7)) * settle;
+    ax = (tail[0] - head[0]) * 0.6 * settle;
+    ay = (tail[1] - head[1]) * 0.6 * settle;
+    br = (tail[0] - head[0]) * 30 * settle;
+    shd = prog(p, 0, 0.4) * settle;
+  } else if (t < 85.4) {
+    /* 09 · Leaning — standing apart, they lean in until one slips. */
+    const l = t - 74;
+    const apart = track(l, [{ t: 0, v: 0 }, { t: 4, v: 1 }, { t: 8, v: 0.24 }, { t: 9.6, v: 1, e: back }, { t: 11.4, v: 0 }]);
+    ax = apart * 0.5; bx = -apart * 0.5;
+    ar = track(l, [{ t: 0, v: 0 }, { t: 4, v: 6 }, { t: 8, v: 20 }, { t: 9.6, v: 38, e: back }, { t: 11.4, v: 0 }]);
+    br = -ar * 0.7;
+    ay = track(l, [{ t: 0, v: 0 }, { t: 8, v: 0 }, { t: 9.6, v: 0.4 }, { t: 11.4, v: 0 }]);
+  } else if (t < 96.4) {
+    /* 10 · Orbit & clap — one full orbit, then a high five. */
+    const o = t - 85.4;
+    const orbit = prog(o, 0, 5.6);
+    const ret = prog(o, 5.6, 7.6);
+    const radius = 0.72 * Math.min(1, o / 0.6) * (1 - ret);
+    bx = Math.cos(orbit * Math.PI * 2) * radius;
+    by = Math.sin(orbit * Math.PI * 2) * radius * 0.55;
+    br = orbit * 360 * (1 - ret);
+    const clap = track(o, [{ t: 0, v: 0 }, { t: 7.6, v: 0 }, { t: 8.2, v: 1, e: out }, { t: 8.6, v: 0.55 }, { t: 9.4, v: 0 }]);
+    ax = -0.16 * clap;
+    bx += 0.16 * clap;
+    ar = -6 * clap;
+    br += 6 * clap;
+    scale = 1 + 0.05 * clap;
+    hfade = 1 + 0.9 * clap;
+  } else if (t < 108.6) {
+    /* 11 · Jelly beans — the mark runs the arena, nibbling as it goes. */
+    const j = t - 96.4;
+    const settle2 = prog(j, 9.6, 12.2);
+    x = track(j, [{ t: 0, v: 0 }, { t: 2.1, v: 1 }, { t: 4.8, v: 0.08 }, { t: 7.5, v: 1 }, { t: 9.6, v: 0 }]) * (1 - settle2);
+    y = -0.35 * Math.abs(Math.sin(prog(j, 0, 9.6) * Math.PI * 3)) * (1 - settle2);
+    const nibble = Math.sin(j * 6.2) * (1 - settle2);
+    asc = 1 + 0.12 * nibble; bsc = 1 - 0.12 * nibble;
+    ar = nibble * 8; br = -nibble * 8;
+    ax = 0.06 * nibble; bx = -0.06 * nibble;
+    shd = prog(j, 0, 0.4) * (1 - settle2);
+  } else {
+    /* 12 · Goodnight — settle, breathe, drift off. Frame 120 lands on frame 0. */
+    const d = t - 108.6;
+    const slow = Math.sin(prog(d, 0, 8) * Math.PI);
+    const fade = 1 - prog(d, 8, 11.4);
+    scale = 1 + 0.04 * slow * fade;
+    y = -0.1 * slow * fade;
+    rot = 2 * slow * fade;
+    hfade = 1 + 0.5 * Math.sin(prog(d, 0, 6) * Math.PI);
+    hsc = 1 + 0.1 * Math.sin(prog(d, 0, 6) * Math.PI);
+  }
+
+  outPose.x = x; outPose.y = y; outPose.rot = rot; outPose.scale = scale;
+  outPose.ax = ax; outPose.ay = ay; outPose.ar = ar; outPose.asc = asc; outPose.afade = afade;
+  outPose.bx = bx; outPose.by = by; outPose.br = br; outPose.bsc = bsc; outPose.bfade = bfade;
+  outPose.hfade = hfade; outPose.hsc = hsc; outPose.shd = shd;
+  return outPose;
+}
+
+/* ------------------------------------------------------------------ */
+/* Pipeline-arena DOM controller                                       */
+/* ------------------------------------------------------------------ */
+
+/**
+ * Drive the decorative `.pipeline-glyph.logo-loop` mark inside a pipeline
+ * arena. Returns `null` when the arena/mark markup is absent (so the rest of
+ * the app is unaffected), otherwise a live controller with
+ * `{ isRunning, currentTime, seek, dispose }`.
+ */
+export function createPipelineLogoLoop(options = {}) {
+  const arena = options.arena || document.querySelector(".pipeline-glyph.logo-loop");
+  if (!arena) return null;
+  const mark = arena.querySelector(".loop-mark");
+  const pieceA = arena.querySelector(".loop-piece-a");
+  const pieceB = arena.querySelector(".loop-piece-b");
+  const halo = arena.querySelector(".loop-halo");
+  const shadow = arena.querySelector(".loop-shadow");
+  if (!mark || !pieceA || !pieceB || !halo || !shadow) return null;
+
+  const reduce = options.reducedMotion || window.matchMedia("(prefers-reduced-motion: reduce)");
+  const DUR = LOOP_DURATION;
+  let MARK = 34;
+  let TRAVEL = 0;
+  let YMAX = 0;
+
+  function measure() {
+    MARK = mark.offsetWidth || 34;
+    // One-sided travel: 0 is the left edge (where the mark rests) and the 4px
+    // right margin leaves the halo room so it never clips against the strip.
+    TRAVEL = Math.max(0, arena.offsetWidth - MARK - 4);
+    YMAX = Math.max(0, (arena.offsetHeight - MARK) / 2 - 2);
+    arena.style.setProperty("--mark-c", MARK / 2 + "px");
+  }
+
+  function paint(p) {
+    // Clamp to the strip: the settle easings overshoot a hair past the left edge.
+    const px = Math.min(1, Math.max(0, p.x)) * TRAVEL;
+    const py = p.y * YMAX;
+    mark.style.transform =
+      "translate3d(" + px.toFixed(2) + "px," + py.toFixed(2) + "px,0) rotate(" + p.rot.toFixed(2) + "deg) scale(" + p.scale.toFixed(3) + ")";
+    pieceA.style.transform =
+      "translate3d(" + (p.ax * MARK).toFixed(2) + "px," + (p.ay * MARK).toFixed(2) + "px,0) rotate(" + p.ar.toFixed(2) + "deg) scale(" + p.asc.toFixed(3) + ")";
+    pieceA.style.opacity = p.afade.toFixed(3);
+    pieceB.style.transform =
+      "translate3d(" + (p.bx * MARK).toFixed(2) + "px," + (p.by * MARK).toFixed(2) + "px,0) rotate(" + p.br.toFixed(2) + "deg) scale(" + p.bsc.toFixed(3) + ")";
+    pieceB.style.opacity = p.bfade.toFixed(3);
+    halo.style.transform = "scale(" + p.hsc.toFixed(3) + ")";
+    halo.style.opacity = (0.09 * p.hfade).toFixed(3);
+    shadow.style.transform = "translateX(" + px.toFixed(2) + "px) scaleX(" + (0.75 + 0.4 * Math.abs(p.x)).toFixed(3) + ")";
+    shadow.style.opacity = (p.shd * 0.5).toFixed(3);
+  }
+
+  let elapsed = 0;
+  let last = 0;
+  let raf = 0;
+  let running = false;
+  let intersecting = false;
+  let disposed = false;
+  let framesPainted = 0; // test-observable: frames that actually advanced the pose
+
+  /* Every visibility condition is checked independently:
+     - `document.hidden`  : hidden browser tab
+     - `arena.offsetParent`: CSS-hidden (`display:none` etc. - in layout or not)
+     - `intersecting`     : viewport visibility via IntersectionObserver
+     `offsetParent` alone is NOT proof of viewport visibility, so all three
+     must hold before the loop may run. */
+  function shouldRun() {
+    if (disposed) return false;
+    if (reduce.matches) return false;
+    if (document.hidden) return false;
+    if (!arena.offsetParent) return false;
+    return intersecting;
+  }
+
+  function frame(now) {
+    if (!running) return;
+    raf = requestAnimationFrame(frame);
+    if (!shouldRun()) {
+      // An edge visibility change that slipped past its listener still cannot
+      // leave a loop turning over on an unseen arena.
+      stop();
+      return;
+    }
+    const dt = last ? (now - last) / 1000 : 0;
+    last = now;
+    elapsed = (elapsed + Math.min(dt, 0.1)) % DUR;
+    framesPainted += 1;
+    paint(pose(elapsed));
+  }
+
+  function start() {
+    if (running || disposed) return;
+    if (!shouldRun()) return;
+    running = true;
+    last = 0;
+    raf = requestAnimationFrame(frame);
+  }
+
+  function stop() {
+    running = false;
+    if (raf) {
+      cancelAnimationFrame(raf);
+      raf = 0;
+    }
+    last = 0;
+  }
+
+  function sync() {
+    if (shouldRun()) start();
+    else stop();
+  }
+
+  function onReduceChange() {
+    if (reduce.matches) {
+      stop();
+      paint(pose(0)); // static rest frame for reduced motion
+    } else {
+      sync();
+    }
+  }
+
+  function onResize() {
+    measure();
+    if (running) paint(pose(elapsed));
+  }
+
+  function onVisibility() {
+    last = 0;
+    sync();
+  }
+
+  const observer = new IntersectionObserver(
+    (entries) => {
+      intersecting = entries[0] ? entries[0].isIntersecting : false;
+      sync();
+    },
+    { threshold: 0 }
+  );
+  observer.observe(arena);
+
+  window.addEventListener("resize", onResize);
+  reduce.addEventListener("change", onReduceChange);
+  document.addEventListener("visibilitychange", onVisibility);
+
+  function dispose() {
+    if (disposed) return;
+    disposed = true;
+    stop();
+    observer.disconnect();
+    window.removeEventListener("resize", onResize);
+    reduce.removeEventListener("change", onReduceChange);
+    document.removeEventListener("visibilitychange", onVisibility);
+  }
+
+  window.addEventListener("pagehide", dispose);
+
+  /* A helper to review a specific beat deterministically (also used by
+     playwright visual artefacts): paints the pose for `t` without starting the
+     loop e.g. `seek(10)`. */
+  function seek(t) {
+    elapsed = ((t % DUR) + DUR) % DUR;
+    paint(pose(elapsed));
+  }
+
+  measure();
+  paint(pose(0));
+  sync();
+
+  return {
+    isRunning: () => running,
+    currentTime: () => elapsed,
+    frameCount: () => framesPainted,
+    seek,
+    dispose,
+  };
+}
diff --git a/src/logoMotion.test.js b/src/logoMotion.test.js
new file mode 100644
index 0000000..70eae32
--- /dev/null
+++ b/src/logoMotion.test.js
@@ -0,0 +1,78 @@
+import test from "node:test";
+import assert from "node:assert/strict";
+import { LOGO_POSE_KEYS, LOOP_DURATION, pose, track } from "./logoMotion.js";
+
+/**
+ * STU-390 — authored logo animation, behavioural unit coverage.
+ *
+ * These tests target the pure animation core (`pose`/`track`/`LOOP_DURATION`)
+ * so the loop-boundary and brand-geometry guarantees are falsifiable on a
+ * clean machine with no browser and no network.
+ *
+ * Heritage: the pose is ported verbatim from custom-code-connect-hero.html
+ * (beat 12 lands exactly on beat 1). Do not "tune" beat keyframes without
+ * re-running this suite.
+ */
+
+function assertClose(actual, expected, tol, msg) {
+  assert.ok(
+    Math.abs(actual - expected) <= tol,
+    `${msg ?? "value"}: expected ${expected} +/- ${tol}, got ${actual}`
+  );
+}
+
+test("LOOP_DURATION is the authored 120-second loop", () => {
+  assert.equal(LOOP_DURATION, 120);
+});
+
+test("pose(0) and pose(120) are identical on every animated key (seamless loop boundary)", () => {
+  const a = pose(0);
+  const b = pose(120);
+  for (const key of LOGO_POSE_KEYS) {
+    assertClose(a[key], b[key], 1e-9, `loop boundary mismatch on "${key}"`);
+  }
+});
+
+test("the loop boundary is the authored rest pose (brand geometry intact)", () => {
+  const rest = pose(0);
+  // The mark sits centred over its two interlocked C pieces at identity.
+  for (const key of ["x", "y", "rot", "ax", "ay", "ar", "bx", "by", "br", "shd"]) {
+    assertClose(rest[key], 0, 1e-9, `rest "${key}" should be 0`);
+  }
+  for (const key of ["scale", "asc", "bsc", "afade", "bfade", "hfade", "hsc"]) {
+    assertClose(rest[key], 1, 1e-9, `rest "${key}" should be 1`);
+  }
+});
+
+test("pose is finite and bounded for every frame across the whole loop", () => {
+  // Sweep in 1/30 s steps (the animation clock's finest practical step) so a
+  // bad keyframe cannot hide between beats.
+  for (let t = 0; t <= 120.0001; t += 1 / 30) {
+    const p = pose(t);
+    for (const key of LOGO_POSE_KEYS) {
+      const v = p[key];
+      assert.ok(Number.isFinite(v), `pose(${t.toFixed(3)}).${key} is ${v}`);
+      // Rotations are in degrees and beat 10 is a full 360° orbit, so allow
+      // rotational keys up to 400; everything else is a normalised offset.
+      const bound = /^(rot|ar|br)$/.test(key) ? 400 : 60;
+      assert.ok(Math.abs(v) <= bound, `pose(${t.toFixed(3)}).${key} = ${v}, out of range`);
+    }
+  }
+});
+
+test("track returns exact endpoint values and interpolates between them", () => {
+  const keys = [{ t: 0, v: 0 }, { t: 5, v: 10, e: (x) => x }, { t: 10, v: 20, e: (x) => x }];
+  assert.equal(track(0, keys), 0);
+  assert.equal(track(5, keys), 10);
+  assert.equal(track(10, keys), 20);
+  // Linear ease -> midpoint lands in the middle.
+  assertClose(track(2.5, keys), 5, 1e-9, "mid segment value");
+});
+
+test("pose is deterministic and pure (no state leaking between calls)", () => {
+  const first = pose(37.25);
+  const second = pose(37.25);
+  for (const key of LOGO_POSE_KEYS) {
+    assert.equal(first[key], second[key], `pose is not pure on "${key}"`);
+  }
+});