web: the logo's colour cycle gets range, speed, and a Safari lane

More of the wheel -- the gradient now walks pink, orchid, blue, cyan,
mint and back, all colours the demo's own terminal palette already
speaks -- and a faster walk, 8s to the position slide's loop.

And a second motion: WebKit caches a text-clipped paint and never
repaints it for a background-position animation, so on Safari the wash
sat frozen, pink on the left, cyan on the right, which rather defeats
a colour cycle. A hue rotation runs alongside (12s to the full wheel):
filters apply post-paint on the compositor, so every engine animates
it over the cached clip. Chrome and Firefox get both motions, WebKit
gets the rotation alone -- either way, nothing stays pink.

1 files changed, 15 insertions, 2 deletions

diff --git a/web/site.css b/web/site.css
index 3fec000..2e0e819 100644
--- a/web/site.css
+++ b/web/site.css
@@ -95,17 +95,30 @@ kbd {
    * 200% is one tile width), and only a 90deg gradient meets its own edge
    * seamlessly. */
   background: linear-gradient(90deg,
-      var(--pink) 0%, #c95fff 35%, #ff87e7 65%, var(--pink) 100%);
+      var(--pink) 0%, #c95fff 18%, #5fafff 38%, #5fd7d7 52%,
+      #87ffd7 62%, #ff87e7 82%, var(--pink) 100%);
   background-size: 200% 100%;
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
 }
-.logo-float.show pre { animation: logo-cycle 14s linear infinite; }
+/* Two motions. The position slide scrolls the gradient through the ink --
+ * except in WebKit, which caches a text-clipped paint and never repaints it
+ * for a background-position animation, leaving the wash frozen. The hue
+ * rotation is the motion Safari does honour: filters run post-paint on the
+ * compositor, so every pixel cycles the wheel even over the cached clip.
+ * Chrome and Firefox get both, WebKit gets the rotation alone. */
+.logo-float.show pre {
+  animation: logo-cycle 8s linear infinite, logo-hue 12s linear infinite;
+}
 @keyframes logo-cycle {
   from { background-position: 0% 0; }
   to { background-position: 200% 0; }
 }
+@keyframes logo-hue {
+  from { filter: hue-rotate(0deg); }
+  to { filter: hue-rotate(360deg); }
+}
 @media (prefers-reduced-motion: reduce) {
   .logo-float.show pre { animation: none; }
 }