feat(timeline-editor): Diagonal scroll following time-ordered sequence cascade

Enhancement: Smart Vertical Scrolling
- Mouse wheel now scrolls diagonally (horizontal + vertical)
- Automatically brings relevant sequence to top-left of viewport
- Follows the time-ordered cascade of sequences

Algorithm:
1. Scroll horizontally as before (timeline.scrollLeft += deltaY)
2. Calculate current time position (left edge of viewport)
   currentTime = scrollLeft / pixelsPerSecond
3. Find closest sequence at that time:
   - Last sequence that starts before or at currentTime
   - Sequences sorted by startTime
4. Smooth scroll vertically to target sequence:
   - targetScrollTop = seqIndex * 80px
   - Smooth transition: scrollTop += diff * 0.3 (not instant jump)

User Experience:
- Scroll forward in time → later sequences move to top
- Scroll backward in time → earlier sequences move to top
- Creates natural "diagonal" navigation along timeline
- Top-left corner always shows the most relevant sequence

Example timeline:
  Seq 0 (0s)  ──────────────
  Seq 1 (5s)         ──────────────
  Seq 2 (10s)                ──────────────

Scroll to 7s → Seq 1 moves to top (it's active at that time)
Scroll to 12s → Seq 2 moves to top (it's active at that time)

This provides intuitive navigation through time-ordered sequences.

1 files changed, 28 insertions, 1 deletions

diff --git a/tools/timeline_editor/index.html b/tools/timeline_editor/index.html
index 22e5239..ea8b454 100644
--- a/tools/timeline_editor/index.html
+++ b/tools/timeline_editor/index.html
@@ -929,10 +929,37 @@
             updateProperties();
         });
 
-        // Mouse wheel horizontal scroll
+        // Mouse wheel diagonal scroll (follows time-ordered sequence cascade)
         timelineContainer.addEventListener('wheel', (e) => {
             e.preventDefault();
+
+            // Horizontal scroll
             timelineContainer.scrollLeft += e.deltaY;
+
+            // Calculate current time position (left edge of viewport)
+            const currentScrollLeft = timelineContainer.scrollLeft;
+            const currentTime = currentScrollLeft / pixelsPerSecond;
+
+            // Find the closest sequence that should be visible at current time
+            // (the last sequence that starts before or at current time)
+            let targetSeqIndex = 0;
+            for (let i = 0; i < sequences.length; i++) {
+                if (sequences[i].startTime <= currentTime) {
+                    targetSeqIndex = i;
+                } else {
+                    break;
+                }
+            }
+
+            // Smooth vertical scroll to bring target sequence to top of viewport
+            const targetScrollTop = targetSeqIndex * 80; // 80px per sequence
+            const currentScrollTop = timelineContainer.scrollTop;
+            const scrollDiff = targetScrollTop - currentScrollTop;
+
+            // Smooth transition (don't jump instantly)
+            if (Math.abs(scrollDiff) > 5) {
+                timelineContainer.scrollTop += scrollDiff * 0.3;
+            }
         }, { passive: false });
 
         // Window resize handler