fix(ui): background no longer moves — static grid, three glow spots fading in and out on their own slow cycles (owner 2026-08-25)

tests/unit/test_background_no_motion.py

@@ -0,0 +1,252 @@
+"""Unit: the phase-25 still-background contract (source pins).
+
+Owner report (2026-08-25, chat): the animated background "jitters down
+and to the right every second and it slowly blinks brighter and darker.
+It should be smooth, fluxuating, dimming and brightening, but not
+moving. Different bright spots should slowly fade in and out."
+
+The diagnosis (`.agent/reports/25_background_no_motion/`) found both
+root causes in the phase-22 design:
+  - "jitters down and to the right" = the grid's 44px/60s drift
+    (0.73px/s, diagonally down-right) — a 1px grid line translated
+    sub-pixel by sub-pixel rasterizes with per-frame stepping;
+  - "slowly blinks" = the whole-layer 14s opacity 0.85↔1 +
+    scale(1)↔scale(1.05) pulse — one synchronized pulse reads as a blink.
+
+The fix (styles.css, pure CSS, zero JS, no `filter` — A11): the grid is
+a STATIC texture (no animation, no bg-grid-drift keyframes), and three
+independent soft glow spots (body::after, html::before, html::after)
+each run their own SLOW opacity-only fade (26/34/42s, ease-in-out,
+negative delays → out of phase; LCM 4641s → the composite pattern
+effectively never repeats within a viewing session), so the total light
+fluxuates smoothly and irregularly — no blink, no jitter, no movement.
+
+Story: .agent/user_stories/background-no-motion.md. Browser behavior
+(no motion, visible fades, no occlusion, no overflow) is E2E-covered by
+tests/e2e/test_background_no_motion.py (task 02).
+"""
+from __future__ import annotations
+
+import re
+
+from tests.unit.test_background_animation import _css, _css_no_comments, _rule_block
+
+ALL_LAYERS = ("body::before", "body::after", "html::before", "html::after")
+
+# (layer, keyframes name, duration shorthand, single-spot gradient)
+GLOW_SPOTS = (
+    ("body::after", "bg-glow-a", "animation: bg-glow-a 26s ease-in-out infinite",
+     "radial-gradient(circle 56rem at 12% 8%, rgb(109 120 242 / 0.14), transparent 62%)"),
+    ("html::before", "bg-glow-b", "animation: bg-glow-b 34s ease-in-out -12s infinite",
+     "radial-gradient(circle 60rem at 88% 92%, rgb(34 211 238 / 0.10), transparent 62%)"),
+    ("html::after", "bg-glow-c", "animation: bg-glow-c 42s ease-in-out -23s infinite",
+     "radial-gradient(circle 52rem at 14% 86%, rgb(109 120 242 / 0.09), transparent 62%)"),
+)
+
+
+def _bg_keyframes(css: str) -> dict[str, str]:
+    """Name → body for every @keyframes bg-* rule (balanced braces —
+    works for the one-line blocks and a multi-line reformat alike)."""
+    out: dict[str, str] = {}
+    for m in re.finditer(r"@keyframes (bg-[A-Za-z0-9-]+)\s*\{", css):
+        start, depth, i = m.end(), 1, m.end()
+        while i < len(css) and depth:
+            if css[i] == "{":
+                depth += 1
+            elif css[i] == "}":
+                depth -= 1
+            i += 1
+        out[m.group(1)] = css[start:i - 1]
+    return out
+
+
+# --------------------------------------------------------------------------
+# No movement — the grid is a static texture, and no bg-* keyframe may
+# animate anything but opacity
+# --------------------------------------------------------------------------
+
+
+def test_grid_has_no_animation() -> None:
+    """body::before must carry NO animation declaration — the phase-22
+    0.73px/s drift rasterized as a once-per-second down-right jitter; the
+    owner wants no movement (2026-08-25)."""
+    block = _rule_block(_css(), "body::before")
+    assert "animation" not in block, (
+        "body::before must not animate (the no-movement contract)"
+    )
+
+
+def test_drift_and_breathe_keyframes_are_deleted() -> None:
+    """@keyframes bg-grid-drift and @keyframes bg-glow-breathe are gone —
+    the names must not appear anywhere in the file (no declaration, no
+    keyframe block, no stale comment)."""
+    css = _css()
+    assert "bg-grid-drift" not in css, "bg-grid-drift must be deleted"
+    assert "bg-glow-breathe" not in css, "bg-glow-breathe must be deleted"
+
+
+def test_grid_keeps_its_static_texture() -> None:
+    """The owner rejected the grid's MOTION, not the grid: 44px cells,
+    1px lines at 60% --line alpha, and the widened radial mask (both the
+    -webkit- and standard mask properties) stay."""
+    block = _rule_block(_css(), "body::before")
+    assert "background-size: 44px 44px" in block
+    assert (
+        "linear-gradient(to right, rgb(38 48 74 / 0.6) 1px, transparent 1px)" in block
+    ), "grid must keep horizontal 1px lines at 60% --line"
+    assert (
+        "linear-gradient(to bottom, rgb(38 48 74 / 0.6) 1px, transparent 1px)" in block
+    ), "grid must keep vertical 1px lines at 60% --line"
+    mask = "radial-gradient(140% 110% at 50% 0%, black 40%, transparent 90%)"
+    assert f"-webkit-mask-image: {mask};" in block
+    assert f"mask-image: {mask};" in block
+
+
+def test_exactly_three_bg_glow_keyframes_exist() -> None:
+    """Exactly three bg-* keyframe blocks: bg-glow-a/b/c (the old
+    bg-grid-drift and bg-glow-breathe are deleted)."""
+    assert set(_bg_keyframes(_css())) == {"bg-glow-a", "bg-glow-b", "bg-glow-c"}
+
+
+def test_bg_keyframes_animate_opacity_only() -> None:
+    """The no-movement contract: across ALL frames of ALL bg-* keyframes
+    the set of declared properties is exactly {opacity} — no transform,
+    scale, background-position, nothing else may appear."""
+    props: set[str] = set()
+    for _name, body in _bg_keyframes(_css()).items():
+        props |= set(re.findall(r"([A-Za-z-]+)\s*:", body))
+    assert props == {"opacity"}, (
+        f"bg-* keyframes must animate only opacity, found {sorted(props)}"
+    )
+
+
+def test_glow_layers_declare_no_transform_or_position_animation() -> None:
+    """The three glow layers themselves must not declare transform or
+    background-position either (the no-movement contract applies to the
+    layers, not just their keyframes)."""
+    for sel, _name, _anim, _grad in GLOW_SPOTS:
+        block = _rule_block(_css(), sel)
+        assert "transform" not in block, f"{sel} must not declare transform"
+        assert "background-position" not in block, (
+            f"{sel} must not declare background-position"
+        )
+
+
+# --------------------------------------------------------------------------
+# Three distinct bright spots, each on its own slow opacity-only fade
+# --------------------------------------------------------------------------
+
+
+def test_each_spot_runs_its_own_slow_opacity_fade() -> None:
+    """body::after (phase-08 indigo, 26s), html::before (phase-08 cyan,
+    34s, -12s delay), html::after (third indigo, 42s, -23s delay) — each
+    glow layer's background-image is EXACTLY the single radial gradient
+    from the spec (color, radius, position, 62% transparent stop)."""
+    for sel, _name, animation, gradient in GLOW_SPOTS:
+        block = _rule_block(_css(), sel)
+        assert animation in block, f"{sel} must run {animation}"
+        assert f"background-image: {gradient};" in block, (
+            f"{sel} must carry exactly one radial gradient: {gradient}"
+        )
+
+
+def test_glow_durations_are_distinct_and_slow() -> None:
+    """The three cycles are out of phase (distinct durations) and each is
+    slow (>= 20s); LCM(26, 34, 42) = 4641s, so the composite pattern
+    effectively never repeats within a viewing session."""
+    durations: list[float] = []
+    for sel, name, _anim, _grad in GLOW_SPOTS:
+        block = _rule_block(_css(), sel)
+        m = re.search(rf"animation: {name}\s+([\d.]+)s", block)
+        assert m, f"{sel} must run its {name} fade"
+        durations.append(float(m.group(1)))
+    assert len(set(durations)) == len(durations), (
+        "the three spot cycles must be out of phase (distinct durations)"
+    )
+    assert all(d >= 20 for d in durations), (
+        f"each spot fade must be slow (>= 20s), got {durations}"
+    )
+
+
+def test_glow_keyframes_low_and_high_opacities() -> None:
+    """Each cycle: 0%/100% at its own low opacity (0.25 / 0.20 / 0.15),
+    50% at 1 — smooth fade in and out, never a hard cut."""
+    keyframes = _bg_keyframes(_css())
+    lows = {"bg-glow-a": 0.25, "bg-glow-b": 0.20, "bg-glow-c": 0.15}
+    for name, low in lows.items():
+        body = keyframes[name]
+        m = re.search(r"0%,\s*100%\s*\{\s*opacity:\s*([\d.]+)\s*;\s*\}", body)
+        assert m and float(m.group(1)) == low, (
+            f"{name} must start/end at opacity {low}"
+        )
+        m = re.search(r"50%\s*\{\s*opacity:\s*([\d.]+)\s*;\s*\}", body)
+        assert m and float(m.group(1)) == 1.0, (f"{name} must peak at opacity 1")
+
+
+# --------------------------------------------------------------------------
+# Layer plumbing — the no-occlusion contract across all four layers
+# --------------------------------------------------------------------------
+
+
+def test_all_four_layers_are_fixed_zminus1_noninteractive() -> None:
+    """All four background pseudo-layers stay behind the content and can
+    never intercept input: fixed, full-viewport, z-index -1,
+    pointer-events none, with pseudo content (UI Structure Check: layers
+    behind content, no 360px overflow — the layers are fixed; inset: 0)."""
+    for sel in ALL_LAYERS:
+        block = _rule_block(_css(), sel)
+        assert "position: fixed" in block, f"{sel} must stay position:fixed"
+        assert "inset: 0" in block, f"{sel} must stay full-viewport (inset: 0)"
+        assert "z-index: -1" in block, f"{sel} must stay z-index:-1"
+        assert "pointer-events: none" in block, f"{sel} must stay click-through"
+        assert 'content: ""' in block, f"{sel} must keep its pseudo content"
+
+
+def test_html_owns_canvas_and_body_stays_transparent() -> None:
+    """The no-occlusion contract: <html> keeps the var(--bg) canvas;
+    <body> stays transparent and non-stacking — or the z-index:-1 layers
+    (including the new html::before / html::after spots) would be painted
+    over."""
+    html_block = _rule_block(_css(), "html")
+    assert "background: var(--bg)" in html_block, (
+        "html must keep background: var(--bg) (the page canvas)"
+    )
+    body_block = _rule_block(_css(), "body")
+    assert "background: transparent" in body_block, (
+        "body must keep background: transparent so the layers show"
+    )
+    for prop in ("z-index", "transform", "opacity", "filter"):
+        assert prop + ":" not in body_block, (
+            f"body must not create a stacking context (found {prop})"
+        )
+
+
+# --------------------------------------------------------------------------
+# Reduced motion + phase-08 anchors (no filter, no blur, zero JS)
+# --------------------------------------------------------------------------
+
+
+def test_reduced_motion_stills_all_four_layers() -> None:
+    """prefers-reduced-motion: reduce must still ALL FOUR layers together
+    (body::before, body::after, html::before, html::after) with
+    animation: none — the typing/spinner/thinking blocks are untouched."""
+    blocks = re.findall(
+        r"@media \(prefers-reduced-motion: reduce\)\s*\{([\s\S]*?)\n\}", _css()
+    )
+    assert any(
+        all(sel in b for sel in ALL_LAYERS) and "animation: none" in b
+        for b in blocks
+    ), "a reduced-motion block must still all four background layers"
+
+
+def test_no_filter_in_any_layer_and_no_blur_anywhere() -> None:
+    """The phase-08 performance anchor: no `filter` in any background
+    layer block, and no `blur` anywhere in styles.css (comments
+    stripped)."""
+    for sel in ALL_LAYERS:
+        assert "filter" not in _rule_block(_css(), sel), (
+            f"{sel} must not use any filter"
+        )
+    assert "blur" not in _css_no_comments(), (
+        "no filter: blur anywhere in styles.css (phase-08 perf anchor)"
+    )