a11y: audit phase 3 — keyboard access, reduced motion, focus management

The site claimed comprehensive accessibility. It had a Level A keyboard
failure, no reduced-motion support of any kind, and a dialog whose ARIA
actively lied about the page state.

Keyboard access to nodes (WCAG 2.1.1, Level A):
- Nodes are PixiJS Containers with no DOM representation, so there was no way
  to reach or activate one by keyboard. The only keyboard vocabulary was
  pan/zoom/reset. New TreeNavigator.svelte renders the same data.ts as a real
  WAI-ARIA tree: roving tabindex, Up/Down traversal, Right/Left to expand and
  collapse, Home/End, Enter/Space to open the same modal a click opens.
  Focusing a row pans the canvas to that node so the two stay in sync.
- The canvas advertised role="application", which tells screen readers to
  suppress their own navigation and forward every key — appropriate only for
  a widget implementing a full keyboard model, which it did not. Now
  role="img" with a description, still focusable for pan/zoom.
- .sr-only content is revealed on :focus-within. Previously ~20 links were in
  the tab order while clipped to 1x1px, so a sighted keyboard user tabbed into
  nothing (WCAG 2.4.7). Added a skip link as the first focusable element.

Focus management:
- The modal set aria-modal="true" — telling AT that everything outside does
  not exist — while focus stayed on the canvas behind it and Tab walked the
  hidden text version underneath. Focus now moves into the dialog on open, is
  trapped there, and is restored to the trigger on close.
- Removed two onkeydown Escape handlers (modal + stats backdrop) that could
  never fire: a role="presentation" div with no tabindex is never a keydown
  target. Their aria-labels were discarded by the role too.
- The 300ms mobile touch-bleed guard was applied to every close path, so
  Escape or the X immediately after opening silently did nothing. It now
  guards only outside-dismissal, which is what it was for.

Reduced motion (WCAG 2.3.3 / 2.2.2):
- Previously respected nowhere, on a site built from a 4.5s forced zoom, an
  ~8s staggered entrance, ~480 looping tweens and a continuous dust ticker.
  The entrance now jumps to the finished state, the dust ticker is not
  registered, and all six ambient loops route through one guard that simply
  never creates them. Plus the CSS media query the GSAP tweens can't reach.

Other:
- StatsPanel used aria-hidden while containing tabindex="0" children — an axe
  aria-hidden-focus violation. Now `inert`, which removes it from the a11y
  tree and the tab order together.
- Branch headers were div+role="button" handling Enter but not Space. Now
  real buttons with aria-controls.
- The global keydown listener had no scope guard: it preventDefault()ed arrow
  keys unconditionally, so the 380px scrollable stats panel could not be
  scrolled by keyboard, and Ctrl combos were not excluded. Ctrl+wheel (browser
  and trackpad zoom) is no longer swallowed either.
- Focus rings lived in SkillTree's *scoped* style block, so they never reached
  NodeModal or StatsPanel children. Moved to app.css.
- Second <h1> in StatsPanel demoted; the page heading is SeoContent's.
- getBeamIntensity used a truthiness check on yearsOfExperience, so 0 fell
  through to the default.

Tests 16 -> 27: reduced-motion helper (all four branches), hierarchy building
including cycle/orphan handling, and a data-integrity check that every
parentId resolves to a real node.

Verified in the production build: Tab reveals the text version with a visible
focus ring; arrow keys traverse the tree and expand/collapse (rows 5->6);
Enter opens the modal with focus landing on Close; Shift+Tab stays trapped;
Escape restores focus to the originating tree item.

Not verified end-to-end: the reduced-motion JS branch. This environment can't
emulate the media query — patching matchMedia after navigation always races
module init — so that branch is covered by unit tests and review, not
observation. Worth a manual pass with DevTools > Rendering.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

src/app.css

@@ -32,10 +32,75 @@ body {
 	background: var(--bg-space);
 }
 
+/*
+ * Focus indicators. These used to live in SkillTree.svelte's *scoped* style
+ * block, so Svelte's scoping meant they never reached NodeModal or StatsPanel
+ * children — those fell back to the UA default outline, which is low-contrast
+ * on this background. Global is the only place this rule works.
+ */
+:focus-visible {
+	outline: 2px solid var(--color-gold);
+	outline-offset: 2px;
+	border-radius: 2px;
+}
+
+/*
+ * Reduced motion. The JS side (see config.prefersReducedMotion) skips the
+ * entrance and never creates the ambient GSAP loops; this covers the CSS
+ * animations and transitions those can't reach.
+ */
+@media (prefers-reduced-motion: reduce) {
+	*,
+	*::before,
+	*::after {
+		animation-duration: 0.01ms !important;
+		animation-iteration-count: 1 !important;
+		transition-duration: 0.01ms !important;
+		scroll-behavior: auto !important;
+	}
+}
+
 /*
  * Visually-hidden but available to screen readers and crawlers. Used for the
  * text version of the portfolio (the interactive content is canvas-rendered).
  */
+/*
+ * ...but focusable content inside it must become visible when focused, or a
+ * sighted keyboard user tabs through ~20 invisible stops with no idea where
+ * focus is (WCAG 2.4.7). Standard sr-only-focusable treatment.
+ */
+.sr-only:focus-within {
+	position: fixed;
+	top: 0;
+	left: 0;
+	z-index: 2000;
+	width: auto;
+	height: auto;
+	max-width: min(90vw, 60rem);
+	max-height: 90vh;
+	margin: 0;
+	overflow: auto;
+	clip: auto;
+	white-space: normal;
+	padding: 1.5rem;
+	background: linear-gradient(145deg, var(--panel-from) 0%, var(--panel-to) 100%);
+	border: 1px solid var(--color-gold);
+	border-radius: 0 0 8px 0;
+	color: #e8e8f0;
+	line-height: 1.6;
+}
+
+.sr-only:focus-within a {
+	color: var(--color-gold);
+}
+
+.sr-only:focus-within h1,
+.sr-only:focus-within h2,
+.sr-only:focus-within h3 {
+	color: var(--color-gold);
+	margin: 1rem 0 0.5rem;
+}
+
 .sr-only {
 	position: absolute;
 	width: 1px;