Academy v3: screenshot-verified scenes, transform-override fix, hero bean-journey slide

Root cause of the broken diagrams found and fixed: CSS transform
animations were overriding the SVG positioning transform on the same
element, throwing animated elements (beans, flames) to the canvas
origin — the bean/flame helpers now split position (outer group) from
animation (inner group).

Every scene was then rendered in headless Chromium and screenshot-
inspected, with fixes applied and re-verified: drying-scene label
collision, RoR ideal-line label overlap, first-crack dot off the curve,
composition bar stagger orphaning its labels, moka flame hidden behind
the base.

New opening slide (user request): 'The whole journey, in one bean' — a
large bean on a 14-second loop living the full roast (heat in, drying
steam out, green→yellow→brown, pressure swell, crack) synced to a
stage timeline with a riding marker; narrated like the rest.

Co-Authored-By: Claude Fable 5 <[email protected]>

public/js/academy-content.js

@@ -20,6 +20,13 @@ export const ACADEMY_TRACKS = [
 				title: "The roast, start to finish",
 				minutes: 9,
 				slides: [
+					{
+						id: "rj-journey",
+						title: "The whole journey, in one bean",
+						scene: ["beanJourney", {}],
+						transcript:
+							"Watch one bean live the whole roast. Heat pours in from below; first the bean sweats its water out, then it turns yellow and browns as aromas build, swelling under internal pressure until it cracks open — and we drop it. Everything in this lesson is just slowing this loop down.",
+					},
 					{
 						id: "gb-seed",
 						title: "A seed, not a bean",