Fixed Ducking. Refined UI.

public/js/layout-renderer-module.js

@@ -128,10 +128,18 @@ class LayoutRendererModule extends BaseModule {
         for (let i = 1; i < breaks.length; i++) {
             const lineIndex = i - 1;
             const lineWidth = measures[Math.min(lineIndex, measures.length - 1)];
-            const lineOffset = maxLineWidth - lineWidth;
             const currentBreak = breaks[i];
             const isFinalLine = i === breaks.length - 1;
-            const ratio = isFinalLine ? 0 : (currentBreak.ratio || 0);
+            const isCentered = layoutData.align === 'center' ||
+                layoutData.role === 'chapter-heading' ||
+                layoutData.role === 'section-heading';
+            const ratio = (isFinalLine || isCentered) ? 0 : (currentBreak.ratio || 0);
+            const naturalLineWidth = isCentered
+                ? this.measureNaturalLineWidth(nodes, breaks[i - 1].position, currentBreak.position)
+                : lineWidth;
+            const lineOffset = isCentered
+                ? Math.max(0, (maxLineWidth - naturalLineWidth) / 2)
+                : maxLineWidth - lineWidth;
 
             let currentLeft = 0;
             lastChild = null;
@@ -175,6 +183,7 @@ class LayoutRendererModule extends BaseModule {
                         word.style.left = `${leftPercent}%`;
                         word.style.opacity = '0'; // Hidden until animated
                         word.style.visibility = 'hidden';
+                        word.style.clipPath = 'inset(0 100% 0 0)';
                         syllable = node.value;
                         word.innerHTML = syllable;
                         lastChild = word;
@@ -244,6 +253,7 @@ class LayoutRendererModule extends BaseModule {
                     word.style.left = `${leftPercent}%`;
                     word.style.opacity = '0';
                     word.style.visibility = 'hidden';
+                    word.style.clipPath = 'inset(0 100% 0 0)';
                     word.innerHTML = "-";
                     stack[stack.length - 1].appendChild(word);
                 }
@@ -253,6 +263,20 @@ class LayoutRendererModule extends BaseModule {
         return paragraph;
     }
 
+    measureNaturalLineWidth(nodes, startPosition, endPosition) {
+        let width = 0;
+        for (let j = startPosition; j <= endPosition; j++) {
+            const node = nodes[j];
+            if (!node) continue;
+            if (node.type === 'box' || node.type === 'glue') {
+                width += node.width || 0;
+            } else if (node.type === 'penalty' && node.penalty === 100 && j === endPosition) {
+                width += node.width || 0;
+            }
+        }
+        return width;
+    }
+
     /**
      * Paragraph positions are already computed from browser DOM measurements.
      * Keep this hook for callers that still invoke it, but do not reflow the