fix(thinking): in-shorthand echo delay; paused and reduced-motion tests

Author: TheGreatAxios

src/theme.css

@@ -554,6 +554,9 @@
   100% { transform: scale(1.35); opacity: 0; }
 }
 @media (prefers-reduced-motion: reduce) {
+  /* Static poses land the gradient mid-stroke. These offsets mirror the SVG
+     geometry in thinking-mark.tsx — change the rect/circle geometry there and
+     these poses have to be re-picked to match. */
   .corbits-thinking-silk, .corbits-thinking-strata, .corbits-thinking-echo { animation: none; }
   .corbits-thinking-silk { transform: translateX(44px); }
   .corbits-thinking-strata { transform: translateY(30px); }

src/ui/thinking-indicator.test.tsx

@@ -22,4 +22,16 @@ describe("ThinkingIndicator", () => {
       expect(html).toContain(`corbits-thinking-${variant}`);
     }
   });
+
+  test("paused freezes every animated node", () => {
+    const html = renderToStaticMarkup(createElement(ThinkingMark, { paused: true }));
+
+    expect(html).toContain("animation-play-state:paused");
+  });
+
+  test("echo hides its second wave under reduced motion", () => {
+    const html = renderToStaticMarkup(createElement(ThinkingMark, { variant: "echo" }));
+
+    expect(html).toContain("motion-reduce:hidden");
+  });
 });

src/ui/thinking-mark.tsx

@@ -52,7 +52,9 @@ export function ThinkingMark({ variant = "silk", paused = false, className, styl
           {variant === "strata" && <rect className="corbits-thinking-strata [animation:corbits-thinking-rise_3.2s_cubic-bezier(.3,0,.3,1)_infinite]" x="0" y="-12" width="100" height="33" fill={`url(#${gradient})`} />}
           {variant === "echo" && <>
             <circle className="corbits-thinking-echo origin-[62px_9px] [animation:corbits-thinking-wave_3.6s_cubic-bezier(.15,.3,.3,1)_infinite]" cx="62" cy="9" r="80" fill={`url(#${gradient})`} />
-            <circle className="corbits-thinking-echo origin-[62px_9px] [animation:corbits-thinking-wave_3.6s_cubic-bezier(.15,.3,.3,1)_infinite] [animation-delay:-1.8s] motion-reduce:hidden" cx="62" cy="9" r="80" fill={`url(#${gradient})`} />
+            {/* The delay lives inside the shorthand — a separate animation-delay
+                utility can be reset by the shorthand's own emission order. */}
+            <circle className="corbits-thinking-echo origin-[62px_9px] motion-reduce:hidden [animation:corbits-thinking-wave_3.6s_cubic-bezier(.15,.3,.3,1)_-1.8s_infinite]" cx="62" cy="9" r="80" fill={`url(#${gradient})`} />
           </>}
         </mask>
       </defs>