feat: transport-ship trail transition effect + animated store swatch (#4455)

## What

Adds a second transport-ship trail style, **transition**, alongside the
existing **gradient** (#4454). Where `gradient` paints a spatial band of
colors along the trail, `transition` makes the whole trail one color at
a time, cross-fading through the color list over time.

```json
"attributes": {
  "type": "transition",
  "colors": ["#002aff", "#4805ff"],
  "frequency": 1
}
```

## How

- **Schema** ([CosmeticSchemas.ts](src/core/CosmeticSchemas.ts)) —
`TransportShipTrailAttributesSchema` is now a discriminated union on
`type`:
  - `gradient`: `{ colors, colorSize, movementSpeed }`
- `transition`: `{ colors, frequency }` — `frequency` = color changes
per second.
- **Renderer** — the effect texture gained a `styleId` discriminator
(row 1's alpha; 0 = gradient, 1 = transition), with the gradient scalars
shifted down a row.
- [WebGLFrameBuilder.ts](src/client/WebGLFrameBuilder.ts) encodes
`styleId` + the style's scalars.
-
[trail.frag.glsl](src/client/render/gl/shaders/map-overlay/trail.frag.glsl):
for `transition`, the trail color is `mix(colors[i], colors[i+1],
fract(t))` with `i = floor(uTime · frequency) mod count` — one color
step every `1/frequency` seconds.
- **Store/picker swatch**
([EffectPreview.ts](src/client/components/EffectPreview.ts)) — the
swatch is now a `<trail-swatch>` Lit element. For `transition` it
cross-fades through the colors via the Web Animations API, timed to
match the shader (each step `1/frequency` s); gradient/solid stay
static. The animation is canceled on disconnect.

## Notes

- Animation is render-only (local time) — no simulation/determinism
impact.
- `gradient` swatches remain static (they don't scroll like the in-game
trail) — easy to add later if wanted.

## Testing

- `tsc --noEmit`, ESLint, Prettier, `build-prod` all clean.
- Schema tests cover the transition member (parse + required
`frequency`); 95 tests pass.
- The animated swatch is visual-only (no automated coverage) and not yet
verified in a running store.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

---------

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

tests/CosmeticSchemas.test.ts

@@ -51,7 +51,7 @@ describe("Effect cosmetic schemas", () => {
     });
 
     it("requires the gradient type, colors, colorSize, and movementSpeed", () => {
-      // The old solid/rainbow/pulse styles are gone — only gradient remains.
+      // Unrecognized styles (no discriminated-union member) are rejected.
       expect(
         TransportShipTrailAttributesSchema.safeParse({ type: "solid" }).success,
       ).toBe(false);
@@ -66,6 +66,28 @@ describe("Effect cosmetic schemas", () => {
         false,
       );
     });
+
+    it("parses a transition with a color list and frequency", () => {
+      const parsed = TransportShipTrailAttributesSchema.parse({
+        type: "transition",
+        colors: ["#002aff", "#4805ff"],
+        frequency: 1,
+      });
+      expect(parsed).toEqual({
+        type: "transition",
+        colors: ["#002aff", "#4805ff"],
+        frequency: 1,
+      });
+    });
+
+    it("requires frequency for a transition", () => {
+      expect(
+        TransportShipTrailAttributesSchema.safeParse({
+          type: "transition",
+          colors: ["#002aff", "#4805ff"],
+        }).success,
+      ).toBe(false);
+    });
   });
 
   describe("EffectSchema", () => {