fix(ui): animated background actually animates — grid drift and glow breathe per the phase-08 design

.agent/screenshots/22_background_animation/diagnosis_diff.txt

@@ -0,0 +1,24 @@
+== BEFORE (phase-08 CSS) ==
+FULL   before, 5s apart: 1.436% px>12, mean|d|=1.9793, max=54
+   top-left: mean|d|=3.0659
+   top-right: mean|d|=1.2274
+   bottom-left: mean|d|=0.7014
+   bottom-right: mean|d|=2.9225
+GRIDONLY before, 5s apart (glow hidden): 1.526% px>12, mean|d|=0.4778, max=60
+   top-left: mean|d|=0.8985
+   top-right: mean|d|=0.8776
+   bottom-left: mean|d|=0.0681
+   bottom-right: mean|d|=0.0671
+OCCLUSION PROBE: 3127 red-line px (x 132..1276, y 64..254) -> grid layer IS painted (no occlusion); earlier 0-pixel reading was a too-strict absolute-threshold detector (blended red ≈ rgb(78,27,35))
+
+== AFTER (phase-22 CSS: grid lines 0.6 alpha, mask 140% 110% / 40% / 90%, glow 0.85..1) ==
+FULL   after, 5s apart: 4.159% px>12, mean|d|=2.3007, max=87
+   top-left: mean|d|=2.9225
+   top-right: mean|d|=2.1081
+   bottom-left: mean|d|=1.6897
+   bottom-right: mean|d|=2.4826
+GRIDONLY after, 5s apart (glow hidden): 6.094% px>12, mean|d|=1.8162, max=74
+   top-left: mean|d|=2.2062
+   top-right: mean|d|=2.1563
+   bottom-left: mean|d|=1.4749
+   bottom-right: mean|d|=1.4275

.agent/screenshots/22_background_animation/diagnosis_log.txt

@@ -0,0 +1,13 @@
+LAYER STATE (computed):
+  before: {'position': 'fixed', 'zIndex': '-1', 'display': 'block', 'pointerEvents': 'none', 'maskImage': 'radial-gradient(120% 90% at 50% 0%, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 78%)', 'backgroundSize': '44px 44px, 44px 44px', 'animation': '60s linear infinite bg-grid-drift'}
+  after: {'position': 'fixed', 'zIndex': '-1', 'display': 'block', 'pointerEvents': 'none', 'animation': '14s ease-in-out infinite alternate bg-glow-breathe'}
+  htmlBg: rgb(10, 14, 23)
+  bodyBg: rgba(0, 0, 0, 0)
+TIMELINE (t_s, body::before background-position, body::after):
+  t=  0.0s  grid-pos='0.855518px 0.855518px, 0.855518px 0.855518px'  glow={'opacity': '0.654761', 'transform': 'matrix(1.00068, 0, 0, 1.00068, 0, 0)', 'animationName': 'bg-glow-breathe'}
+  t=  2.8s  grid-pos='2.92103px 2.92103px, 2.92103px 2.92103px'  glow={'opacity': '0.708889', 'transform': 'matrix(1.00841, 0, 0, 1.00841, 0, 0)', 'animationName': 'bg-glow-breathe'}
+  t=  5.6s  grid-pos='4.97421px 4.97421px, 4.97421px 4.97421px'  glow={'opacity': '0.815653', 'transform': 'matrix(1.02366, 0, 0, 1.02366, 0, 0)', 'animationName': 'bg-glow-breathe'}
+  t=  8.4s  grid-pos='7.02747px 7.02747px, 7.02747px 7.02747px'  glow={'opacity': '0.927369', 'transform': 'matrix(1.03962, 0, 0, 1.03962, 0, 0)', 'animationName': 'bg-glow-breathe'}
+  t= 11.2s  grid-pos='9.09298px 9.09298px, 9.09298px 9.09298px'  glow={'opacity': '0.990928', 'transform': 'matrix(1.0487, 0, 0, 1.0487, 0, 0)', 'animationName': 'bg-glow-breathe'}
+  t= 14.0s  grid-pos='11.1462px 11.1462px, 11.1462px 11.1462px'  glow={'opacity': '0.994963', 'transform': 'matrix(1.04928, 0, 0, 1.04928, 0, 0)', 'animationName': 'bg-glow-breathe'}
+  t= 16.8s  grid-pos='13.1995px 13.1995px, 13.1995px 13.1995px'  glow={'opacity': '0.940122', 'transform': 'matrix(1.04145, 0, 0, 1.04145, 0, 0)', 'animationName': 'bg-glow-breathe'}