Add a colour wash animation

The frame parks in the middle and the colour changes instead: a gradient
creeps round the colour wheel behind the poster, and the frame's glow
travels with it. Every other animation moves the frame, so the still one
reads as a rest between them rather than as a dead spot.

The wash layer blends with mix-blend-mode: color, which keeps the
poster's luminance and replaces only its hue. soft-light was the first
try and barely shifted the colour at all against a poster already knocked
back to 45% brightness.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Tg15tLAuT6NrCE1ZxKVgDB

public/player/player.css

@@ -41,6 +41,20 @@ body {
   opacity: 1;
 }
 
+/* Built and removed by the wash animation. Sits between the poster and the
+   stills, and blends rather than covers, so the poster stays legible through
+   whatever colour is passing over it. The gradient itself is written per frame
+   from JS. */
+#wash {
+  position: fixed;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  /* Takes the poster's luminance and only replaces its hue, so the wash reads
+     as a colour change rather than as a sheet of colour laid over the top. */
+  mix-blend-mode: color;
+}
+
 /* --- frozen screenshots ------------------------------------------------ */
 
 #stills {
@@ -108,6 +122,13 @@ body {
     0 40px 100px rgba(0, 0, 0, 0.85);
 }
 
+/* The wash animation hands the frame the colour currently passing behind it. */
+#frameMover.washing #frameSkin {
+  box-shadow:
+    0 0 0 4px var(--wash, rgba(255, 79, 195, 0.55)),
+    0 24px 70px rgba(0, 0, 0, 0.7);
+}
+
 /* --- the drawn pointer -------------------------------------------------- */
 
 /* Built and removed by the drag animation; nothing else on the page has one. */