Show floating grain particles in water when grain_mass > 0

35 particles distributed across full pot height, clipped to dynamic
water area via water-clip-rect updated alongside water fill level.
Particle opacity transitions on grain_mass changes per step.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01DGKe8JzTM2Gr1fdx9wYXTi

web/style.css

@@ -153,6 +153,19 @@ header#connection-bar {
     display: block;
 }
 
+/* Grain particle animation */
+@keyframes float-p {
+  0%, 100% { transform: translate(0px,    0px); }
+  25%       { transform: translate(1.5px, -3px); }
+  50%       { transform: translate(-1px,   2px); }
+  75%       { transform: translate(2px,  -1.5px); }
+}
+.grain-p {
+  fill: #c8a060;
+  animation: float-p var(--fp-dur, 3s) ease-in-out infinite var(--fp-del, 0s);
+}
+#grain-particles { transition: opacity 0.5s; }
+
 /* Stirrer animation */
 @keyframes stir-rotate {
     to { transform: rotate(360deg); }