feat: add global focus mode with cross-component dimming on hover

When hovering a constellation node, skill pill, or timeline item,
non-related UI elements across all components dim to 0.25 opacity,
creating a focused visual relationship view. The constellation axis
and year labels also dim via CSS class. Respects reduced-motion.

src/index.css

@@ -494,6 +494,27 @@ html {
   to { transform: scale(1); opacity: 1; }
 }
 
+/* ===== CONSTELLATION FOCUS MODE — axis/background dimming ===== */
+svg.constellation-focus-active .axis-line,
+svg.constellation-focus-active .year-tick {
+  stroke-opacity: 0.25;
+  transition: stroke-opacity 150ms ease-out;
+}
+
+svg.constellation-focus-active .year-label {
+  opacity: 0.25;
+  transition: opacity 150ms ease-out;
+}
+
+svg:not(.constellation-focus-active) .axis-line,
+svg:not(.constellation-focus-active) .year-tick {
+  transition: stroke-opacity 150ms ease-out;
+}
+
+svg:not(.constellation-focus-active) .year-label {
+  transition: opacity 150ms ease-out;
+}
+
 /* ===== FOCUS VISIBLE STYLES (WCAG Compliance) ===== */
 /* Default focus ring for all focusable elements */
 *:focus-visible {
@@ -593,6 +614,16 @@ textarea:focus-visible {
     to { opacity: 1; }
   }
 
+  /* No transition for constellation focus mode axis dimming */
+  svg.constellation-focus-active .axis-line,
+  svg.constellation-focus-active .year-tick,
+  svg.constellation-focus-active .year-label,
+  svg:not(.constellation-focus-active) .axis-line,
+  svg:not(.constellation-focus-active) .year-tick,
+  svg:not(.constellation-focus-active) .year-label {
+    transition: none;
+  }
+
   /* Instant constellation fullscreen */
   @keyframes constellation-fullscreen-in {
     from { transform: none; opacity: 1; }