Kitten yields to cards: fade, shrink, click-through; plus UX review doc

When a suggestion card drifts into the mascot's corner, the kitten turns
translucent (15%), steps back 10% (standalone `scale` so it composes with
the bob animation), and lets clicks pass through to the card. It wakes
while its bubble or the picker is open, or once the corner clears.

Also adds UX_REVIEW_2026-07-27.md — the hands-on review of the live deploy
turned into implementation-ready items (repro, location, fix, acceptance).

Claude-Session: https://claude.ai/code/session_016y6gyuHkQXPiEuW8RGQyua

web/src/index.css

@@ -407,7 +407,17 @@ button, a, input {
      ~2× on a large desktop. Tune the middle (vw) term to taste. */
   --petal-companion-size: clamp(10rem, 17vw, 20rem);
   animation: petal-bob 3.2s ease-in-out infinite;
-  transition: transform 200ms ease;
+  /* Shrink toward its corner when fading out of a card's way. `scale` is a
+     separate property from `transform` so it composes with the bob keyframes. */
+  transform-origin: bottom right;
+  transition: transform 200ms ease, opacity 400ms ease, scale 400ms ease;
+}
+/* A suggestion card has drifted into the corner: the kitten politely turns
+   translucent, steps back 10%, and lets clicks pass through to the card. */
+.petal-companion-faded {
+  opacity: 0.15;
+  scale: 0.9;
+  pointer-events: none;
 }
 /* The Lottie art sits inside the round badge with a little breathing room. */
 .petal-companion-art {