5B: Extract JS into static files + js_config.py bridge

Move ~1860 lines of inline JS from build_interface() into:
- src/ui/static/animation-core.js (per-segment animation engine)
- src/ui/static/animate-all.js (mega card / Animate All feature)
- src/ui/js_config.py (Python→JS config bridge via window.* globals)

Python string interpolation replaced with window.* references.
interface.py reduced from 2597 to 737 lines.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/ui/interface.py

@@ -24,6 +24,7 @@ from config import (
     LEFT_COLUMN_SCALE, RIGHT_COLUMN_SCALE,
 )
 from src.ui.styles import build_css
+from src.ui.js_config import build_js_head
 from src.pipeline.process import (
     process_audio, resegment_audio,
     _retranscribe_wrapper, process_audio_json, save_json_export,
@@ -40,1868 +41,7 @@ def build_interface():
 
     css = build_css()
 
-    js = """
-    <script>
-    (function() {
-        // Warm up browser audio pipeline on first user interaction.
-        // Uses pointerdown (fires ~50-100ms before click) + AudioContext.resume()
-        // to prime the audio hardware before the <audio> element's play fires.
-        var _audioWarmedUp = false;
-        function _warmupAudio() {
-            if (_audioWarmedUp) return;
-            _audioWarmedUp = true;
-            // 1. Resume/create AudioContext — this is what actually initializes audio hardware
-            var ctx = new (window.AudioContext || window.webkitAudioContext)();
-            if (ctx.state === 'suspended') ctx.resume();
-            // Play a single silent sample to force full pipeline init
-            var buf = ctx.createBuffer(1, 1, 22050);
-            var src = ctx.createBufferSource();
-            src.buffer = buf;
-            src.connect(ctx.destination);
-            src.start();
-            // 2. Also prime HTML5 Audio path with a silent WAV
-            var a = new Audio('data:audio/wav;base64,UklGRiYAAABXQVZFZm10IBAAAAABAAEARKwAABCxAgACABAAZGF0YQIAAAAAAA==');
-            a.volume = 0;
-            a.play().catch(function(){});
-            document.removeEventListener('pointerdown', _warmupAudio);
-            document.removeEventListener('touchstart', _warmupAudio);
-        }
-        // pointerdown fires before click, giving audio hardware a head start
-        document.addEventListener('pointerdown', _warmupAudio);
-        document.addEventListener('touchstart', _warmupAudio, {passive: true});
-
-        // Display mode and granularity (updated via Animation Settings radios)
-        window.ANIM_PRESETS = """ + str(ANIM_PRESETS).replace("'", '"') + """;
-        window.ANIM_WINDOW_PREV_MAX = """ + str(ANIM_WINDOW_PREV_MAX) + """;
-        window.ANIM_WINDOW_AFTER_MAX = """ + str(ANIM_WINDOW_AFTER_MAX) + """;
-
-        // --- localStorage persistence helpers ---
-        var _ANIM_STORAGE_KEY = 'quran_anim_settings';
-        function loadAnimSettings() {
-            try {
-                var raw = localStorage.getItem(_ANIM_STORAGE_KEY);
-                return raw ? JSON.parse(raw) : null;
-            } catch(e) { return null; }
-        }
-        function saveAnimSettings() {
-            try {
-                var mode = window.ANIM_DISPLAY_MODE;
-                var s = loadAnimSettings() || {};
-                s.granularity = window.ANIM_GRANULARITY;
-                s.mode = mode;
-                s.verseOnly = !!window.ANIM_VERSE_MODE;
-                s.color = getComputedStyle(document.documentElement).getPropertyValue('--anim-word-color').trim() || '""" + ANIM_WORD_COLOR + """';
-                // Read text styling from slider DOM values (more reliable than mega-card inline styles)
-                var wsEl = document.querySelector('#anim-word-spacing input[type=range],#anim-word-spacing input[type=number]');
-                var tsEl = document.querySelector('#anim-text-size input[type=range],#anim-text-size input[type=number]');
-                var lsEl = document.querySelector('#anim-line-spacing input[type=range],#anim-line-spacing input[type=number]');
-                s.wordSpacing = wsEl ? parseFloat(wsEl.value) : """ + str(MEGA_WORD_SPACING_DEFAULT) + """;
-                s.textSize = tsEl ? parseFloat(tsEl.value) : """ + str(MEGA_TEXT_SIZE_DEFAULT) + """;
-                s.lineSpacing = lsEl ? parseFloat(lsEl.value) : """ + str(MEGA_LINE_SPACING_DEFAULT) + """;
-                // Always keep custom sub-object up to date when in Custom mode
-                if (mode === 'Custom') {
-                    s.custom = {
-                        prevOpacity: window.ANIM_OPACITY_PREV,
-                        afterOpacity: window.ANIM_OPACITY_AFTER,
-                        prevWords: window.ANIM_WINDOW_PREV,
-                        afterWords: window.ANIM_WINDOW_AFTER
-                    };
-                }
-                s.playbackRate = window.ANIM_PLAYBACK_RATE || 1;
-                localStorage.setItem(_ANIM_STORAGE_KEY, JSON.stringify(s));
-            } catch(e) {}
-        }
-
-        // --- Restore from localStorage or use defaults ---
-        var _saved = loadAnimSettings();
-        if (_saved) {
-            window.ANIM_DISPLAY_MODE = _saved.mode || '""" + ANIM_DISPLAY_MODE_DEFAULT + """';
-            window.ANIM_GRANULARITY = _saved.granularity || '""" + ANIM_GRANULARITY_DEFAULT + """';
-            window.ANIM_VERSE_MODE = !!_saved.verseOnly;
-            if (_saved.color) document.documentElement.style.setProperty('--anim-word-color', _saved.color);
-            var _rPreset = window.ANIM_PRESETS[window.ANIM_DISPLAY_MODE];
-            if (_rPreset) {
-                window.ANIM_OPACITY_PREV = _rPreset.prev_opacity;
-                window.ANIM_OPACITY_AFTER = _rPreset.after_opacity;
-                window.ANIM_WINDOW_PREV = _rPreset.prev_words;
-                window.ANIM_WINDOW_AFTER = _rPreset.after_words;
-            } else if (_saved.custom) {
-                window.ANIM_OPACITY_PREV = _saved.custom.prevOpacity;
-                window.ANIM_OPACITY_AFTER = _saved.custom.afterOpacity;
-                window.ANIM_WINDOW_PREV = _saved.custom.prevWords;
-                window.ANIM_WINDOW_AFTER = _saved.custom.afterWords;
-            } else {
-                window.ANIM_OPACITY_PREV = """ + str(ANIM_OPACITY_PREV_DEFAULT) + """;
-                window.ANIM_OPACITY_AFTER = """ + str(ANIM_OPACITY_AFTER_DEFAULT) + """;
-                window.ANIM_WINDOW_PREV = """ + str(ANIM_WINDOW_PREV_DEFAULT) + """;
-                window.ANIM_WINDOW_AFTER = """ + str(ANIM_WINDOW_AFTER_DEFAULT) + """;
-            }
-        } else {
-            window.ANIM_DISPLAY_MODE = '""" + ANIM_DISPLAY_MODE_DEFAULT + """';
-            window.ANIM_GRANULARITY = '""" + ANIM_GRANULARITY_DEFAULT + """';
-            var _initPreset = window.ANIM_PRESETS['""" + ANIM_DISPLAY_MODE_DEFAULT + """'];
-            window.ANIM_OPACITY_PREV = _initPreset ? _initPreset.prev_opacity : """ + str(ANIM_OPACITY_PREV_DEFAULT) + """;
-            window.ANIM_OPACITY_AFTER = _initPreset ? _initPreset.after_opacity : """ + str(ANIM_OPACITY_AFTER_DEFAULT) + """;
-            window.ANIM_WINDOW_PREV = _initPreset ? _initPreset.prev_words : """ + str(ANIM_WINDOW_PREV_DEFAULT) + """;
-            window.ANIM_WINDOW_AFTER = _initPreset ? _initPreset.after_words : """ + str(ANIM_WINDOW_AFTER_DEFAULT) + """;
-            window.ANIM_VERSE_MODE = false;
-        }
-        window.ANIM_PLAYBACK_RATE = (_saved && _saved.playbackRate) ? _saved.playbackRate : 1;
-        window._windowPrevGradient = [];
-        window._windowAfterGradient = [];
-
-        function rebuildWindowGradient() {
-            var basePrev = window.ANIM_OPACITY_PREV;
-            var baseAfter = window.ANIM_OPACITY_AFTER;
-            var pc = window.ANIM_WINDOW_PREV;
-            var ac = window.ANIM_WINDOW_AFTER;
-            window._windowPrevGradient = [];
-            window._windowAfterGradient = [];
-            // At max: empty gradient signals "show all at flat base opacity"
-            if (pc < window.ANIM_WINDOW_PREV_MAX) {
-                for (var d = 1; d <= pc; d++) {
-                    window._windowPrevGradient.push(String(basePrev * (pc - d + 1) / pc));
-                }
-            }
-            if (ac < window.ANIM_WINDOW_AFTER_MAX) {
-                for (var d = 1; d <= ac; d++) {
-                    window._windowAfterGradient.push(String(baseAfter * (ac - d + 1) / ac));
-                }
-            }
-        }
-        rebuildWindowGradient();
-
-        // Activate a lazy-loaded audio element (set src, show controls, hide play button)
-        function activateAudio(audio) {
-            if (audio.hasAttribute('controls')) return audio;
-            audio.src = audio.dataset.src;
-            audio.controls = true;
-            audio.style.display = '';
-            var playBtn = audio.parentElement && audio.parentElement.querySelector('.play-btn');
-            if (playBtn) playBtn.style.display = 'none';
-            return audio;
-        }
-
-        // =====================================================================
-        // Animation Debug Logging
-        // Enable via: window.ANIM_DEBUG = true; in browser console
-        // =====================================================================
-        window.ANIM_DEBUG = false;  // Set to true to enable animation debug logging
-        function animDebug(category, msg, data) {
-            if (!window.ANIM_DEBUG) return;
-            var prefix = '[ANIM:' + category + ']';
-            if (data !== undefined) {
-                console.log(prefix, msg, data);
-            } else {
-                console.log(prefix, msg);
-            }
-        }
-        function dumpCacheTimestamps(cache, label) {
-            if (!window.ANIM_DEBUG) return;
-            console.group('[ANIM:CACHE] ' + label + ' (' + cache.length + ' entries)');
-            cache.forEach(function(item, idx) {
-                var text = item.el.textContent.substring(0, 20);
-                var gid = item.groupId || '-';
-                console.log(idx + ': "' + text + '" start=' + item.start.toFixed(3) + ' end=' + item.end.toFixed(3) + ' groupId=' + gid);
-            });
-            if (cache._groupIndex) {
-                console.log('_groupIndex:', JSON.parse(JSON.stringify(cache._groupIndex)));
-            }
-            console.groupEnd();
-        }
-
-        // Cache elements and timing data for a given selector
-        // Also builds group index for letter groups (chars with same data-group-id)
-        function initCacheFor(card, selector) {
-            var elements = Array.from(card.querySelectorAll(selector));
-            var cache = elements.map(function(el, idx) {
-                return {
-                    el: el,
-                    start: parseFloat(el.dataset.start),
-                    end: parseFloat(el.dataset.end),
-                    groupId: el.dataset.groupId || null,
-                    cacheIdx: idx
-                };
-            });
-            // Build group index: groupId → [cacheIdx, ...]
-            var groupIndex = {};
-            cache.forEach(function(item) {
-                if (item.groupId) {
-                    if (!groupIndex[item.groupId]) {
-                        groupIndex[item.groupId] = [];
-                    }
-                    groupIndex[item.groupId].push(item.cacheIdx);
-                }
-            });
-            cache._groupIndex = groupIndex;
-            animDebug('INIT', 'initCacheFor("' + selector + '"): ' + cache.length + ' elements, ' + Object.keys(groupIndex).length + ' groups');
-            return cache;
-        }
-
-        // Apply class to element and all members of its letter group
-        function applyClassToGroup(cache, idx, className, add) {
-            var item = cache[idx];
-            if (!item) {
-                animDebug('CLASS', 'applyClassToGroup SKIP: no item at idx=' + idx);
-                return;
-            }
-            var text = item.el.textContent.substring(0, 10);
-            animDebug('CLASS', (add ? '+' : '-') + className + ' idx=' + idx + ' "' + text + '" groupId=' + (item.groupId || '-'));
-            if (add) {
-                item.el.classList.add(className);
-            } else {
-                item.el.classList.remove(className);
-            }
-            // Also apply to all group members if this element has a groupId
-            if (item.groupId && cache._groupIndex) {
-                var groupMembers = cache._groupIndex[item.groupId] || [];
-                if (groupMembers.length > 1) {
-                    animDebug('CLASS', '  -> propagating to group members:', groupMembers);
-                }
-                groupMembers.forEach(function(memberIdx) {
-                    if (memberIdx !== idx) {
-                        if (add) {
-                            cache[memberIdx].el.classList.add(className);
-                        } else {
-                            cache[memberIdx].el.classList.remove(className);
-                        }
-                    }
-                });
-            }
-        }
-
-        // Return the active cache based on current granularity setting
-        function getActiveCache(audio) {
-            return window.ANIM_GRANULARITY === 'Characters' ? audio._cacheChars : audio._cacheWords;
-        }
-
-        // Apply opacity to element and all members of its letter group
-        function applyOpacityToGroup(cache, idx, opacity) {
-            var item = cache[idx];
-            if (!item) {
-                animDebug('OPACITY', 'applyOpacityToGroup SKIP: no item at idx=' + idx);
-                return;
-            }
-            var text = item.el.textContent.substring(0, 10);
-            animDebug('OPACITY', 'idx=' + idx + ' "' + text + '" opacity=' + (opacity === null ? 'CLEAR' : opacity) + ' groupId=' + (item.groupId || '-'));
-            if (opacity === null) {
-                item.el.style.removeProperty('opacity');
-            } else {
-                item.el.style.opacity = opacity;
-            }
-            // Also apply to all group members if this element has a groupId
-            if (item.groupId && cache._groupIndex) {
-                var groupMembers = cache._groupIndex[item.groupId] || [];
-                if (groupMembers.length > 1) {
-                    animDebug('OPACITY', '  -> propagating to group members:', groupMembers);
-                }
-                groupMembers.forEach(function(memberIdx) {
-                    if (memberIdx !== idx) {
-                        if (opacity === null) {
-                            cache[memberIdx].el.style.removeProperty('opacity');
-                        } else {
-                            cache[memberIdx].el.style.opacity = opacity;
-                        }
-                    }
-                });
-            }
-        }
-
-        // Build group index for a cache array (extracts groupId and builds _groupIndex)
-        // Used for megacard caches which are built manually without initCacheFor()
-        function buildGroupIndex(cache) {
-            var groupIndex = {};
-            cache.forEach(function(item, idx) {
-                var gid = item.el.dataset.groupId;
-                if (gid) {
-                    item.groupId = gid;
-                    if (!groupIndex[gid]) groupIndex[gid] = [];
-                    groupIndex[gid].push(idx);
-                }
-            });
-            cache._groupIndex = groupIndex;
-            var groupCount = Object.keys(groupIndex).length;
-            animDebug('GROUP', 'buildGroupIndex: ' + cache.length + ' elements, ' + groupCount + ' groups');
-            if (window.ANIM_DEBUG && groupCount > 0) {
-                for (var gid in groupIndex) {
-                    if (groupIndex[gid].length > 1) {
-                        animDebug('GROUP', '  group "' + gid + '": indices ' + JSON.stringify(groupIndex[gid]));
-                    }
-                }
-            }
-        }
-
-        // Window mode: track active state for live slider updates
-        window._windowActiveCache = null;
-        window._windowActiveIdx = -1;
-        window._windowLastPc = 0;
-        window._windowLastAc = 0;
-        window._windowLastPcAll = false;
-        window._windowLastAcAll = false;
-        window._windowSettingsVersion = 0;  // Incremented when sliders change, so tick() can detect
-
-        // Window mode: apply per-element opacity gradient around active index
-        function applyWindowOpacity(cache, newIdx, prevIdx) {
-            animDebug('WINDOW', 'applyWindowOpacity newIdx=' + newIdx + ' prevIdx=' + prevIdx + ' cacheLen=' + cache.length);
-            // If prevIdx is unknown (e.g. after a timing gap between words),
-            // fall back to the last index we applied so the old window gets cleared.
-            if (prevIdx < 0 && window._windowActiveIdx >= 0 && window._windowActiveCache === cache) {
-                animDebug('WINDOW', '  -> using fallback prevIdx=' + window._windowActiveIdx);
-                prevIdx = window._windowActiveIdx;
-            }
-            var prevGrad = window._windowPrevGradient;
-            var afterGrad = window._windowAfterGradient;
-            var pc = prevGrad.length;
-            var ac = afterGrad.length;
-            var pcAll = (window.ANIM_WINDOW_PREV >= window.ANIM_WINDOW_PREV_MAX);
-            var acAll = (window.ANIM_WINDOW_AFTER >= window.ANIM_WINDOW_AFTER_MAX);
-            var oldPcAll = window._windowLastPcAll;
-            var oldAcAll = window._windowLastAcAll;
-            var basePrev = String(window.ANIM_OPACITY_PREV);
-            var baseAfter = String(window.ANIM_OPACITY_AFTER);
-            animDebug('WINDOW', '  verseMode=' + window.ANIM_VERSE_MODE + ' pcAll=' + pcAll + ' acAll=' + acAll + ' basePrev=' + basePrev + ' baseAfter=' + baseAfter);
-            // Verse mode: show only current-verse words, hide everything else
-            if (window.ANIM_VERSE_MODE) {
-                var activeEl = cache[newIdx].el;
-                var activePos = activeEl.dataset.pos || (activeEl.closest('.word') || {}).dataset?.pos || '';
-                var vp = activePos.split(':');
-                var activeVerse = vp.length >= 2 ? vp[0] + ':' + vp[1] : '';
-                // Track which group IDs we've already handled to avoid duplicates
-                var handledGroups = {};
-                for (var i = 0; i < cache.length; i++) {
-                    // Skip if this element's group was already handled
-                    var gid = cache[i].groupId;
-                    if (gid && handledGroups[gid]) continue;
-                    if (gid) handledGroups[gid] = true;
-                    if (i === newIdx) {
-                        applyOpacityToGroup(cache, i, null);
-                        continue;
-                    }
-                    var el = cache[i].el;
-                    var pos = el.dataset.pos || (el.closest('.word') || {}).dataset?.pos || '';
-                    var wp = pos.split(':');
-                    var wverse = wp.length >= 2 ? wp[0] + ':' + wp[1] : '';
-                    if (wverse === activeVerse) {
-                        // Same verse: normal gradient opacity
-                        if (i < newIdx || !cache[i].el.classList.contains('reached')) {
-                            applyOpacityToGroup(cache, i, (i < newIdx) ? basePrev : baseAfter);
-                        }
-                    } else if (i < newIdx) {
-                        // Different verse, before current: always hide past verses
-                        applyOpacityToGroup(cache, i, '0');
-                    } else {
-                        // Different verse, after current: hide future verses in verse-only mode
-                        applyOpacityToGroup(cache, i, '0');
-                    }
-                }
-                window._windowActiveCache = cache;
-                window._windowActiveIdx = newIdx;
-                return;
-            }
-            // Fast path: All→All steady state — only 2 elements change (with group support)
-            if (prevIdx >= 0 && newIdx >= 0 && pcAll && acAll && oldPcAll && oldAcAll) {
-                applyOpacityToGroup(cache, prevIdx, basePrev);
-                applyOpacityToGroup(cache, newIdx, null);
-                window._windowActiveCache = cache;
-                window._windowActiveIdx = newIdx;
-                window._windowLastPc = pc;  window._windowLastAc = ac;
-                window._windowLastPcAll = pcAll;  window._windowLastAcAll = acAll;
-                return;
-            }
-            // Clear old window range
-            if (prevIdx >= 0) {
-                if (oldPcAll || oldAcAll) {
-                    // Previous state had "all" — clear every element
-                    for (var i = 0; i < cache.length; i++) {
-                        cache[i].el.style.removeProperty('opacity');
-                    }
-                } else {
-                    var clearPc = Math.max(pc, window._windowLastPc);
-                    var clearAc = Math.max(ac, window._windowLastAc);
-                    var clearStart = Math.max(0, prevIdx - clearPc);
-                    var clearEnd = Math.min(cache.length - 1, prevIdx + clearAc);
-                    for (var i = clearStart; i <= clearEnd; i++) {
-                        cache[i].el.style.removeProperty('opacity');
-                    }
-                }
-            }
-            // Track state for live slider updates
-            window._windowActiveCache = cache;
-            window._windowActiveIdx = newIdx;
-            window._windowLastPc = pc;
-            window._windowLastAc = ac;
-            window._windowLastPcAll = pcAll;
-            window._windowLastAcAll = acAll;
-            if (newIdx < 0) return;
-            // Apply previous elements (with group support)
-            if (pcAll) {
-                for (var i = 0; i < newIdx; i++) {
-                    applyOpacityToGroup(cache, i, basePrev);
-                }
-            } else {
-                for (var p = 0; p < pc; p++) {
-                    var idx = newIdx - (p + 1);
-                    if (idx < 0) break;
-                    applyOpacityToGroup(cache, idx, prevGrad[p]);
-                }
-            }
-            // Apply after elements (upcoming words always get opacity set for
-            // proper word-by-word animation, even if they have 'reached' from
-            // a previous segment) — with group support
-            if (acAll) {
-                for (var i = newIdx + 1; i < cache.length; i++) {
-                    applyOpacityToGroup(cache, i, baseAfter);
-                }
-            } else {
-                for (var a = 0; a < ac; a++) {
-                    var idx = newIdx + (a + 1);
-                    if (idx >= cache.length) break;
-                    applyOpacityToGroup(cache, idx, afterGrad[a]);
-                }
-            }
-            // Fade previously-active word from full opacity to its new level (with group support)
-            if (prevIdx >= 0 && prevIdx !== newIdx) {
-                var tgt = cache[prevIdx].el.style.opacity || '0';
-                applyOpacityToGroup(cache, prevIdx, tgt);
-            }
-            // Reconcile group opacities: grouped characters should appear as
-            // one visual unit, using the max opacity from any member
-            if (cache._groupIndex) {
-                var gids = Object.keys(cache._groupIndex);
-                for (var g = 0; g < gids.length; g++) {
-                    var members = cache._groupIndex[gids[g]];
-                    if (members.length <= 1) continue;
-                    // If any member is active, set all to full opacity
-                    var anyActive = false;
-                    var maxOp = -1;
-                    for (var m = 0; m < members.length; m++) {
-                        if (cache[members[m]].el.classList.contains('active')) {
-                            anyActive = true;
-                            break;
-                        }
-                        var op = cache[members[m]].el.style.opacity;
-                        if (op !== '') {
-                            var val = parseFloat(op);
-                            if (!isNaN(val) && val > maxOp) maxOp = val;
-                        }
-                    }
-                    if (anyActive) {
-                        for (var m = 0; m < members.length; m++) {
-                            cache[members[m]].el.style.opacity = '1';
-                        }
-                    } else if (maxOp > 0) {
-                        var maxOpStr = String(maxOp);
-                        for (var m = 0; m < members.length; m++) {
-                            cache[members[m]].el.style.opacity = maxOpStr;
-                        }
-                    }
-                    // maxOp <= 0: group is hidden (outside window), leave as-is
-                }
-            }
-        }
-
-        // Re-apply window opacity immediately (called when sliders change mid-animation)
-        function reapplyWindowNow() {
-            var cache = window._windowActiveCache;
-            var idx = window._windowActiveIdx;
-            if (!cache || idx < 0) return;
-            applyWindowOpacity(cache, idx, idx);
-        }
-
-        // Replace numeric value with "All" when slider is at maximum
-        function updateWindowMaxLabel(elemId, val, maxVal) {
-            var el = document.getElementById(elemId);
-            if (!el) return;
-            var numInput = el.querySelector('input[type="number"]');
-            if (!numInput) return;
-            if (val >= maxVal) {
-                numInput.style.display = 'none';
-                var maxSpan = el.querySelector('.max-label');
-                if (!maxSpan) {
-                    maxSpan = document.createElement('span');
-                    maxSpan.className = 'max-label';
-                    maxSpan.style.cssText = 'font-weight: bold; opacity: 0.85;';
-                    numInput.parentNode.insertBefore(maxSpan, numInput.nextSibling);
-                }
-                maxSpan.textContent = 'All';
-                maxSpan.style.display = '';
-            } else {
-                numInput.style.display = '';
-                var maxSpan = el.querySelector('.max-label');
-                if (maxSpan) maxSpan.style.display = 'none';
-            }
-            // Always inject a hint at the right end of the slider track
-            if (!el.querySelector('.max-hint')) {
-                var rangeWrap = el.querySelector('input[type="range"]');
-                if (rangeWrap) {
-                    var hint = document.createElement('span');
-                    hint.className = 'max-hint';
-                    hint.textContent = 'All';
-                    hint.style.cssText = 'position: absolute; right: 0; bottom: -1.2em; font-size: 0.7em; opacity: 0.5;';
-                    var parent = rangeWrap.parentNode;
-                    if (parent) {
-                        parent.style.position = 'relative';
-                        parent.appendChild(hint);
-                    }
-                }
-            }
-        }
-
-        // Expose to global scope so Gradio inline js= callbacks can call them
-        window.rebuildWindowGradient = rebuildWindowGradient;
-        window.reapplyWindowNow = reapplyWindowNow;
-        window.updateWindowMaxLabel = updateWindowMaxLabel;
-        window.saveAnimSettings = saveAnimSettings;
-        window.loadAnimSettings = loadAnimSettings;
-
-        // Inject "All" hints on slider tracks once Gradio renders them
-        setTimeout(function() {
-            updateWindowMaxLabel('anim-window-prev', window.ANIM_WINDOW_PREV, window.ANIM_WINDOW_PREV_MAX);
-            updateWindowMaxLabel('anim-window-after', window.ANIM_WINDOW_AFTER, window.ANIM_WINDOW_AFTER_MAX);
-        }, 500);
-
-        // Clear inline opacity from all words/chars in a card (Window mode cleanup)
-        // Applies mode's prev_opacity instead of removing opacity entirely
-        function clearWindowOpacity(card) {
-            var prevOp = window.ANIM_OPACITY_PREV;
-            card.querySelectorAll('.word, .char').forEach(function(el) {
-                // Apply mode's prev_opacity consistently:
-                // - Reveal/Fade (1.0): full visibility
-                // - Spotlight (0.3): dimmed
-                // - Isolate/Consume (0): hidden/disappear
-                if (prevOp >= 1) {
-                    el.style.removeProperty('opacity');
-                } else {
-                    el.style.opacity = String(prevOp);
-                }
-            });
-        }
-
-        function clearHighlights(card) {
-            card.querySelectorAll('.word.active, .word.reached, .char.active, .char.reached').forEach(function(w) {
-                w.classList.remove('active', 'reached');
-            });
-            clearWindowOpacity(card);
-            card.classList.remove('anim-window', 'anim-chars');
-        }
-
-        function stopAnimation(audio, card) {
-            if (audio._rafId) {
-                cancelAnimationFrame(audio._rafId);
-                audio._rafId = null;
-            }
-            if (card) {
-                // Apply mode's prev_opacity to last active word before clearing
-                var activeEl = card.querySelector('.word.active, .char.active');
-                if (activeEl && window.ANIM_OPACITY_PREV < 1) {
-                    activeEl.style.opacity = String(window.ANIM_OPACITY_PREV);
-                }
-                clearHighlights(card);
-            }
-        }
-
-        function startAnimation(audio, card) {
-            var lastWordIdx = -1;
-            var lastGranularity = window.ANIM_GRANULARITY;
-            var lastOpacityPrev = window.ANIM_OPACITY_PREV;
-            var lastSeenVersion = window._windowSettingsVersion;
-            // Segment audio is trimmed, so currentTime starts at 0.
-            // Word timestamps are absolute, so we need to add segment offset.
-            var segOffset = parseFloat(card.dataset.startTime) || 0;
-
-            function tick() {
-                if (audio.paused || audio.ended) return;
-                var wordCache = getActiveCache(audio);
-                var currentTime = audio.currentTime + segOffset;
-
-                // Granularity switched mid-animation — clear old highlights and reset
-                if (window.ANIM_GRANULARITY !== lastGranularity) {
-                    animDebug('TICK', 'Granularity changed: ' + lastGranularity + ' -> ' + window.ANIM_GRANULARITY);
-                    card.querySelectorAll('.word.active, .word.reached, .char.active, .char.reached').forEach(function(w) {
-                        w.classList.remove('active', 'reached');
-                    });
-                    clearWindowOpacity(card);
-                    lastWordIdx = -1;
-                    lastGranularity = window.ANIM_GRANULARITY;
-                }
-
-                // Mode changed mid-animation — refresh all reached words with new opacity
-                if (window.ANIM_OPACITY_PREV !== lastOpacityPrev) {
-                    animDebug('TICK', 'Mode changed: prevOp ' + lastOpacityPrev + ' -> ' + window.ANIM_OPACITY_PREV);
-                    card.querySelectorAll('.word.reached, .char.reached').forEach(function(el) {
-                        if (window.ANIM_OPACITY_PREV >= 1) {
-                            el.style.removeProperty('opacity');
-                        } else {
-                            el.style.opacity = String(window.ANIM_OPACITY_PREV);
-                        }
-                    });
-                    lastOpacityPrev = window.ANIM_OPACITY_PREV;
-                }
-
-                // Slider settings changed mid-animation — reapply window opacity
-                if (window._windowSettingsVersion !== lastSeenVersion) {
-                    if (lastWordIdx >= 0) {
-                        applyWindowOpacity(wordCache, lastWordIdx, lastWordIdx);
-                    }
-                    lastSeenVersion = window._windowSettingsVersion;
-                }
-
-                var newWordIdx = -1;
-                var searchPath = '';
-                // Fast path: check current word, then next (covers ~99% of frames)
-                if (lastWordIdx >= 0 && lastWordIdx < wordCache.length &&
-                    currentTime >= wordCache[lastWordIdx].start && currentTime < wordCache[lastWordIdx].end) {
-                    newWordIdx = lastWordIdx;
-                    searchPath = 'same';
-                } else if (lastWordIdx + 1 < wordCache.length &&
-                    currentTime >= wordCache[lastWordIdx + 1].start && currentTime < wordCache[lastWordIdx + 1].end) {
-                    newWordIdx = lastWordIdx + 1;
-                    searchPath = 'next';
-                } else {
-                    // Fallback: full scan (seeking, granularity switch, etc.)
-                    searchPath = 'scan';
-                    for (var i = 0; i < wordCache.length; i++) {
-                        if (currentTime >= wordCache[i].start && currentTime < wordCache[i].end) {
-                            newWordIdx = i;
-                            break;
-                        }
-                    }
-                    // Clamp to last word when past its end but audio hasn't ended yet
-                    if (newWordIdx === -1 && wordCache.length > 0 && currentTime >= wordCache[wordCache.length - 1].start) {
-                        newWordIdx = wordCache.length - 1;
-                        searchPath = 'clamp';
-                    }
-                }
-
-                // Only update DOM if word changed
-                if (newWordIdx !== lastWordIdx) {
-                    var newText = newWordIdx >= 0 ? wordCache[newWordIdx].el.textContent.substring(0, 15) : '-';
-                    animDebug('TICK', 'idx change: ' + lastWordIdx + ' -> ' + newWordIdx + ' (' + searchPath + ') t=' + currentTime.toFixed(3) + ' "' + newText + '"');
-                    if (newWordIdx === -1 && wordCache.length > 0) {
-                        // No match - log surrounding timing info
-                        var first = wordCache[0];
-                        var last = wordCache[wordCache.length - 1];
-                        animDebug('TICK', '  NO MATCH: t=' + currentTime.toFixed(3) + ' cache[0]=[' + first.start.toFixed(3) + ',' + first.end.toFixed(3) + '] cache[' + (wordCache.length-1) + ']=[' + last.start.toFixed(3) + ',' + last.end.toFixed(3) + ']');
-                    }
-                    if (lastWordIdx >= 0 && lastWordIdx < wordCache.length) {
-                        applyClassToGroup(wordCache, lastWordIdx, 'active', false);
-                        applyClassToGroup(wordCache, lastWordIdx, 'reached', true);
-                    }
-                    if (newWordIdx >= 0) {
-                        applyClassToGroup(wordCache, newWordIdx, 'active', true);
-                        if (lastWordIdx === -1) {
-                            // First highlight — catch up any skipped words (with group support)
-                            for (var j = 0; j < newWordIdx; j++) {
-                                applyClassToGroup(wordCache, j, 'reached', true);
-                            }
-                        }
-                    }
-                    if (newWordIdx >= 0) {
-                        applyWindowOpacity(wordCache, newWordIdx, lastWordIdx);
-                    }
-                    lastWordIdx = newWordIdx;
-                }
-            }
-
-            function rafLoop() {
-                tick();
-                if (!audio.paused && !audio.ended) {
-                    audio._rafId = requestAnimationFrame(rafLoop);
-                }
-            }
-            audio._rafId = requestAnimationFrame(rafLoop);
-        }
-
-        function toggleAnimation(btn) {
-            var card = btn.closest('.segment-card');
-            if (!card) return;
-            var audio = card.querySelector('audio');
-            if (!audio) return;
-
-            var isActive = btn.classList.toggle('active');
-            if (isActive) {
-                btn.textContent = 'Stop';
-                // Apply window engine class to card
-                card.classList.add('anim-window');
-                if (window.ANIM_GRANULARITY === 'Characters') {
-                    card.classList.add('anim-chars');
-                }
-                // Build both caches upfront for live granularity switching
-                audio._cacheWords = initCacheFor(card, '.segment-text .word');
-                audio._cacheChars = initCacheFor(card, '.segment-text .char');
-                animDebug('START', 'toggleAnimation: words=' + audio._cacheWords.length + ' chars=' + audio._cacheChars.length + ' granularity=' + window.ANIM_GRANULARITY);
-                dumpCacheTimestamps(audio._cacheWords, 'Words');
-                dumpCacheTimestamps(audio._cacheChars, 'Chars');
-                activateAudio(audio);
-                startAnimation(audio, card);
-                audio.play();
-            } else {
-                btn.textContent = 'Animate';
-                audio.pause();
-                stopAnimation(audio, card);
-            }
-        }
-
-
-        // =====================================================================
-        // Surah name ligature map (font triggers)
-        // =====================================================================
-        var surahLigatures = __SURAH_LIGATURES_JSON__;
-
-        // =====================================================================
-        // Animate All — continuous text stream with repetition handling
-        // =====================================================================
-        var animateAllState = {
-            active: false,
-            currentIdx: 0,
-            segments: [],   // [{startTime, endTime, cacheWords, cacheChars, wordEls}]
-            rafId: null,
-            megaCard: null,
-            textFlow: null,  // the unified .mega-text-flow container
-            btn: null,
-            unifiedCacheWords: [],
-            unifiedCacheChars: [],
-            unifiedAudio: null,  // Single audio element for entire recording
-            accordionParent: null,
-            accordionNextSibling: null,
-            completedIdx: -1
-        };
-
-        function buildMegaCard() {
-            var container = document.querySelector('.segments-container');
-            if (!container) return null;
-
-            // Create unified audio element from full audio URL
-            var fullAudioUrl = container.dataset.fullAudio;
-            var unifiedAudio = null;
-            if (fullAudioUrl) {
-                unifiedAudio = document.createElement('audio');
-                unifiedAudio.src = fullAudioUrl;
-                unifiedAudio.preload = 'auto';
-                unifiedAudio.style.display = 'none';
-            }
-
-            var cards = Array.from(container.querySelectorAll('.segment-card'));
-            var mega = document.createElement('div');
-            mega.className = 'mega-card';
-            var textFlow = document.createElement('div');
-            textFlow.className = 'mega-text-flow';
-
-            var renderedPositions = {};  // data-pos string -> DOM element in textFlow
-            var renderedCharEls = {};    // data-pos string -> Array of .char elements
-            var renderedMarkers = {};    // "surah:marker" -> true, to avoid duplicate verse markers
-            var frag = document.createDocumentFragment();
-            var segments = [];
-            var lastSurah = null;
-            var pendingSpecial = null;  // buffered special text to flush after surah separator
-
-            // Helper: flush pending special line into fragment
-            function flushPendingSpecial() {
-                if (!pendingSpecial) return;
-                var prevChild = frag.lastChild;
-                if (prevChild && prevChild.classList && prevChild.classList.contains('mega-special-line')) {
-                    prevChild.textContent += '    ' + pendingSpecial;
-                } else {
-                    var specialLine = document.createElement('div');
-                    specialLine.className = 'mega-special-line';
-                    specialLine.textContent = pendingSpecial;
-                    frag.appendChild(specialLine);
-                }
-                pendingSpecial = null;
-            }
-
-            cards.forEach(function(card) {
-                var btn = card.querySelector('.animate-btn');
-                var ref = (card.dataset.matchedRef || '').trim();
-                var isSpecial = (ref === 'Basmala' || ref === "Isti'adha");
-
-                if (!btn || btn.disabled) {
-                    // Special segment without timestamps — buffer static text
-                    if (isSpecial || ref === '') {
-                        var textEl = card.querySelector('.segment-text');
-                        if (textEl) {
-                            var txt = textEl.textContent.trim();
-                            if (txt) {
-                                if (pendingSpecial) {
-                                    pendingSpecial += '    ' + txt;
-                                } else {
-                                    pendingSpecial = txt;
-                                }
-                            }
-                        }
-                    }
-                    return;
-                }
-
-                // Animated special segment (has timestamps) — centered line with word animation
-                if (isSpecial) {
-                    var textEl = card.querySelector('.segment-text');
-                    if (!textEl) return;
-
-                    // Extract segment boundaries from card data attributes
-                    var segStartTime = parseFloat(card.dataset.startTime) || 0;
-                    var segEndTime = parseFloat(card.dataset.endTime) || 0;
-
-                    // Flush any buffered specials first
-                    flushPendingSpecial();
-
-                    var specialDiv;
-                    var prevChild = frag.lastChild;
-                    if (prevChild && prevChild.classList && prevChild.classList.contains('mega-special-line')) {
-                        specialDiv = prevChild;
-                        specialDiv.appendChild(document.createTextNode('    '));
-                    } else {
-                        specialDiv = document.createElement('div');
-                        specialDiv.className = 'mega-special-line';
-                        frag.appendChild(specialDiv);
-                    }
-
-                    var sourceWords = Array.from(textEl.querySelectorAll('.word'));
-                    var segWordEls = [];
-                    var segWordTimings = [];
-                    var segCharTimings = [];
-                    var unifiedCharEls = {};
-
-                    sourceWords.forEach(function(node) {
-                        var pos = node.dataset.pos;
-                        var clone = node.cloneNode(true);
-                        specialDiv.appendChild(document.createTextNode(' '));
-                        specialDiv.appendChild(clone);
-                        if (pos) renderedPositions[pos] = clone;
-                        segWordEls.push(clone);
-
-                        segWordTimings.push({
-                            start: parseFloat(node.dataset.start) || 0,
-                            end: parseFloat(node.dataset.end) || 0
-                        });
-
-                        var wordIdx = segWordEls.length - 1;
-                        var chars = Array.from(clone.children);
-                        unifiedCharEls[wordIdx] = chars;
-                        if (pos) renderedCharEls[pos] = chars;
-
-                        Array.from(node.children).forEach(function(srcChar) {
-                            segCharTimings.push({
-                                start: parseFloat(srcChar.dataset.start) || 0,
-                                end: parseFloat(srcChar.dataset.end) || 0,
-                                parentWordIdx: wordIdx
-                            });
-                        });
-                    });
-
-                    if (segWordEls.length === 0) return;
-
-                    var cacheWords = segWordEls.map(function(el, j) {
-                        return { el: el, start: segWordTimings[j].start, end: segWordTimings[j].end };
-                    });
-                    var cacheChars = [];
-                    var charCountPerWord = {};
-                    segCharTimings.forEach(function(ct) {
-                        var wIdx = ct.parentWordIdx;
-                        if (charCountPerWord[wIdx] === undefined) charCountPerWord[wIdx] = 0;
-                        var charIdxInWord = charCountPerWord[wIdx]++;
-                        var unifiedChars = unifiedCharEls[wIdx];
-                        if (unifiedChars && charIdxInWord < unifiedChars.length) {
-                            cacheChars.push({ el: unifiedChars[charIdxInWord], start: ct.start, end: ct.end });
-                        }
-                    });
-
-                    segments.push({
-                        startTime: segStartTime,
-                        endTime: segEndTime,
-                        cacheWords: cacheWords,
-                        cacheChars: cacheChars,
-                        wordEls: segWordEls
-                    });
-                    return;
-                }
-
-                var textEl = card.querySelector('.segment-text');
-                if (!textEl) return;
-
-                // Extract segment boundaries from card data attributes
-                var segStartTime = parseFloat(card.dataset.startTime) || 0;
-                var segEndTime = parseFloat(card.dataset.endTime) || 0;
-
-                // Detect fused special prefix: leading .word elements with :0:0: in data-pos
-                var allWords = Array.from(textEl.querySelectorAll('.word'));
-                var fusedWords = [];
-                var fusedHasTimestamps = false;
-                for (var fi = 0; fi < allWords.length; fi++) {
-                    var fpos = allWords[fi].dataset.pos || '';
-                    if (fpos && fpos.indexOf(':0:0:') !== -1) {
-                        fusedWords.push(allWords[fi]);
-                        if (allWords[fi].dataset.start) fusedHasTimestamps = true;
-                    } else if (fpos) {
-                        break;  // stop at first verse word
-                    } else {
-                        // No data-pos at all (old-style) — static fallback
-                        fusedWords = [];
-                        break;
-                    }
-                }
-
-                if (fusedWords.length > 0 && fusedHasTimestamps) {
-                    // Animated fused prefix — clone into a mega-special-line, share audio
-                    flushPendingSpecial();
-                    var fusedDiv;
-                    var prevChild = frag.lastChild;
-                    if (prevChild && prevChild.classList && prevChild.classList.contains('mega-special-line')) {
-                        fusedDiv = prevChild;
-                        fusedDiv.appendChild(document.createTextNode('    '));
-                    } else {
-                        fusedDiv = document.createElement('div');
-                        fusedDiv.className = 'mega-special-line';
-                        frag.appendChild(fusedDiv);
-                    }
-                    var fusedWordEls = [];
-                    var fusedWordTimings = [];
-                    var fusedCharTimings = [];
-                    var fusedCharEls = {};
-                    fusedWords.forEach(function(node) {
-                        var clone = node.cloneNode(true);
-                        fusedDiv.appendChild(document.createTextNode(' '));
-                        fusedDiv.appendChild(clone);
-                        var pos = node.dataset.pos;
-                        if (pos) renderedPositions[pos] = clone;
-                        fusedWordEls.push(clone);
-                        fusedWordTimings.push({
-                            start: parseFloat(node.dataset.start) || 0,
-                            end: parseFloat(node.dataset.end) || 0
-                        });
-                        var wordIdx = fusedWordEls.length - 1;
-                        var chars = Array.from(clone.children);
-                        fusedCharEls[wordIdx] = chars;
-                        if (pos) renderedCharEls[pos] = chars;
-                        Array.from(node.children).forEach(function(srcChar) {
-                            fusedCharTimings.push({
-                                start: parseFloat(srcChar.dataset.start) || 0,
-                                end: parseFloat(srcChar.dataset.end) || 0,
-                                parentWordIdx: wordIdx
-                            });
-                        });
-                    });
-                    // These fused words will be added to the same segment entry below
-                    // (they share the audio with the verse words)
-                } else if (fusedWords.length > 0) {
-                    // Fused prefix without timestamps — static text fallback
-                    var fusedTxt = fusedWords.map(function(w) { return w.textContent; }).join(' ').trim();
-                    if (fusedTxt) {
-                        if (pendingSpecial) {
-                            pendingSpecial += '    ' + fusedTxt;
-                        } else {
-                            pendingSpecial = fusedTxt;
-                        }
-                    }
-                }
-
-                var sourceWords = Array.from(textEl.querySelectorAll('.word'));
-                var segWordEls = [];    // unified DOM elements this segment animates
-                var segWordTimings = []; // {start, end} from source card
-                var segCharTimings = []; // [{start, end, parentWordIdx}, ...]
-                var unifiedCharEls = {};  // wordIdx -> Array of .char elements in unified DOM
-
-                // Iterate source childNodes to copy words + verse markers, deduplicating by data-pos
-                var childNodes = Array.from(textEl.childNodes);
-                var lastWasNew = false;  // track if the last word was newly appended
-                childNodes.forEach(function(node) {
-                    if (node.nodeType === Node.ELEMENT_NODE && node.classList && node.classList.contains('word')) {
-                        var pos = node.dataset.pos;
-                        if (!pos) return;  // skip words without data-pos
-                        if (pos.indexOf(':0:0:') !== -1) return;  // skip fused prefix words (handled above)
-                        if (renderedPositions[pos]) {
-                            // Word already in unified text — reuse existing element
-                            segWordEls.push(renderedPositions[pos]);
-                            lastWasNew = false;
-                        } else {
-                            // New word — clone and append
-                            var clone = node.cloneNode(true);
-                            // Detect surah change for separator
-                            var posParts = pos.split(':');
-                            if (posParts.length >= 1 && posParts[0]) {
-                                var wordSurah = posParts[0];
-                                if (wordSurah !== lastSurah) {
-                                    var sepDiv = document.createElement('div');
-                                    sepDiv.className = 'mega-surah-separator';
-                                    if (lastSurah === null) sepDiv.style.borderTop = 'none';
-                                    var ligKey = 'surah-' + wordSurah;
-                                    sepDiv.textContent = surahLigatures[ligKey] || wordSurah;
-                                    // Insert before any trailing special line so separator comes before basmala
-                                    var trailingSpecial = frag.lastChild;
-                                    if (trailingSpecial && trailingSpecial.classList && trailingSpecial.classList.contains('mega-special-line')) {
-                                        frag.insertBefore(sepDiv, trailingSpecial);
-                                    } else {
-                                        frag.appendChild(sepDiv);
-                                    }
-                                }
-                                lastSurah = wordSurah;
-                            }
-                            // Flush buffered special text after separator, before first word
-                            flushPendingSpecial();
-                            frag.appendChild(document.createTextNode(' '));
-                            frag.appendChild(clone);
-                            if (pos) {
-                                renderedPositions[pos] = clone;
-                            }
-                            segWordEls.push(clone);
-                            lastWasNew = true;
-                        }
-                        // Read timing from source word
-                        segWordTimings.push({
-                            start: parseFloat(node.dataset.start) || 0,
-                            end: parseFloat(node.dataset.end) || 0
-                        });
-                        // Read char timings from source and cache unified char elements
-                        var wordIdx = segWordEls.length - 1;
-                        var pos2 = node.dataset.pos;
-                        if (pos2 && renderedCharEls[pos2]) {
-                            unifiedCharEls[wordIdx] = renderedCharEls[pos2];
-                        } else {
-                            var chars = Array.from(segWordEls[wordIdx].children);
-                            unifiedCharEls[wordIdx] = chars;
-                            if (pos2) renderedCharEls[pos2] = chars;
-                        }
-                        var srcChars = Array.from(node.children);
-                        srcChars.forEach(function(srcChar) {
-                            segCharTimings.push({
-                                start: parseFloat(srcChar.dataset.start) || 0,
-                                end: parseFloat(srcChar.dataset.end) || 0,
-                                parentWordIdx: wordIdx
-                            });
-                        });
-                    } else if (node.nodeType === Node.ELEMENT_NODE && lastWasNew) {
-                        // Verse marker or other non-word element — append only if preceding word was new
-                        var markerText = node.textContent || '';
-                        var markerKey = (lastSurah || '') + ':' + markerText.trim();
-                        if (!markerText.trim() || !renderedMarkers[markerKey]) {
-                            frag.appendChild(document.createTextNode(' '));
-                            var markerSpan = document.createElement('span');
-                            markerSpan.className = 'verse-marker';
-                            markerSpan.title = 'Jump to this verse';
-                            markerSpan.appendChild(node.cloneNode(true));
-                            // Extract verse from preceding word's data-pos (surah:ayah:word)
-                            var lastWordPos = segWordEls.length > 0 ? (segWordEls[segWordEls.length - 1].dataset.pos || '') : '';
-                            var posPartsM = lastWordPos.split(':');
-                            if (posPartsM.length >= 2) markerSpan.dataset.verse = posPartsM[0] + ':' + posPartsM[1];
-                            frag.appendChild(markerSpan);
-                            if (markerText.trim()) renderedMarkers[markerKey] = true;
-                        }
-                    } else if (node.nodeType === Node.TEXT_NODE && lastWasNew) {
-                        // Verse markers are plain text nodes (e.g. ۝٢٥٥), not elements
-                        var txt = node.textContent || '';
-                        if (txt.trim()) {
-                            var markerKey = (lastSurah || '') + ':' + txt.trim();
-                            if (!renderedMarkers[markerKey]) {
-                                frag.appendChild(document.createTextNode(' '));
-                                var markerSpan2 = document.createElement('span');
-                                markerSpan2.className = 'verse-marker';
-                                markerSpan2.title = 'Jump to this verse';
-                                markerSpan2.textContent = txt.trim();
-                                var lastWordPos2 = segWordEls.length > 0 ? (segWordEls[segWordEls.length - 1].dataset.pos || '') : '';
-                                var posPartsM2 = lastWordPos2.split(':');
-                                if (posPartsM2.length >= 2) markerSpan2.dataset.verse = posPartsM2[0] + ':' + posPartsM2[1];
-                                frag.appendChild(markerSpan2);
-                                renderedMarkers[markerKey] = true;
-                            }
-                        }
-                    }
-                });
-
-                if (segWordEls.length === 0) return;
-
-                // Build caches: pair source timings with unified DOM elements
-                var cacheWords = segWordEls.map(function(el, j) {
-                    return {
-                        el: el,
-                        start: segWordTimings[j].start,
-                        end: segWordTimings[j].end
-                    };
-                });
-
-                // Build char cache using pre-collected unified char elements
-                var cacheChars = [];
-                var charCountPerWord = {};
-                segCharTimings.forEach(function(ct) {
-                    var wIdx = ct.parentWordIdx;
-                    if (charCountPerWord[wIdx] === undefined) charCountPerWord[wIdx] = 0;
-                    var charIdxInWord = charCountPerWord[wIdx]++;
-                    var unifiedChars = unifiedCharEls[wIdx];
-                    if (unifiedChars && charIdxInWord < unifiedChars.length) {
-                        cacheChars.push({
-                            el: unifiedChars[charIdxInWord],
-                            start: ct.start,
-                            end: ct.end
-                        });
-                    }
-                });
-
-                // Prepend animated fused prefix words/chars (same audio segment)
-                if (typeof fusedWordEls !== 'undefined' && fusedWordEls.length > 0 && fusedHasTimestamps) {
-                    var fusedCacheWords = fusedWordEls.map(function(el, j) {
-                        return { el: el, start: fusedWordTimings[j].start, end: fusedWordTimings[j].end };
-                    });
-                    var fusedCacheChars = [];
-                    var fusedCharCount = {};
-                    fusedCharTimings.forEach(function(ct) {
-                        var wIdx = ct.parentWordIdx;
-                        if (fusedCharCount[wIdx] === undefined) fusedCharCount[wIdx] = 0;
-                        var charIdx = fusedCharCount[wIdx]++;
-                        var chars = fusedCharEls[wIdx];
-                        if (chars && charIdx < chars.length) {
-                            fusedCacheChars.push({ el: chars[charIdx], start: ct.start, end: ct.end });
-                        }
-                    });
-                    cacheWords = fusedCacheWords.concat(cacheWords);
-                    cacheChars = fusedCacheChars.concat(cacheChars);
-                    segWordEls = fusedWordEls.concat(segWordEls);
-                    // Reset fused state for next card
-                    fusedWordEls = []; fusedHasTimestamps = false;
-                }
-
-                // Build group index for segment caches (for character grouping in animations)
-                buildGroupIndex(cacheWords);
-                buildGroupIndex(cacheChars);
-
-                segments.push({
-                    startTime: segStartTime,
-                    endTime: segEndTime,
-                    cacheWords: cacheWords,
-                    cacheChars: cacheChars,
-                    wordEls: segWordEls
-                });
-            });
-
-            // Flush any remaining buffered special text
-            flushPendingSpecial();
-
-            textFlow.appendChild(frag);
-            // Build unified caches so Window mode spans all segments.
-            // Deduplicate: each DOM element appears once (shared elements from
-            // repeated segments reuse the first segment's unified index).
-            var unifiedWords = [];
-            var unifiedChars = [];
-            var wordElToIdx = new Map();
-            var charElToIdx = new Map();
-            var elToFirstSeg = new Map();
-            segments.forEach(function(seg, sIdx) {
-                seg.sharedEls = new Set();
-                seg.unifiedWordMap = [];
-                seg.unifiedCharMap = [];
-                for (var i = 0; i < seg.cacheWords.length; i++) {
-                    var el = seg.cacheWords[i].el;
-                    if (wordElToIdx.has(el)) {
-                        seg.unifiedWordMap.push(wordElToIdx.get(el));
-                        seg.sharedEls.add(el);
-                        segments[elToFirstSeg.get(el)].sharedEls.add(el);
-                    } else {
-                        var idx = unifiedWords.length;
-                        wordElToIdx.set(el, idx);
-                        elToFirstSeg.set(el, sIdx);
-                        seg.unifiedWordMap.push(idx);
-                        unifiedWords.push(seg.cacheWords[i]);
-                    }
-                }
-                for (var i = 0; i < seg.cacheChars.length; i++) {
-                    var el = seg.cacheChars[i].el;
-                    if (charElToIdx.has(el)) {
-                        seg.unifiedCharMap.push(charElToIdx.get(el));
-                    } else {
-                        var idx = unifiedChars.length;
-                        charElToIdx.set(el, idx);
-                        seg.unifiedCharMap.push(idx);
-                        unifiedChars.push(seg.cacheChars[i]);
-                    }
-                }
-            });
-            // Tag each word/char element with its segment index for click-to-seek
-            segments.forEach(function(seg, sIdx) {
-                seg.cacheWords.forEach(function(c) { c.el.dataset.segIdx = sIdx; });
-                seg.cacheChars.forEach(function(c) { c.el.dataset.segIdx = sIdx; });
-            });
-            // Build group index for unified caches (for character grouping across all segments)
-            buildGroupIndex(unifiedWords);
-            buildGroupIndex(unifiedChars);
-
-            animateAllState.segments = segments;
-            animateAllState.unifiedCacheWords = unifiedWords;
-            animateAllState.unifiedCacheChars = unifiedChars;
-            animateAllState.textFlow = textFlow;
-            animDebug('MEGA', 'buildMegaCard: ' + segments.length + ' segments, unifiedWords=' + unifiedWords.length + ' unifiedChars=' + unifiedChars.length);
-            dumpCacheTimestamps(unifiedWords, 'Unified Words');
-            dumpCacheTimestamps(unifiedChars, 'Unified Chars');
-            mega.appendChild(textFlow);
-
-            // Build top bar with Exit button (placed outside mega card)
-            var topBar = document.createElement('div');
-            topBar.className = 'mega-top-bar';
-            var exitBtn = document.createElement('button');
-            exitBtn.className = 'mega-exit-btn';
-            exitBtn.textContent = 'Exit';
-            exitBtn.title = 'Exit and return to individual segments';
-            topBar.appendChild(exitBtn);
-            // Speed dropdown
-            var speedSelect = document.createElement('select');
-            speedSelect.className = 'mega-speed-select';
-            speedSelect.title = 'Playback speed';
-            [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2].forEach(function(r) {
-                var opt = document.createElement('option');
-                opt.value = r;
-                opt.textContent = r + 'x';
-                if (r === (window.ANIM_PLAYBACK_RATE || 1)) opt.selected = true;
-                speedSelect.appendChild(opt);
-            });
-            speedSelect.addEventListener('change', function() {
-                var rate = parseFloat(speedSelect.value);
-                window.ANIM_PLAYBACK_RATE = rate;
-                if (animateAllState.unifiedAudio) {
-                    animateAllState.unifiedAudio.playbackRate = rate;
-                }
-                saveAnimSettings();
-            });
-            topBar.appendChild(speedSelect);
-            return {mega: mega, topBar: topBar, unifiedAudio: unifiedAudio};
-        }
-
-        // Reset highlight state for backward transitions (cache-based, no DOM queries)
-        function resetHighlightsFrom(segIdx) {
-            for (var s = segIdx; s < animateAllState.segments.length; s++) {
-                var seg = animateAllState.segments[s];
-                seg.cacheWords.forEach(function(c) {
-                    c.el.classList.remove('active', 'reached');
-                    c.el.style.removeProperty('opacity');
-                });
-                seg.cacheChars.forEach(function(c) {
-                    c.el.classList.remove('active', 'reached');
-                    c.el.style.removeProperty('opacity');
-                });
-            }
-            // Re-apply 'reached' to shared elements belonging to completed earlier segments
-            for (var s = 0; s < segIdx && s <= animateAllState.completedIdx; s++) {
-                var prev = animateAllState.segments[s];
-                if (!prev.sharedEls || prev.sharedEls.size === 0) continue;
-                prev.cacheWords.forEach(function(c) {
-                    if (prev.sharedEls.has(c.el)) c.el.classList.add('reached');
-                });
-                prev.cacheChars.forEach(function(c) {
-                    if (prev.sharedEls.has(c.el)) c.el.classList.add('reached');
-                });
-            }
-        }
-
-        function startSegmentTick(seg, audio, segStartTime, segEndTime) {
-            var lastWordIdx = -1;
-            var lastGranularity = window.ANIM_GRANULARITY;
-            var lastOpacityPrev = window.ANIM_OPACITY_PREV;
-            var lastSeenVersion = window._windowSettingsVersion;
-            var segIdx = animateAllState.currentIdx;
-            animDebug('MEGA', 'startSegmentTick seg=' + segIdx + ' cacheWords=' + seg.cacheWords.length + ' cacheChars=' + seg.cacheChars.length + ' bounds=[' + segStartTime.toFixed(3) + ',' + segEndTime.toFixed(3) + ']');
-            function tick() {
-                if (audio.paused) return;
-                var currentTime = audio.currentTime;
-
-                // Check segment end boundary (unified audio spans all segments)
-                if (currentTime >= segEndTime) {
-                    onAnimateAllSegmentEnd();
-                    return;
-                }
-
-                var cache = window.ANIM_GRANULARITY === 'Characters' ? seg.cacheChars : seg.cacheWords;
-                if (window.ANIM_GRANULARITY !== lastGranularity) {
-                    animDebug('MEGA', 'Granularity changed: ' + lastGranularity + ' -> ' + window.ANIM_GRANULARITY);
-                    // Granularity changed mid-animation: reset this segment's elements
-                    seg.wordEls.forEach(function(w) {
-                        w.classList.remove('active');
-                        w.style.removeProperty('opacity');
-                        w.querySelectorAll('.char').forEach(function(c) {
-                            c.classList.remove('active');
-                            c.style.removeProperty('opacity');
-                        });
-                    });
-                    // Clear inline opacity across all segments (previous segments may have inline opacity)
-                    animateAllState.unifiedCacheWords.forEach(function(c) { c.el.style.removeProperty('opacity'); });
-                    animateAllState.unifiedCacheChars.forEach(function(c) { c.el.style.removeProperty('opacity'); });
-                    lastWordIdx = -1;
-                    lastGranularity = window.ANIM_GRANULARITY;
-                }
-
-                // Mode changed mid-animation — refresh all reached words with new opacity
-                if (window.ANIM_OPACITY_PREV !== lastOpacityPrev) {
-                    animDebug('MEGA', 'Mode changed: prevOp ' + lastOpacityPrev + ' -> ' + window.ANIM_OPACITY_PREV);
-                    animateAllState.unifiedCacheWords.forEach(function(c) {
-                        if (c.el.classList.contains('reached')) {
-                            if (window.ANIM_OPACITY_PREV >= 1) {
-                                c.el.style.removeProperty('opacity');
-                            } else {
-                                c.el.style.opacity = String(window.ANIM_OPACITY_PREV);
-                            }
-                        }
-                    });
-                    animateAllState.unifiedCacheChars.forEach(function(c) {
-                        if (c.el.classList.contains('reached')) {
-                            if (window.ANIM_OPACITY_PREV >= 1) {
-                                c.el.style.removeProperty('opacity');
-                            } else {
-                                c.el.style.opacity = String(window.ANIM_OPACITY_PREV);
-                            }
-                        }
-                    });
-                    lastOpacityPrev = window.ANIM_OPACITY_PREV;
-                }
-
-                // Slider settings changed mid-animation — reapply window opacity
-                if (window._windowSettingsVersion !== lastSeenVersion) {
-                    if (lastWordIdx >= 0) {
-                        var wc = window.ANIM_GRANULARITY === 'Characters'
-                            ? animateAllState.unifiedCacheChars : animateAllState.unifiedCacheWords;
-                        var map = window.ANIM_GRANULARITY === 'Characters'
-                            ? seg.unifiedCharMap : seg.unifiedWordMap;
-                        if (map[lastWordIdx] !== undefined) {
-                            applyWindowOpacity(wc, map[lastWordIdx], map[lastWordIdx]);
-                        }
-                    }
-                    lastSeenVersion = window._windowSettingsVersion;
-                }
-
-                var newWordIdx = -1;
-                var searchPath = '';
-                // Fast path: check current word, then next (covers ~99% of frames)
-                if (lastWordIdx >= 0 && lastWordIdx < cache.length &&
-                    currentTime >= cache[lastWordIdx].start && currentTime < cache[lastWordIdx].end) {
-                    newWordIdx = lastWordIdx;
-                    searchPath = 'same';
-                } else if (lastWordIdx + 1 < cache.length &&
-                    currentTime >= cache[lastWordIdx + 1].start && currentTime < cache[lastWordIdx + 1].end) {
-                    newWordIdx = lastWordIdx + 1;
-                    searchPath = 'next';
-                } else {
-                    // Fallback: full scan (seeking, granularity switch, etc.)
-                    searchPath = 'scan';
-                    for (var i = 0; i < cache.length; i++) {
-                        if (currentTime >= cache[i].start && currentTime < cache[i].end) {
-                            newWordIdx = i;
-                            break;
-                        }
-                    }
-                    // Clamp to last word when past its end but audio hasn't ended yet
-                    if (newWordIdx === -1 && cache.length > 0 && currentTime >= cache[cache.length - 1].start) {
-                        newWordIdx = cache.length - 1;
-                        searchPath = 'clamp';
-                    }
-                }
-                if (newWordIdx !== lastWordIdx) {
-                    var newText = newWordIdx >= 0 ? cache[newWordIdx].el.textContent.substring(0, 15) : '-';
-                    animDebug('MEGA', 'seg=' + segIdx + ' idx: ' + lastWordIdx + ' -> ' + newWordIdx + ' (' + searchPath + ') t=' + currentTime.toFixed(3) + ' "' + newText + '"');
-                    if (newWordIdx === -1 && cache.length > 0) {
-                        var first = cache[0];
-                        var last = cache[cache.length - 1];
-                        animDebug('MEGA', '  NO MATCH: t=' + currentTime.toFixed(3) + ' cache[0]=[' + first.start.toFixed(3) + ',' + first.end.toFixed(3) + '] cache[' + (cache.length-1) + ']=[' + last.start.toFixed(3) + ',' + last.end.toFixed(3) + ']');
-                    }
-                    if (lastWordIdx >= 0 && lastWordIdx < cache.length) {
-                        applyClassToGroup(cache, lastWordIdx, 'active', false);
-                        applyClassToGroup(cache, lastWordIdx, 'reached', true);
-                    }
-                    if (newWordIdx >= 0) {
-                        applyClassToGroup(cache, newWordIdx, 'active', true);
-                        if (lastWordIdx === -1) {
-                            // First highlight — catch up any skipped words (with group support)
-                            for (var j = 0; j < newWordIdx; j++) {
-                                applyClassToGroup(cache, j, 'reached', true);
-                            }
-                        }
-                        // auto-scroll disabled — causes jank with frequent word changes
-                    }
-                    if (newWordIdx >= 0) {
-                        var wc = window.ANIM_GRANULARITY === 'Characters'
-                            ? animateAllState.unifiedCacheChars : animateAllState.unifiedCacheWords;
-                        var map = window.ANIM_GRANULARITY === 'Characters' ? seg.unifiedCharMap : seg.unifiedWordMap;
-                        applyWindowOpacity(wc, map[newWordIdx],
-                            lastWordIdx >= 0 ? map[lastWordIdx] : -1);
-                    }
-                    lastWordIdx = newWordIdx;
-                }
-            }
-            if (animateAllState.rafId) cancelAnimationFrame(animateAllState.rafId);
-            function rafLoop() {
-                tick();
-                // Keep looping while animation is active AND still on the same segment.
-                // When tick() triggers a segment transition, a new RAF loop is started for
-                // the new segment - this old loop must stop to avoid duplicate transitions.
-                if (animateAllState.active && !audio.paused && animateAllState.currentIdx === segIdx) {
-                    animateAllState.rafId = requestAnimationFrame(rafLoop);
-                }
-            }
-            animateAllState.rafId = requestAnimationFrame(rafLoop);
-        }
-
-        function animateSegment(idx, seekTime) {
-            var seg = animateAllState.segments[idx];
-            if (!seg) return;
-            animateAllState.currentIdx = idx;
-            // Re-tag shared elements so click-to-seek targets this segment during playback
-            seg.cacheWords.forEach(function(c) { c.el.dataset.segIdx = idx; });
-            seg.cacheChars.forEach(function(c) { c.el.dataset.segIdx = idx; });
-            var audio = animateAllState.unifiedAudio;
-            // Apply window engine class to mega card
-            var mega = animateAllState.megaCard;
-            mega.classList.add('anim-window');
-            if (window.ANIM_GRANULARITY === 'Characters') {
-                mega.classList.add('anim-chars');
-            }
-            // Detect backward transition: jumping to a segment at or before the last completed one
-            if (idx <= animateAllState.completedIdx) {
-                resetHighlightsFrom(idx);
-                // Reset completedIdx so forward progress from here is tracked correctly
-                animateAllState.completedIdx = idx - 1;
-            }
-            // Determine seek position: use provided seekTime or default to segment start
-            var targetTime = (seekTime !== undefined) ? seekTime : seg.startTime;
-            // Start playback and polling with segment boundaries
-            startSegmentTick(seg, audio, seg.startTime, seg.endTime);
-            audio.currentTime = targetTime;
-            audio.playbackRate = window.ANIM_PLAYBACK_RATE || 1;
-            audio.play();
-            // No per-segment preloading needed — unified audio already loaded
-        }
-
-        function seekToWord(wordEl) {
-            if (!animateAllState.active) return;
-            var cache = window.ANIM_GRANULARITY === 'Characters'
-                ? animateAllState.unifiedCacheChars : animateAllState.unifiedCacheWords;
-            // Find unified index and start time for the clicked word
-            var targetIdx = -1;
-            var wordStartTime = 0;
-            // For char granularity, find the first char of the clicked word
-            if (window.ANIM_GRANULARITY === 'Characters') {
-                for (var i = 0; i < cache.length; i++) {
-                    if (cache[i].el.parentElement === wordEl || cache[i].el === wordEl) {
-                        targetIdx = i;
-                        wordStartTime = cache[i].start;
-                        break;
-                    }
-                }
-            } else {
-                for (var i = 0; i < cache.length; i++) {
-                    if (cache[i].el === wordEl) {
-                        targetIdx = i;
-                        wordStartTime = cache[i].start;
-                        break;
-                    }
-                }
-            }
-            if (targetIdx < 0) return;
-            // Derive segment from word timing (more reliable than data-segIdx for shared elements)
-            var segIdx = 0;
-            for (var s = 0; s < animateAllState.segments.length; s++) {
-                var seg = animateAllState.segments[s];
-                if (wordStartTime >= seg.startTime && wordStartTime < seg.endTime) {
-                    segIdx = s;
-                    break;
-                }
-            }
-            // Reset window cache to force full reapplication (not fast path)
-            window._windowActiveIdx = -1;
-            window._windowLastPcAll = false;
-            window._windowLastAcAll = false;
-            // Update highlight state: words before target = reached, target onward = clean
-            for (var i = 0; i < cache.length; i++) {
-                cache[i].el.classList.remove('active');
-                cache[i].el.style.removeProperty('opacity');
-                if (i < targetIdx) {
-                    cache[i].el.classList.add('reached');
-                } else {
-                    cache[i].el.classList.remove('reached');
-                }
-            }
-            // Also sync the other cache (chars if in word mode, words if in char mode)
-            var otherCache = window.ANIM_GRANULARITY === 'Characters'
-                ? animateAllState.unifiedCacheWords : animateAllState.unifiedCacheChars;
-            for (var i = 0; i < otherCache.length; i++) {
-                otherCache[i].el.classList.remove('active');
-                otherCache[i].el.style.removeProperty('opacity');
-            }
-            // Re-apply window opacity immediately for the new position
-            applyWindowOpacity(cache, targetIdx, -1);
-            // Switch segment or seek within current (unified audio)
-            var audio = animateAllState.unifiedAudio;
-            if (animateAllState.rafId) {
-                cancelAnimationFrame(animateAllState.rafId);
-                animateAllState.rafId = null;
-            }
-            if (segIdx !== animateAllState.currentIdx) {
-                // Different segment — restart tick loop with new segment boundaries
-                animateSegment(segIdx, wordStartTime);
-            } else {
-                // Same segment — restart tick loop at new position for clean state
-                audio.currentTime = wordStartTime;
-                var seg = animateAllState.segments[segIdx];
-                var segStartTime = segIdx > 0 ? animateAllState.segments[segIdx - 1].endTime : 0;
-                startSegmentTick(seg, audio, segStartTime, seg.endTime);
-            }
-        }
-
-        function seekToVerseMarker(markerEl) {
-            if (!animateAllState.active) return;
-            var verse = markerEl.dataset.verse;  // e.g. "2:255"
-            if (!verse) return;
-            var prefix = verse + ':';
-            // Find first word in unified cache whose data-pos starts with this verse
-            var cache = animateAllState.unifiedCacheWords;
-            for (var i = 0; i < cache.length; i++) {
-                var pos = cache[i].el.dataset.pos || '';
-                if (pos === verse || pos.indexOf(prefix) === 0) {
-                    seekToWord(cache[i].el);
-                    return;
-                }
-            }
-        }
-
-        function onAnimateAllSegmentEnd() {
-            if (!animateAllState.active) return;
-            var seg = animateAllState.segments[animateAllState.currentIdx];
-            if (seg) {
-                // Mark all words/chars in finished segment as reached.
-                // Use mode's prev_opacity for completed elements.
-                seg.cacheWords.forEach(function(c) {
-                    if (c.el.classList.contains('active')) {
-                        c.el.style.opacity = String(window.ANIM_OPACITY_PREV);
-                    }
-                    c.el.classList.remove('active');
-                    c.el.classList.add('reached');
-                });
-                seg.cacheChars.forEach(function(c) {
-                    if (c.el.classList.contains('active')) {
-                        c.el.style.opacity = String(window.ANIM_OPACITY_PREV);
-                    }
-                    c.el.classList.remove('active');
-                    c.el.classList.add('reached');
-                });
-                animateAllState.completedIdx = animateAllState.currentIdx;
-            }
-            var nextIdx = animateAllState.currentIdx + 1;
-            if (nextIdx < animateAllState.segments.length) {
-                // Unified audio continues playing — just switch segment tracking
-                var nextSeg = animateAllState.segments[nextIdx];
-                animateAllState.currentIdx = nextIdx;
-                // Re-tag shared elements for the new segment
-                nextSeg.cacheWords.forEach(function(c) { c.el.dataset.segIdx = nextIdx; });
-                nextSeg.cacheChars.forEach(function(c) { c.el.dataset.segIdx = nextIdx; });
-                // Restart tick loop with new segment boundaries
-                startSegmentTick(nextSeg, animateAllState.unifiedAudio, nextSeg.startTime, nextSeg.endTime);
-            } else {
-                // All segments done — tear down after brief delay
-                setTimeout(function() { stopAnimateAll(); }, 500);
-            }
-        }
-
-        // Pause: keep mega card and position, just stop playback
-        function pauseAnimateAll() {
-            if (animateAllState.rafId) {
-                cancelAnimationFrame(animateAllState.rafId);
-                animateAllState.rafId = null;
-            }
-            if (animateAllState.unifiedAudio) animateAllState.unifiedAudio.pause();
-            animateAllState.active = false;
-
-            // Fade last active word to mode's prev_opacity
-            var seg = animateAllState.segments[animateAllState.currentIdx];
-            if (seg) {
-                var cache = window.ANIM_GRANULARITY === 'Characters' ? seg.cacheChars : seg.cacheWords;
-                cache.forEach(function(c) {
-                    if (c.el.classList.contains('active')) {
-                        c.el.style.opacity = String(window.ANIM_OPACITY_PREV);
-                    }
-                });
-            }
-
-            if (animateAllState.btn) {
-                animateAllState.btn.classList.remove('active');
-                animateAllState.btn.textContent = 'Resume';
-            }
-        }
-
-        // Full teardown: remove mega card, restore segment cards
-        function stopAnimateAll() {
-            if (animateAllState.rafId) {
-                cancelAnimationFrame(animateAllState.rafId);
-                animateAllState.rafId = null;
-            }
-            if (animateAllState.unifiedAudio) animateAllState.unifiedAudio.pause();
-            // Move Stop/Resume button back to its original parent before removing mega card
-            if (animateAllState.btn && animateAllState.btnParent) {
-                animateAllState.btnParent.appendChild(animateAllState.btn);
-            }
-            // Remove tip callout, top bar, and mega card
-            var tipEl = document.querySelector('.mega-tip');
-            if (tipEl) tipEl.parentNode.removeChild(tipEl);
-            if (animateAllState.topBar && animateAllState.topBar.parentNode) {
-                animateAllState.topBar.parentNode.removeChild(animateAllState.topBar);
-            }
-            if (animateAllState.megaCard && animateAllState.megaCard.parentNode) {
-                animateAllState.megaCard.parentNode.removeChild(animateAllState.megaCard);
-            }
-            animateAllState.megaCard = null;
-            animateAllState.topBar = null;
-            animateAllState.textFlow = null;
-            // Unhide segment cards
-            document.querySelectorAll('.segment-card.hidden-for-mega').forEach(function(c) {
-                c.classList.remove('hidden-for-mega');
-            });
-            // Restore left column and right column sizing
-            var leftCol = document.getElementById('left-col');
-            if (leftCol) leftCol.style.display = '';
-            var mainRow = document.getElementById('main-row');
-            if (mainRow) {
-                var rightCol = mainRow.querySelector(':scope > div:last-child');
-                if (rightCol) rightCol.style.flexGrow = animateAllState.savedFlexGrow || '';
-            }
-            // Restore description and API accordion
-            if (mainRow) {
-                var sibling = mainRow.parentNode.firstElementChild;
-                while (sibling && sibling !== mainRow) {
-                    sibling.style.display = '';
-                    sibling = sibling.nextElementSibling;
-                }
-            }
-            // Restore header/summary text and action buttons
-            document.querySelectorAll('.segments-header, .segments-review-summary').forEach(function(el) {
-                el.style.display = '';
-            });
-            var actionRow = document.getElementById('action-btns-row');
-            if (actionRow) actionRow.style.display = '';
-            var tsRow = document.getElementById('ts-row');
-            if (tsRow) tsRow.style.display = '';
-            // Move animation settings accordion back to left column
-            var animAccordion = document.getElementById('anim-settings-accordion');
-            if (animAccordion && animateAllState.accordionParent) {
-                if (animateAllState.accordionNextSibling) {
-                    animateAllState.accordionParent.insertBefore(animAccordion, animateAllState.accordionNextSibling);
-                } else {
-                    animateAllState.accordionParent.appendChild(animAccordion);
-                }
-            }
-            // Hide mega styling sliders (only shown in megacard view)
-            var megaStylingRow = document.getElementById('mega-styling-row');
-            if (megaStylingRow) megaStylingRow.style.display = 'none';
-            // Reset button
-            if (animateAllState.btn) {
-                animateAllState.btn.classList.remove('active');
-                animateAllState.btn.textContent = 'Animate All';
-            }
-            animateAllState.active = false;
-            animateAllState.completedIdx = -1;
-            animateAllState.segments = [];
-            animateAllState.unifiedCacheWords = [];
-            animateAllState.unifiedCacheChars = [];
-            animateAllState.unifiedAudio = null;
-            animateAllState.megaCard = null;
-            animateAllState.textFlow = null;
-            window.ANIM_PLAYBACK_RATE = 1;
-        }
-
-        // Resume from paused position
-        function resumeAnimateAll() {
-            animateAllState.active = true;
-            if (animateAllState.btn) {
-                animateAllState.btn.classList.add('active');
-                animateAllState.btn.textContent = 'Stop';
-            }
-            var seg = animateAllState.segments[animateAllState.currentIdx];
-            if (!seg) return;
-            var audio = animateAllState.unifiedAudio;
-            // Re-apply animation classes
-            var mega = animateAllState.megaCard;
-            mega.classList.add('anim-window');
-            if (window.ANIM_GRANULARITY === 'Characters') {
-                mega.classList.add('anim-chars');
-            }
-            // Restart polling from current audio position
-            startSegmentTick(seg, audio, seg.startTime, seg.endTime);
-            audio.playbackRate = window.ANIM_PLAYBACK_RATE || 1;
-            audio.play();
-        }
-
-        function toggleAnimateAll(btn) {
-            // Currently playing → pause (keep mega card)
-            if (animateAllState.active) {
-                pauseAnimateAll();
-                return;
-            }
-            // Paused with mega card still in live DOM → resume
-            if (animateAllState.megaCard && document.contains(animateAllState.megaCard)) {
-                resumeAnimateAll();
-                return;
-            }
-            // Stale mega card (orphaned by Gradio HTML update) → reset state
-            if (animateAllState.megaCard) {
-                animateAllState.megaCard = null;
-                animateAllState.textFlow = null;
-                animateAllState.segments = [];
-                animateAllState.unifiedCacheWords = [];
-                animateAllState.unifiedCacheChars = [];
-                animateAllState.unifiedAudio = null;
-                animateAllState.completedIdx = -1;
-                animateAllState.active = false;
-            }
-            // Fresh start
-            document.querySelectorAll('.animate-btn.active').forEach(function(b) {
-                toggleAnimation(b);
-            });
-            var result = buildMegaCard();
-            if (!result || animateAllState.segments.length === 0) return;
-            if (!result.unifiedAudio) {
-                console.error('Animate All: unified audio not available');
-                return;
-            }
-            var mega = result.mega;
-            var topBar = result.topBar;
-            animateAllState.megaCard = mega;
-            animateAllState.topBar = topBar;
-            animateAllState.unifiedAudio = result.unifiedAudio;
-            animateAllState.btn = btn;
-            animateAllState.active = true;
-            // Hide individual segment cards
-            document.querySelectorAll('.segments-container .segment-card').forEach(function(c) {
-                c.classList.add('hidden-for-mega');
-            });
-            // Hide left column and expand right column to full width
-            var leftCol = document.getElementById('left-col');
-            if (leftCol) leftCol.style.display = 'none';
-            var mainRow = document.getElementById('main-row');
-            if (mainRow) {
-                var rightCol = mainRow.querySelector(':scope > div:last-child');
-                if (rightCol) {
-                    animateAllState.savedFlexGrow = rightCol.style.flexGrow;
-                    rightCol.style.flexGrow = '1';
-                }
-            }
-            // Hide description and API accordion (everything before main-row)
-            if (mainRow) {
-                var sibling = mainRow.parentNode.firstElementChild;
-                while (sibling && sibling !== mainRow) {
-                    sibling.style.display = 'none';
-                    sibling = sibling.nextElementSibling;
-                }
-            }
-            // Hide header/summary text and action buttons
-            document.querySelectorAll('.segments-header, .segments-review-summary').forEach(function(el) {
-                el.style.display = 'none';
-            });
-            var actionRow = document.getElementById('action-btns-row');
-            if (actionRow) actionRow.style.display = 'none';
-            var tsRow = document.getElementById('ts-row');
-            if (tsRow) tsRow.style.display = 'none';
-            // Move animation settings accordion above segments container
-            var animAccordion = document.getElementById('anim-settings-accordion');
-            if (animAccordion) {
-                animateAllState.accordionParent = animAccordion.parentNode;
-                animateAllState.accordionNextSibling = animAccordion.nextElementSibling;
-                var container = document.querySelector('.segments-container');
-                if (container) container.parentNode.insertBefore(animAccordion, container);
-            }
-            // Show mega styling sliders (hidden in normal card view)
-            var megaStylingRow = document.getElementById('mega-styling-row');
-            if (megaStylingRow) megaStylingRow.style.display = 'flex';
-            var container = document.querySelector('.segments-container');
-            // Add tip callout above the mega card
-            var tip = document.createElement('div');
-            tip.className = 'mega-tip';
-            tip.textContent = 'Tip: Click on any word to seek to it, or click a verse marker to jump to the start of that verse.';
-            container.appendChild(topBar);
-            container.appendChild(tip);
-            container.appendChild(mega);
-            // Append unified audio element to mega card (hidden)
-            if (animateAllState.unifiedAudio) {
-                mega.appendChild(animateAllState.unifiedAudio);
-            }
-            // Move Stop/Resume button into top bar (above mega card)
-            btn.classList.add('active');
-            btn.textContent = 'Stop';
-            animateAllState.btnParent = btn.parentNode;
-            topBar.appendChild(btn);
-            // Start animation from first segment
-            animateSegment(0);
-        }
-
-        // Event delegation for Animate button clicks and click-to-seek
-        document.addEventListener('click', function(e) {
-            // Click-to-seek in Animate All mode
-            if (animateAllState.active && animateAllState.megaCard) {
-                var wordEl = e.target.closest('.word');
-                if (wordEl && animateAllState.megaCard.contains(wordEl)) {
-                    seekToWord(wordEl);
-                    return;
-                }
-                var markerEl = e.target.closest('.verse-marker');
-                if (markerEl && animateAllState.megaCard.contains(markerEl)) {
-                    seekToVerseMarker(markerEl);
-                    return;
-                }
-            }
-            if (e.target.matches('.play-btn')) {
-                var card = e.target.closest('.segment-card');
-                var audio = card && card.querySelector('audio');
-                if (audio) {
-                    activateAudio(audio);
-                    audio.play().catch(function(){});
-                }
-            }
-            if (e.target.matches('.animate-btn')) {
-                toggleAnimation(e.target);
-            }
-            if (e.target.matches('.animate-all-btn')) {
-                toggleAnimateAll(e.target);
-            }
-            if (e.target.matches('.mega-exit-btn')) {
-                stopAnimateAll();
-            }
-        });
-
-        // Clear highlights when audio ends (with delay so last word is visible)
-        document.addEventListener('ended', function(e) {
-            if (e.target.tagName === 'AUDIO') {
-                var audio = e.target;
-                // If Animate All is active with unified audio, handle full recording end
-                if (animateAllState.active && audio === animateAllState.unifiedAudio) {
-                    // Unified audio ended — entire recording finished
-                    setTimeout(function() { stopAnimateAll(); }, 500);
-                    return;
-                }
-                // Default per-card behavior
-                var card = audio.closest('.segment-card');
-                if (card) {
-                    setTimeout(function() {
-                        var btn = card.querySelector('.animate-btn');
-                        if (btn && btn.classList.contains('active')) {
-                            btn.classList.remove('active');
-                            btn.textContent = 'Animate';
-                            stopAnimation(audio, card);
-                        }
-                    }, 500);
-                }
-            }
-        }, true);
-
-        // Prefetch next segment's audio when current segment starts playing
-        document.addEventListener('play', function(e) {
-            if (e.target.tagName === 'AUDIO') {
-                var card = e.target.closest('.segment-card');
-                if (!card) return;
-                var next = card.nextElementSibling;
-                if (next && next.classList.contains('segment-card')) {
-                    var nextAudio = next.querySelector('audio');
-                    if (nextAudio && !nextAudio.src && nextAudio.dataset.src) {
-                        nextAudio.src = nextAudio.dataset.src;
-                        nextAudio.preload = 'metadata';
-                    }
-                }
-            }
-        }, true);
-    })();
-
-    </script>
-    """
-
-    js = js.replace('__SURAH_LIGATURES_JSON__', json.dumps(_SURAH_LIGATURES))
+    js = build_js_head(_SURAH_LIGATURES)
 
     with gr.Blocks(title="Quran Multi-Aligner", css=css, head=js, delete_cache=(DELETE_CACHE_FREQUENCY, DELETE_CACHE_AGE)) as app:
         gr.Markdown("# 🎙️ Quran Multi-Aligner")

src/ui/js_config.py

@@ -0,0 +1,49 @@
+"""Python→JS config bridge — emits window.* globals and concatenates JS files."""
+import json
+from pathlib import Path
+
+from config import (
+    ANIM_PRESETS,
+    ANIM_WINDOW_PREV_MAX, ANIM_WINDOW_AFTER_MAX,
+    ANIM_WORD_COLOR,
+    MEGA_WORD_SPACING_DEFAULT, MEGA_TEXT_SIZE_DEFAULT, MEGA_LINE_SPACING_DEFAULT,
+    ANIM_DISPLAY_MODE_DEFAULT, ANIM_GRANULARITY_DEFAULT,
+    ANIM_OPACITY_PREV_DEFAULT, ANIM_OPACITY_AFTER_DEFAULT,
+    ANIM_WINDOW_PREV_DEFAULT, ANIM_WINDOW_AFTER_DEFAULT,
+)
+
+_STATIC_DIR = Path(__file__).parent / "static"
+
+
+def build_js_head(surah_ligatures: dict) -> str:
+    """Return a <script> block with Python config globals and both JS files."""
+    config_lines = [
+        f"window.SURAH_LIGATURES = {json.dumps(surah_ligatures)};",
+        f"window.ANIM_PRESETS = {json.dumps(ANIM_PRESETS)};",
+        f"window.ANIM_WINDOW_PREV_MAX = {ANIM_WINDOW_PREV_MAX};",
+        f"window.ANIM_WINDOW_AFTER_MAX = {ANIM_WINDOW_AFTER_MAX};",
+        f"window.ANIM_WORD_COLOR_DEFAULT = {json.dumps(ANIM_WORD_COLOR)};",
+        f"window.MEGA_WORD_SPACING_DEFAULT = {MEGA_WORD_SPACING_DEFAULT};",
+        f"window.MEGA_TEXT_SIZE_DEFAULT = {MEGA_TEXT_SIZE_DEFAULT};",
+        f"window.MEGA_LINE_SPACING_DEFAULT = {MEGA_LINE_SPACING_DEFAULT};",
+        f"window.ANIM_DISPLAY_MODE_DEFAULT = {json.dumps(ANIM_DISPLAY_MODE_DEFAULT)};",
+        f"window.ANIM_GRANULARITY_DEFAULT = {json.dumps(ANIM_GRANULARITY_DEFAULT)};",
+        f"window.ANIM_OPACITY_PREV_DEFAULT = {ANIM_OPACITY_PREV_DEFAULT};",
+        f"window.ANIM_OPACITY_AFTER_DEFAULT = {ANIM_OPACITY_AFTER_DEFAULT};",
+        f"window.ANIM_WINDOW_PREV_DEFAULT = {ANIM_WINDOW_PREV_DEFAULT};",
+        f"window.ANIM_WINDOW_AFTER_DEFAULT = {ANIM_WINDOW_AFTER_DEFAULT};",
+    ]
+    config = "\n".join(config_lines)
+
+    core_js = (_STATIC_DIR / "animation-core.js").read_text(encoding="utf-8")
+    all_js = (_STATIC_DIR / "animate-all.js").read_text(encoding="utf-8")
+
+    return (
+        "<script>\n"
+        f"{config}\n"
+        "(function(){\n"
+        f"{core_js}\n"
+        f"{all_js}\n"
+        "})();\n"
+        "</script>"
+    )

src/ui/static/animate-all.js

@@ -0,0 +1,1153 @@
+// =====================================================================
+// Surah name ligature map (font triggers)
+// =====================================================================
+var surahLigatures = window.SURAH_LIGATURES;
+
+// =====================================================================
+// Animate All — continuous text stream with repetition handling
+// =====================================================================
+var animateAllState = {
+    active: false,
+    currentIdx: 0,
+    segments: [],   // [{startTime, endTime, cacheWords, cacheChars, wordEls}]
+    rafId: null,
+    megaCard: null,
+    textFlow: null,  // the unified .mega-text-flow container
+    btn: null,
+    unifiedCacheWords: [],
+    unifiedCacheChars: [],
+    unifiedAudio: null,  // Single audio element for entire recording
+    accordionParent: null,
+    accordionNextSibling: null,
+    completedIdx: -1
+};
+
+function buildMegaCard() {
+    var container = document.querySelector('.segments-container');
+    if (!container) return null;
+
+    // Create unified audio element from full audio URL
+    var fullAudioUrl = container.dataset.fullAudio;
+    var unifiedAudio = null;
+    if (fullAudioUrl) {
+        unifiedAudio = document.createElement('audio');
+        unifiedAudio.src = fullAudioUrl;
+        unifiedAudio.preload = 'auto';
+        unifiedAudio.style.display = 'none';
+    }
+
+    var cards = Array.from(container.querySelectorAll('.segment-card'));
+    var mega = document.createElement('div');
+    mega.className = 'mega-card';
+    var textFlow = document.createElement('div');
+    textFlow.className = 'mega-text-flow';
+
+    var renderedPositions = {};  // data-pos string -> DOM element in textFlow
+    var renderedCharEls = {};    // data-pos string -> Array of .char elements
+    var renderedMarkers = {};    // "surah:marker" -> true, to avoid duplicate verse markers
+    var frag = document.createDocumentFragment();
+    var segments = [];
+    var lastSurah = null;
+    var pendingSpecial = null;  // buffered special text to flush after surah separator
+
+    // Helper: flush pending special line into fragment
+    function flushPendingSpecial() {
+        if (!pendingSpecial) return;
+        var prevChild = frag.lastChild;
+        if (prevChild && prevChild.classList && prevChild.classList.contains('mega-special-line')) {
+            prevChild.textContent += '    ' + pendingSpecial;
+        } else {
+            var specialLine = document.createElement('div');
+            specialLine.className = 'mega-special-line';
+            specialLine.textContent = pendingSpecial;
+            frag.appendChild(specialLine);
+        }
+        pendingSpecial = null;
+    }
+
+    cards.forEach(function(card) {
+        var btn = card.querySelector('.animate-btn');
+        var ref = (card.dataset.matchedRef || '').trim();
+        var isSpecial = (ref === 'Basmala' || ref === "Isti'adha");
+
+        if (!btn || btn.disabled) {
+            // Special segment without timestamps — buffer static text
+            if (isSpecial || ref === '') {
+                var textEl = card.querySelector('.segment-text');
+                if (textEl) {
+                    var txt = textEl.textContent.trim();
+                    if (txt) {
+                        if (pendingSpecial) {
+                            pendingSpecial += '    ' + txt;
+                        } else {
+                            pendingSpecial = txt;
+                        }
+                    }
+                }
+            }
+            return;
+        }
+
+        // Animated special segment (has timestamps) — centered line with word animation
+        if (isSpecial) {
+            var textEl = card.querySelector('.segment-text');
+            if (!textEl) return;
+
+            // Extract segment boundaries from card data attributes
+            var segStartTime = parseFloat(card.dataset.startTime) || 0;
+            var segEndTime = parseFloat(card.dataset.endTime) || 0;
+
+            // Flush any buffered specials first
+            flushPendingSpecial();
+
+            var specialDiv;
+            var prevChild = frag.lastChild;
+            if (prevChild && prevChild.classList && prevChild.classList.contains('mega-special-line')) {
+                specialDiv = prevChild;
+                specialDiv.appendChild(document.createTextNode('    '));
+            } else {
+                specialDiv = document.createElement('div');
+                specialDiv.className = 'mega-special-line';
+                frag.appendChild(specialDiv);
+            }
+
+            var sourceWords = Array.from(textEl.querySelectorAll('.word'));
+            var segWordEls = [];
+            var segWordTimings = [];
+            var segCharTimings = [];
+            var unifiedCharEls = {};
+
+            sourceWords.forEach(function(node) {
+                var pos = node.dataset.pos;
+                var clone = node.cloneNode(true);
+                specialDiv.appendChild(document.createTextNode(' '));
+                specialDiv.appendChild(clone);
+                if (pos) renderedPositions[pos] = clone;
+                segWordEls.push(clone);
+
+                segWordTimings.push({
+                    start: parseFloat(node.dataset.start) || 0,
+                    end: parseFloat(node.dataset.end) || 0
+                });
+
+                var wordIdx = segWordEls.length - 1;
+                var chars = Array.from(clone.children);
+                unifiedCharEls[wordIdx] = chars;
+                if (pos) renderedCharEls[pos] = chars;
+
+                Array.from(node.children).forEach(function(srcChar) {
+                    segCharTimings.push({
+                        start: parseFloat(srcChar.dataset.start) || 0,
+                        end: parseFloat(srcChar.dataset.end) || 0,
+                        parentWordIdx: wordIdx
+                    });
+                });
+            });
+
+            if (segWordEls.length === 0) return;
+
+            var cacheWords = segWordEls.map(function(el, j) {
+                return { el: el, start: segWordTimings[j].start, end: segWordTimings[j].end };
+            });
+            var cacheChars = [];
+            var charCountPerWord = {};
+            segCharTimings.forEach(function(ct) {
+                var wIdx = ct.parentWordIdx;
+                if (charCountPerWord[wIdx] === undefined) charCountPerWord[wIdx] = 0;
+                var charIdxInWord = charCountPerWord[wIdx]++;
+                var unifiedChars = unifiedCharEls[wIdx];
+                if (unifiedChars && charIdxInWord < unifiedChars.length) {
+                    cacheChars.push({ el: unifiedChars[charIdxInWord], start: ct.start, end: ct.end });
+                }
+            });
+
+            segments.push({
+                startTime: segStartTime,
+                endTime: segEndTime,
+                cacheWords: cacheWords,
+                cacheChars: cacheChars,
+                wordEls: segWordEls
+            });
+            return;
+        }
+
+        var textEl = card.querySelector('.segment-text');
+        if (!textEl) return;
+
+        // Extract segment boundaries from card data attributes
+        var segStartTime = parseFloat(card.dataset.startTime) || 0;
+        var segEndTime = parseFloat(card.dataset.endTime) || 0;
+
+        // Detect fused special prefix: leading .word elements with :0:0: in data-pos
+        var allWords = Array.from(textEl.querySelectorAll('.word'));
+        var fusedWords = [];
+        var fusedHasTimestamps = false;
+        for (var fi = 0; fi < allWords.length; fi++) {
+            var fpos = allWords[fi].dataset.pos || '';
+            if (fpos && fpos.indexOf(':0:0:') !== -1) {
+                fusedWords.push(allWords[fi]);
+                if (allWords[fi].dataset.start) fusedHasTimestamps = true;
+            } else if (fpos) {
+                break;  // stop at first verse word
+            } else {
+                // No data-pos at all (old-style) — static fallback
+                fusedWords = [];
+                break;
+            }
+        }
+
+        if (fusedWords.length > 0 && fusedHasTimestamps) {
+            // Animated fused prefix — clone into a mega-special-line, share audio
+            flushPendingSpecial();
+            var fusedDiv;
+            var prevChild = frag.lastChild;
+            if (prevChild && prevChild.classList && prevChild.classList.contains('mega-special-line')) {
+                fusedDiv = prevChild;
+                fusedDiv.appendChild(document.createTextNode('    '));
+            } else {
+                fusedDiv = document.createElement('div');
+                fusedDiv.className = 'mega-special-line';
+                frag.appendChild(fusedDiv);
+            }
+            var fusedWordEls = [];
+            var fusedWordTimings = [];
+            var fusedCharTimings = [];
+            var fusedCharEls = {};
+            fusedWords.forEach(function(node) {
+                var clone = node.cloneNode(true);
+                fusedDiv.appendChild(document.createTextNode(' '));
+                fusedDiv.appendChild(clone);
+                var pos = node.dataset.pos;
+                if (pos) renderedPositions[pos] = clone;
+                fusedWordEls.push(clone);
+                fusedWordTimings.push({
+                    start: parseFloat(node.dataset.start) || 0,
+                    end: parseFloat(node.dataset.end) || 0
+                });
+                var wordIdx = fusedWordEls.length - 1;
+                var chars = Array.from(clone.children);
+                fusedCharEls[wordIdx] = chars;
+                if (pos) renderedCharEls[pos] = chars;
+                Array.from(node.children).forEach(function(srcChar) {
+                    fusedCharTimings.push({
+                        start: parseFloat(srcChar.dataset.start) || 0,
+                        end: parseFloat(srcChar.dataset.end) || 0,
+                        parentWordIdx: wordIdx
+                    });
+                });
+            });
+            // These fused words will be added to the same segment entry below
+            // (they share the audio with the verse words)
+        } else if (fusedWords.length > 0) {
+            // Fused prefix without timestamps — static text fallback
+            var fusedTxt = fusedWords.map(function(w) { return w.textContent; }).join(' ').trim();
+            if (fusedTxt) {
+                if (pendingSpecial) {
+                    pendingSpecial += '    ' + fusedTxt;
+                } else {
+                    pendingSpecial = fusedTxt;
+                }
+            }
+        }
+
+        var sourceWords = Array.from(textEl.querySelectorAll('.word'));
+        var segWordEls = [];    // unified DOM elements this segment animates
+        var segWordTimings = []; // {start, end} from source card
+        var segCharTimings = []; // [{start, end, parentWordIdx}, ...]
+        var unifiedCharEls = {};  // wordIdx -> Array of .char elements in unified DOM
+
+        // Iterate source childNodes to copy words + verse markers, deduplicating by data-pos
+        var childNodes = Array.from(textEl.childNodes);
+        var lastWasNew = false;  // track if the last word was newly appended
+        childNodes.forEach(function(node) {
+            if (node.nodeType === Node.ELEMENT_NODE && node.classList && node.classList.contains('word')) {
+                var pos = node.dataset.pos;
+                if (!pos) return;  // skip words without data-pos
+                if (pos.indexOf(':0:0:') !== -1) return;  // skip fused prefix words (handled above)
+                if (renderedPositions[pos]) {
+                    // Word already in unified text — reuse existing element
+                    segWordEls.push(renderedPositions[pos]);
+                    lastWasNew = false;
+                } else {
+                    // New word — clone and append
+                    var clone = node.cloneNode(true);
+                    // Detect surah change for separator
+                    var posParts = pos.split(':');
+                    if (posParts.length >= 1 && posParts[0]) {
+                        var wordSurah = posParts[0];
+                        if (wordSurah !== lastSurah) {
+                            var sepDiv = document.createElement('div');
+                            sepDiv.className = 'mega-surah-separator';
+                            if (lastSurah === null) sepDiv.style.borderTop = 'none';
+                            var ligKey = 'surah-' + wordSurah;
+                            sepDiv.textContent = surahLigatures[ligKey] || wordSurah;
+                            // Insert before any trailing special line so separator comes before basmala
+                            var trailingSpecial = frag.lastChild;
+                            if (trailingSpecial && trailingSpecial.classList && trailingSpecial.classList.contains('mega-special-line')) {
+                                frag.insertBefore(sepDiv, trailingSpecial);
+                            } else {
+                                frag.appendChild(sepDiv);
+                            }
+                        }
+                        lastSurah = wordSurah;
+                    }
+                    // Flush buffered special text after separator, before first word
+                    flushPendingSpecial();
+                    frag.appendChild(document.createTextNode(' '));
+                    frag.appendChild(clone);
+                    if (pos) {
+                        renderedPositions[pos] = clone;
+                    }
+                    segWordEls.push(clone);
+                    lastWasNew = true;
+                }
+                // Read timing from source word
+                segWordTimings.push({
+                    start: parseFloat(node.dataset.start) || 0,
+                    end: parseFloat(node.dataset.end) || 0
+                });
+                // Read char timings from source and cache unified char elements
+                var wordIdx = segWordEls.length - 1;
+                var pos2 = node.dataset.pos;
+                if (pos2 && renderedCharEls[pos2]) {
+                    unifiedCharEls[wordIdx] = renderedCharEls[pos2];
+                } else {
+                    var chars = Array.from(segWordEls[wordIdx].children);
+                    unifiedCharEls[wordIdx] = chars;
+                    if (pos2) renderedCharEls[pos2] = chars;
+                }
+                var srcChars = Array.from(node.children);
+                srcChars.forEach(function(srcChar) {
+                    segCharTimings.push({
+                        start: parseFloat(srcChar.dataset.start) || 0,
+                        end: parseFloat(srcChar.dataset.end) || 0,
+                        parentWordIdx: wordIdx
+                    });
+                });
+            } else if (node.nodeType === Node.ELEMENT_NODE && lastWasNew) {
+                // Verse marker or other non-word element — append only if preceding word was new
+                var markerText = node.textContent || '';
+                var markerKey = (lastSurah || '') + ':' + markerText.trim();
+                if (!markerText.trim() || !renderedMarkers[markerKey]) {
+                    frag.appendChild(document.createTextNode(' '));
+                    var markerSpan = document.createElement('span');
+                    markerSpan.className = 'verse-marker';
+                    markerSpan.title = 'Jump to this verse';
+                    markerSpan.appendChild(node.cloneNode(true));
+                    // Extract verse from preceding word's data-pos (surah:ayah:word)
+                    var lastWordPos = segWordEls.length > 0 ? (segWordEls[segWordEls.length - 1].dataset.pos || '') : '';
+                    var posPartsM = lastWordPos.split(':');
+                    if (posPartsM.length >= 2) markerSpan.dataset.verse = posPartsM[0] + ':' + posPartsM[1];
+                    frag.appendChild(markerSpan);
+                    if (markerText.trim()) renderedMarkers[markerKey] = true;
+                }
+            } else if (node.nodeType === Node.TEXT_NODE && lastWasNew) {
+                // Verse markers are plain text nodes (e.g. ۝٢٥٥), not elements
+                var txt = node.textContent || '';
+                if (txt.trim()) {
+                    var markerKey = (lastSurah || '') + ':' + txt.trim();
+                    if (!renderedMarkers[markerKey]) {
+                        frag.appendChild(document.createTextNode(' '));
+                        var markerSpan2 = document.createElement('span');
+                        markerSpan2.className = 'verse-marker';
+                        markerSpan2.title = 'Jump to this verse';
+                        markerSpan2.textContent = txt.trim();
+                        var lastWordPos2 = segWordEls.length > 0 ? (segWordEls[segWordEls.length - 1].dataset.pos || '') : '';
+                        var posPartsM2 = lastWordPos2.split(':');
+                        if (posPartsM2.length >= 2) markerSpan2.dataset.verse = posPartsM2[0] + ':' + posPartsM2[1];
+                        frag.appendChild(markerSpan2);
+                        renderedMarkers[markerKey] = true;
+                    }
+                }
+            }
+        });
+
+        if (segWordEls.length === 0) return;
+
+        // Build caches: pair source timings with unified DOM elements
+        var cacheWords = segWordEls.map(function(el, j) {
+            return {
+                el: el,
+                start: segWordTimings[j].start,
+                end: segWordTimings[j].end
+            };
+        });
+
+        // Build char cache using pre-collected unified char elements
+        var cacheChars = [];
+        var charCountPerWord = {};
+        segCharTimings.forEach(function(ct) {
+            var wIdx = ct.parentWordIdx;
+            if (charCountPerWord[wIdx] === undefined) charCountPerWord[wIdx] = 0;
+            var charIdxInWord = charCountPerWord[wIdx]++;
+            var unifiedChars = unifiedCharEls[wIdx];
+            if (unifiedChars && charIdxInWord < unifiedChars.length) {
+                cacheChars.push({
+                    el: unifiedChars[charIdxInWord],
+                    start: ct.start,
+                    end: ct.end
+                });
+            }
+        });
+
+        // Prepend animated fused prefix words/chars (same audio segment)
+        if (typeof fusedWordEls !== 'undefined' && fusedWordEls.length > 0 && fusedHasTimestamps) {
+            var fusedCacheWords = fusedWordEls.map(function(el, j) {
+                return { el: el, start: fusedWordTimings[j].start, end: fusedWordTimings[j].end };
+            });
+            var fusedCacheChars = [];
+            var fusedCharCount = {};
+            fusedCharTimings.forEach(function(ct) {
+                var wIdx = ct.parentWordIdx;
+                if (fusedCharCount[wIdx] === undefined) fusedCharCount[wIdx] = 0;
+                var charIdx = fusedCharCount[wIdx]++;
+                var chars = fusedCharEls[wIdx];
+                if (chars && charIdx < chars.length) {
+                    fusedCacheChars.push({ el: chars[charIdx], start: ct.start, end: ct.end });
+                }
+            });
+            cacheWords = fusedCacheWords.concat(cacheWords);
+            cacheChars = fusedCacheChars.concat(cacheChars);
+            segWordEls = fusedWordEls.concat(segWordEls);
+            // Reset fused state for next card
+            fusedWordEls = []; fusedHasTimestamps = false;
+        }
+
+        // Build group index for segment caches (for character grouping in animations)
+        buildGroupIndex(cacheWords);
+        buildGroupIndex(cacheChars);
+
+        segments.push({
+            startTime: segStartTime,
+            endTime: segEndTime,
+            cacheWords: cacheWords,
+            cacheChars: cacheChars,
+            wordEls: segWordEls
+        });
+    });
+
+    // Flush any remaining buffered special text
+    flushPendingSpecial();
+
+    textFlow.appendChild(frag);
+    // Build unified caches so Window mode spans all segments.
+    // Deduplicate: each DOM element appears once (shared elements from
+    // repeated segments reuse the first segment's unified index).
+    var unifiedWords = [];
+    var unifiedChars = [];
+    var wordElToIdx = new Map();
+    var charElToIdx = new Map();
+    var elToFirstSeg = new Map();
+    segments.forEach(function(seg, sIdx) {
+        seg.sharedEls = new Set();
+        seg.unifiedWordMap = [];
+        seg.unifiedCharMap = [];
+        for (var i = 0; i < seg.cacheWords.length; i++) {
+            var el = seg.cacheWords[i].el;
+            if (wordElToIdx.has(el)) {
+                seg.unifiedWordMap.push(wordElToIdx.get(el));
+                seg.sharedEls.add(el);
+                segments[elToFirstSeg.get(el)].sharedEls.add(el);
+            } else {
+                var idx = unifiedWords.length;
+                wordElToIdx.set(el, idx);
+                elToFirstSeg.set(el, sIdx);
+                seg.unifiedWordMap.push(idx);
+                unifiedWords.push(seg.cacheWords[i]);
+            }
+        }
+        for (var i = 0; i < seg.cacheChars.length; i++) {
+            var el = seg.cacheChars[i].el;
+            if (charElToIdx.has(el)) {
+                seg.unifiedCharMap.push(charElToIdx.get(el));
+            } else {
+                var idx = unifiedChars.length;
+                charElToIdx.set(el, idx);
+                seg.unifiedCharMap.push(idx);
+                unifiedChars.push(seg.cacheChars[i]);
+            }
+        }
+    });
+    // Tag each word/char element with its segment index for click-to-seek
+    segments.forEach(function(seg, sIdx) {
+        seg.cacheWords.forEach(function(c) { c.el.dataset.segIdx = sIdx; });
+        seg.cacheChars.forEach(function(c) { c.el.dataset.segIdx = sIdx; });
+    });
+    // Build group index for unified caches (for character grouping across all segments)
+    buildGroupIndex(unifiedWords);
+    buildGroupIndex(unifiedChars);
+
+    animateAllState.segments = segments;
+    animateAllState.unifiedCacheWords = unifiedWords;
+    animateAllState.unifiedCacheChars = unifiedChars;
+    animateAllState.textFlow = textFlow;
+    animDebug('MEGA', 'buildMegaCard: ' + segments.length + ' segments, unifiedWords=' + unifiedWords.length + ' unifiedChars=' + unifiedChars.length);
+    dumpCacheTimestamps(unifiedWords, 'Unified Words');
+    dumpCacheTimestamps(unifiedChars, 'Unified Chars');
+    mega.appendChild(textFlow);
+
+    // Build top bar with Exit button (placed outside mega card)
+    var topBar = document.createElement('div');
+    topBar.className = 'mega-top-bar';
+    var exitBtn = document.createElement('button');
+    exitBtn.className = 'mega-exit-btn';
+    exitBtn.textContent = 'Exit';
+    exitBtn.title = 'Exit and return to individual segments';
+    topBar.appendChild(exitBtn);
+    // Speed dropdown
+    var speedSelect = document.createElement('select');
+    speedSelect.className = 'mega-speed-select';
+    speedSelect.title = 'Playback speed';
+    [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2].forEach(function(r) {
+        var opt = document.createElement('option');
+        opt.value = r;
+        opt.textContent = r + 'x';
+        if (r === (window.ANIM_PLAYBACK_RATE || 1)) opt.selected = true;
+        speedSelect.appendChild(opt);
+    });
+    speedSelect.addEventListener('change', function() {
+        var rate = parseFloat(speedSelect.value);
+        window.ANIM_PLAYBACK_RATE = rate;
+        if (animateAllState.unifiedAudio) {
+            animateAllState.unifiedAudio.playbackRate = rate;
+        }
+        saveAnimSettings();
+    });
+    topBar.appendChild(speedSelect);
+    return {mega: mega, topBar: topBar, unifiedAudio: unifiedAudio};
+}
+
+// Reset highlight state for backward transitions (cache-based, no DOM queries)
+function resetHighlightsFrom(segIdx) {
+    for (var s = segIdx; s < animateAllState.segments.length; s++) {
+        var seg = animateAllState.segments[s];
+        seg.cacheWords.forEach(function(c) {
+            c.el.classList.remove('active', 'reached');
+            c.el.style.removeProperty('opacity');
+        });
+        seg.cacheChars.forEach(function(c) {
+            c.el.classList.remove('active', 'reached');
+            c.el.style.removeProperty('opacity');
+        });
+    }
+    // Re-apply 'reached' to shared elements belonging to completed earlier segments
+    for (var s = 0; s < segIdx && s <= animateAllState.completedIdx; s++) {
+        var prev = animateAllState.segments[s];
+        if (!prev.sharedEls || prev.sharedEls.size === 0) continue;
+        prev.cacheWords.forEach(function(c) {
+            if (prev.sharedEls.has(c.el)) c.el.classList.add('reached');
+        });
+        prev.cacheChars.forEach(function(c) {
+            if (prev.sharedEls.has(c.el)) c.el.classList.add('reached');
+        });
+    }
+}
+
+function startSegmentTick(seg, audio, segStartTime, segEndTime) {
+    var lastWordIdx = -1;
+    var lastGranularity = window.ANIM_GRANULARITY;
+    var lastOpacityPrev = window.ANIM_OPACITY_PREV;
+    var lastSeenVersion = window._windowSettingsVersion;
+    var segIdx = animateAllState.currentIdx;
+    animDebug('MEGA', 'startSegmentTick seg=' + segIdx + ' cacheWords=' + seg.cacheWords.length + ' cacheChars=' + seg.cacheChars.length + ' bounds=[' + segStartTime.toFixed(3) + ',' + segEndTime.toFixed(3) + ']');
+    function tick() {
+        if (audio.paused) return;
+        var currentTime = audio.currentTime;
+
+        // Check segment end boundary (unified audio spans all segments)
+        if (currentTime >= segEndTime) {
+            onAnimateAllSegmentEnd();
+            return;
+        }
+
+        var cache = window.ANIM_GRANULARITY === 'Characters' ? seg.cacheChars : seg.cacheWords;
+        if (window.ANIM_GRANULARITY !== lastGranularity) {
+            animDebug('MEGA', 'Granularity changed: ' + lastGranularity + ' -> ' + window.ANIM_GRANULARITY);
+            // Granularity changed mid-animation: reset this segment's elements
+            seg.wordEls.forEach(function(w) {
+                w.classList.remove('active');
+                w.style.removeProperty('opacity');
+                w.querySelectorAll('.char').forEach(function(c) {
+                    c.classList.remove('active');
+                    c.style.removeProperty('opacity');
+                });
+            });
+            // Clear inline opacity across all segments (previous segments may have inline opacity)
+            animateAllState.unifiedCacheWords.forEach(function(c) { c.el.style.removeProperty('opacity'); });
+            animateAllState.unifiedCacheChars.forEach(function(c) { c.el.style.removeProperty('opacity'); });
+            lastWordIdx = -1;
+            lastGranularity = window.ANIM_GRANULARITY;
+        }
+
+        // Mode changed mid-animation — refresh all reached words with new opacity
+        if (window.ANIM_OPACITY_PREV !== lastOpacityPrev) {
+            animDebug('MEGA', 'Mode changed: prevOp ' + lastOpacityPrev + ' -> ' + window.ANIM_OPACITY_PREV);
+            animateAllState.unifiedCacheWords.forEach(function(c) {
+                if (c.el.classList.contains('reached')) {
+                    if (window.ANIM_OPACITY_PREV >= 1) {
+                        c.el.style.removeProperty('opacity');
+                    } else {
+                        c.el.style.opacity = String(window.ANIM_OPACITY_PREV);
+                    }
+                }
+            });
+            animateAllState.unifiedCacheChars.forEach(function(c) {
+                if (c.el.classList.contains('reached')) {
+                    if (window.ANIM_OPACITY_PREV >= 1) {
+                        c.el.style.removeProperty('opacity');
+                    } else {
+                        c.el.style.opacity = String(window.ANIM_OPACITY_PREV);
+                    }
+                }
+            });
+            lastOpacityPrev = window.ANIM_OPACITY_PREV;
+        }
+
+        // Slider settings changed mid-animation — reapply window opacity
+        if (window._windowSettingsVersion !== lastSeenVersion) {
+            if (lastWordIdx >= 0) {
+                var wc = window.ANIM_GRANULARITY === 'Characters'
+                    ? animateAllState.unifiedCacheChars : animateAllState.unifiedCacheWords;
+                var map = window.ANIM_GRANULARITY === 'Characters'
+                    ? seg.unifiedCharMap : seg.unifiedWordMap;
+                if (map[lastWordIdx] !== undefined) {
+                    applyWindowOpacity(wc, map[lastWordIdx], map[lastWordIdx]);
+                }
+            }
+            lastSeenVersion = window._windowSettingsVersion;
+        }
+
+        var newWordIdx = -1;
+        var searchPath = '';
+        // Fast path: check current word, then next (covers ~99% of frames)
+        if (lastWordIdx >= 0 && lastWordIdx < cache.length &&
+            currentTime >= cache[lastWordIdx].start && currentTime < cache[lastWordIdx].end) {
+            newWordIdx = lastWordIdx;
+            searchPath = 'same';
+        } else if (lastWordIdx + 1 < cache.length &&
+            currentTime >= cache[lastWordIdx + 1].start && currentTime < cache[lastWordIdx + 1].end) {
+            newWordIdx = lastWordIdx + 1;
+            searchPath = 'next';
+        } else {
+            // Fallback: full scan (seeking, granularity switch, etc.)
+            searchPath = 'scan';
+            for (var i = 0; i < cache.length; i++) {
+                if (currentTime >= cache[i].start && currentTime < cache[i].end) {
+                    newWordIdx = i;
+                    break;
+                }
+            }
+            // Clamp to last word when past its end but audio hasn't ended yet
+            if (newWordIdx === -1 && cache.length > 0 && currentTime >= cache[cache.length - 1].start) {
+                newWordIdx = cache.length - 1;
+                searchPath = 'clamp';
+            }
+        }
+        if (newWordIdx !== lastWordIdx) {
+            var newText = newWordIdx >= 0 ? cache[newWordIdx].el.textContent.substring(0, 15) : '-';
+            animDebug('MEGA', 'seg=' + segIdx + ' idx: ' + lastWordIdx + ' -> ' + newWordIdx + ' (' + searchPath + ') t=' + currentTime.toFixed(3) + ' "' + newText + '"');
+            if (newWordIdx === -1 && cache.length > 0) {
+                var first = cache[0];
+                var last = cache[cache.length - 1];
+                animDebug('MEGA', '  NO MATCH: t=' + currentTime.toFixed(3) + ' cache[0]=[' + first.start.toFixed(3) + ',' + first.end.toFixed(3) + '] cache[' + (cache.length-1) + ']=[' + last.start.toFixed(3) + ',' + last.end.toFixed(3) + ']');
+            }
+            if (lastWordIdx >= 0 && lastWordIdx < cache.length) {
+                applyClassToGroup(cache, lastWordIdx, 'active', false);
+                applyClassToGroup(cache, lastWordIdx, 'reached', true);
+            }
+            if (newWordIdx >= 0) {
+                applyClassToGroup(cache, newWordIdx, 'active', true);
+                if (lastWordIdx === -1) {
+                    // First highlight — catch up any skipped words (with group support)
+                    for (var j = 0; j < newWordIdx; j++) {
+                        applyClassToGroup(cache, j, 'reached', true);
+                    }
+                }
+                // auto-scroll disabled — causes jank with frequent word changes
+            }
+            if (newWordIdx >= 0) {
+                var wc = window.ANIM_GRANULARITY === 'Characters'
+                    ? animateAllState.unifiedCacheChars : animateAllState.unifiedCacheWords;
+                var map = window.ANIM_GRANULARITY === 'Characters' ? seg.unifiedCharMap : seg.unifiedWordMap;
+                applyWindowOpacity(wc, map[newWordIdx],
+                    lastWordIdx >= 0 ? map[lastWordIdx] : -1);
+            }
+            lastWordIdx = newWordIdx;
+        }
+    }
+    if (animateAllState.rafId) cancelAnimationFrame(animateAllState.rafId);
+    function rafLoop() {
+        tick();
+        // Keep looping while animation is active AND still on the same segment.
+        // When tick() triggers a segment transition, a new RAF loop is started for
+        // the new segment - this old loop must stop to avoid duplicate transitions.
+        if (animateAllState.active && !audio.paused && animateAllState.currentIdx === segIdx) {
+            animateAllState.rafId = requestAnimationFrame(rafLoop);
+        }
+    }
+    animateAllState.rafId = requestAnimationFrame(rafLoop);
+}
+
+function animateSegment(idx, seekTime) {
+    var seg = animateAllState.segments[idx];
+    if (!seg) return;
+    animateAllState.currentIdx = idx;
+    // Re-tag shared elements so click-to-seek targets this segment during playback
+    seg.cacheWords.forEach(function(c) { c.el.dataset.segIdx = idx; });
+    seg.cacheChars.forEach(function(c) { c.el.dataset.segIdx = idx; });
+    var audio = animateAllState.unifiedAudio;
+    // Apply window engine class to mega card
+    var mega = animateAllState.megaCard;
+    mega.classList.add('anim-window');
+    if (window.ANIM_GRANULARITY === 'Characters') {
+        mega.classList.add('anim-chars');
+    }
+    // Detect backward transition: jumping to a segment at or before the last completed one
+    if (idx <= animateAllState.completedIdx) {
+        resetHighlightsFrom(idx);
+        // Reset completedIdx so forward progress from here is tracked correctly
+        animateAllState.completedIdx = idx - 1;
+    }
+    // Determine seek position: use provided seekTime or default to segment start
+    var targetTime = (seekTime !== undefined) ? seekTime : seg.startTime;
+    // Start playback and polling with segment boundaries
+    startSegmentTick(seg, audio, seg.startTime, seg.endTime);
+    audio.currentTime = targetTime;
+    audio.playbackRate = window.ANIM_PLAYBACK_RATE || 1;
+    audio.play();
+    // No per-segment preloading needed — unified audio already loaded
+}
+
+function seekToWord(wordEl) {
+    if (!animateAllState.active) return;
+    var cache = window.ANIM_GRANULARITY === 'Characters'
+        ? animateAllState.unifiedCacheChars : animateAllState.unifiedCacheWords;
+    // Find unified index and start time for the clicked word
+    var targetIdx = -1;
+    var wordStartTime = 0;
+    // For char granularity, find the first char of the clicked word
+    if (window.ANIM_GRANULARITY === 'Characters') {
+        for (var i = 0; i < cache.length; i++) {
+            if (cache[i].el.parentElement === wordEl || cache[i].el === wordEl) {
+                targetIdx = i;
+                wordStartTime = cache[i].start;
+                break;
+            }
+        }
+    } else {
+        for (var i = 0; i < cache.length; i++) {
+            if (cache[i].el === wordEl) {
+                targetIdx = i;
+                wordStartTime = cache[i].start;
+                break;
+            }
+        }
+    }
+    if (targetIdx < 0) return;
+    // Derive segment from word timing (more reliable than data-segIdx for shared elements)
+    var segIdx = 0;
+    for (var s = 0; s < animateAllState.segments.length; s++) {
+        var seg = animateAllState.segments[s];
+        if (wordStartTime >= seg.startTime && wordStartTime < seg.endTime) {
+            segIdx = s;
+            break;
+        }
+    }
+    // Reset window cache to force full reapplication (not fast path)
+    window._windowActiveIdx = -1;
+    window._windowLastPcAll = false;
+    window._windowLastAcAll = false;
+    // Update highlight state: words before target = reached, target onward = clean
+    for (var i = 0; i < cache.length; i++) {
+        cache[i].el.classList.remove('active');
+        cache[i].el.style.removeProperty('opacity');
+        if (i < targetIdx) {
+            cache[i].el.classList.add('reached');
+        } else {
+            cache[i].el.classList.remove('reached');
+        }
+    }
+    // Also sync the other cache (chars if in word mode, words if in char mode)
+    var otherCache = window.ANIM_GRANULARITY === 'Characters'
+        ? animateAllState.unifiedCacheWords : animateAllState.unifiedCacheChars;
+    for (var i = 0; i < otherCache.length; i++) {
+        otherCache[i].el.classList.remove('active');
+        otherCache[i].el.style.removeProperty('opacity');
+    }
+    // Re-apply window opacity immediately for the new position
+    applyWindowOpacity(cache, targetIdx, -1);
+    // Switch segment or seek within current (unified audio)
+    var audio = animateAllState.unifiedAudio;
+    if (animateAllState.rafId) {
+        cancelAnimationFrame(animateAllState.rafId);
+        animateAllState.rafId = null;
+    }
+    if (segIdx !== animateAllState.currentIdx) {
+        // Different segment — restart tick loop with new segment boundaries
+        animateSegment(segIdx, wordStartTime);
+    } else {
+        // Same segment — restart tick loop at new position for clean state
+        audio.currentTime = wordStartTime;
+        var seg = animateAllState.segments[segIdx];
+        var segStartTime = segIdx > 0 ? animateAllState.segments[segIdx - 1].endTime : 0;
+        startSegmentTick(seg, audio, segStartTime, seg.endTime);
+    }
+}
+
+function seekToVerseMarker(markerEl) {
+    if (!animateAllState.active) return;
+    var verse = markerEl.dataset.verse;  // e.g. "2:255"
+    if (!verse) return;
+    var prefix = verse + ':';
+    // Find first word in unified cache whose data-pos starts with this verse
+    var cache = animateAllState.unifiedCacheWords;
+    for (var i = 0; i < cache.length; i++) {
+        var pos = cache[i].el.dataset.pos || '';
+        if (pos === verse || pos.indexOf(prefix) === 0) {
+            seekToWord(cache[i].el);
+            return;
+        }
+    }
+}
+
+function onAnimateAllSegmentEnd() {
+    if (!animateAllState.active) return;
+    var seg = animateAllState.segments[animateAllState.currentIdx];
+    if (seg) {
+        // Mark all words/chars in finished segment as reached.
+        // Use mode's prev_opacity for completed elements.
+        seg.cacheWords.forEach(function(c) {
+            if (c.el.classList.contains('active')) {
+                c.el.style.opacity = String(window.ANIM_OPACITY_PREV);
+            }
+            c.el.classList.remove('active');
+            c.el.classList.add('reached');
+        });
+        seg.cacheChars.forEach(function(c) {
+            if (c.el.classList.contains('active')) {
+                c.el.style.opacity = String(window.ANIM_OPACITY_PREV);
+            }
+            c.el.classList.remove('active');
+            c.el.classList.add('reached');
+        });
+        animateAllState.completedIdx = animateAllState.currentIdx;
+    }
+    var nextIdx = animateAllState.currentIdx + 1;
+    if (nextIdx < animateAllState.segments.length) {
+        // Unified audio continues playing — just switch segment tracking
+        var nextSeg = animateAllState.segments[nextIdx];
+        animateAllState.currentIdx = nextIdx;
+        // Re-tag shared elements for the new segment
+        nextSeg.cacheWords.forEach(function(c) { c.el.dataset.segIdx = nextIdx; });
+        nextSeg.cacheChars.forEach(function(c) { c.el.dataset.segIdx = nextIdx; });
+        // Restart tick loop with new segment boundaries
+        startSegmentTick(nextSeg, animateAllState.unifiedAudio, nextSeg.startTime, nextSeg.endTime);
+    } else {
+        // All segments done — tear down after brief delay
+        setTimeout(function() { stopAnimateAll(); }, 500);
+    }
+}
+
+// Pause: keep mega card and position, just stop playback
+function pauseAnimateAll() {
+    if (animateAllState.rafId) {
+        cancelAnimationFrame(animateAllState.rafId);
+        animateAllState.rafId = null;
+    }
+    if (animateAllState.unifiedAudio) animateAllState.unifiedAudio.pause();
+    animateAllState.active = false;
+
+    // Fade last active word to mode's prev_opacity
+    var seg = animateAllState.segments[animateAllState.currentIdx];
+    if (seg) {
+        var cache = window.ANIM_GRANULARITY === 'Characters' ? seg.cacheChars : seg.cacheWords;
+        cache.forEach(function(c) {
+            if (c.el.classList.contains('active')) {
+                c.el.style.opacity = String(window.ANIM_OPACITY_PREV);
+            }
+        });
+    }
+
+    if (animateAllState.btn) {
+        animateAllState.btn.classList.remove('active');
+        animateAllState.btn.textContent = 'Resume';
+    }
+}
+
+// Full teardown: remove mega card, restore segment cards
+function stopAnimateAll() {
+    if (animateAllState.rafId) {
+        cancelAnimationFrame(animateAllState.rafId);
+        animateAllState.rafId = null;
+    }
+    if (animateAllState.unifiedAudio) animateAllState.unifiedAudio.pause();
+    // Move Stop/Resume button back to its original parent before removing mega card
+    if (animateAllState.btn && animateAllState.btnParent) {
+        animateAllState.btnParent.appendChild(animateAllState.btn);
+    }
+    // Remove tip callout, top bar, and mega card
+    var tipEl = document.querySelector('.mega-tip');
+    if (tipEl) tipEl.parentNode.removeChild(tipEl);
+    if (animateAllState.topBar && animateAllState.topBar.parentNode) {
+        animateAllState.topBar.parentNode.removeChild(animateAllState.topBar);
+    }
+    if (animateAllState.megaCard && animateAllState.megaCard.parentNode) {
+        animateAllState.megaCard.parentNode.removeChild(animateAllState.megaCard);
+    }
+    animateAllState.megaCard = null;
+    animateAllState.topBar = null;
+    animateAllState.textFlow = null;
+    // Unhide segment cards
+    document.querySelectorAll('.segment-card.hidden-for-mega').forEach(function(c) {
+        c.classList.remove('hidden-for-mega');
+    });
+    // Restore left column and right column sizing
+    var leftCol = document.getElementById('left-col');
+    if (leftCol) leftCol.style.display = '';
+    var mainRow = document.getElementById('main-row');
+    if (mainRow) {
+        var rightCol = mainRow.querySelector(':scope > div:last-child');
+        if (rightCol) rightCol.style.flexGrow = animateAllState.savedFlexGrow || '';
+    }
+    // Restore description and API accordion
+    if (mainRow) {
+        var sibling = mainRow.parentNode.firstElementChild;
+        while (sibling && sibling !== mainRow) {
+            sibling.style.display = '';
+            sibling = sibling.nextElementSibling;
+        }
+    }
+    // Restore header/summary text and action buttons
+    document.querySelectorAll('.segments-header, .segments-review-summary').forEach(function(el) {
+        el.style.display = '';
+    });
+    var actionRow = document.getElementById('action-btns-row');
+    if (actionRow) actionRow.style.display = '';
+    var tsRow = document.getElementById('ts-row');
+    if (tsRow) tsRow.style.display = '';
+    // Move animation settings accordion back to left column
+    var animAccordion = document.getElementById('anim-settings-accordion');
+    if (animAccordion && animateAllState.accordionParent) {
+        if (animateAllState.accordionNextSibling) {
+            animateAllState.accordionParent.insertBefore(animAccordion, animateAllState.accordionNextSibling);
+        } else {
+            animateAllState.accordionParent.appendChild(animAccordion);
+        }
+    }
+    // Hide mega styling sliders (only shown in megacard view)
+    var megaStylingRow = document.getElementById('mega-styling-row');
+    if (megaStylingRow) megaStylingRow.style.display = 'none';
+    // Reset button
+    if (animateAllState.btn) {
+        animateAllState.btn.classList.remove('active');
+        animateAllState.btn.textContent = 'Animate All';
+    }
+    animateAllState.active = false;
+    animateAllState.completedIdx = -1;
+    animateAllState.segments = [];
+    animateAllState.unifiedCacheWords = [];
+    animateAllState.unifiedCacheChars = [];
+    animateAllState.unifiedAudio = null;
+    animateAllState.megaCard = null;
+    animateAllState.textFlow = null;
+    window.ANIM_PLAYBACK_RATE = 1;
+}
+
+// Resume from paused position
+function resumeAnimateAll() {
+    animateAllState.active = true;
+    if (animateAllState.btn) {
+        animateAllState.btn.classList.add('active');
+        animateAllState.btn.textContent = 'Stop';
+    }
+    var seg = animateAllState.segments[animateAllState.currentIdx];
+    if (!seg) return;
+    var audio = animateAllState.unifiedAudio;
+    // Re-apply animation classes
+    var mega = animateAllState.megaCard;
+    mega.classList.add('anim-window');
+    if (window.ANIM_GRANULARITY === 'Characters') {
+        mega.classList.add('anim-chars');
+    }
+    // Restart polling from current audio position
+    startSegmentTick(seg, audio, seg.startTime, seg.endTime);
+    audio.playbackRate = window.ANIM_PLAYBACK_RATE || 1;
+    audio.play();
+}
+
+function toggleAnimateAll(btn) {
+    // Currently playing → pause (keep mega card)
+    if (animateAllState.active) {
+        pauseAnimateAll();
+        return;
+    }
+    // Paused with mega card still in live DOM → resume
+    if (animateAllState.megaCard && document.contains(animateAllState.megaCard)) {
+        resumeAnimateAll();
+        return;
+    }
+    // Stale mega card (orphaned by Gradio HTML update) → reset state
+    if (animateAllState.megaCard) {
+        animateAllState.megaCard = null;
+        animateAllState.textFlow = null;
+        animateAllState.segments = [];
+        animateAllState.unifiedCacheWords = [];
+        animateAllState.unifiedCacheChars = [];
+        animateAllState.unifiedAudio = null;
+        animateAllState.completedIdx = -1;
+        animateAllState.active = false;
+    }
+    // Fresh start
+    document.querySelectorAll('.animate-btn.active').forEach(function(b) {
+        toggleAnimation(b);
+    });
+    var result = buildMegaCard();
+    if (!result || animateAllState.segments.length === 0) return;
+    if (!result.unifiedAudio) {
+        console.error('Animate All: unified audio not available');
+        return;
+    }
+    var mega = result.mega;
+    var topBar = result.topBar;
+    animateAllState.megaCard = mega;
+    animateAllState.topBar = topBar;
+    animateAllState.unifiedAudio = result.unifiedAudio;
+    animateAllState.btn = btn;
+    animateAllState.active = true;
+    // Hide individual segment cards
+    document.querySelectorAll('.segments-container .segment-card').forEach(function(c) {
+        c.classList.add('hidden-for-mega');
+    });
+    // Hide left column and expand right column to full width
+    var leftCol = document.getElementById('left-col');
+    if (leftCol) leftCol.style.display = 'none';
+    var mainRow = document.getElementById('main-row');
+    if (mainRow) {
+        var rightCol = mainRow.querySelector(':scope > div:last-child');
+        if (rightCol) {
+            animateAllState.savedFlexGrow = rightCol.style.flexGrow;
+            rightCol.style.flexGrow = '1';
+        }
+    }
+    // Hide description and API accordion (everything before main-row)
+    if (mainRow) {
+        var sibling = mainRow.parentNode.firstElementChild;
+        while (sibling && sibling !== mainRow) {
+            sibling.style.display = 'none';
+            sibling = sibling.nextElementSibling;
+        }
+    }
+    // Hide header/summary text and action buttons
+    document.querySelectorAll('.segments-header, .segments-review-summary').forEach(function(el) {
+        el.style.display = 'none';
+    });
+    var actionRow = document.getElementById('action-btns-row');
+    if (actionRow) actionRow.style.display = 'none';
+    var tsRow = document.getElementById('ts-row');
+    if (tsRow) tsRow.style.display = 'none';
+    // Move animation settings accordion above segments container
+    var animAccordion = document.getElementById('anim-settings-accordion');
+    if (animAccordion) {
+        animateAllState.accordionParent = animAccordion.parentNode;
+        animateAllState.accordionNextSibling = animAccordion.nextElementSibling;
+        var container = document.querySelector('.segments-container');
+        if (container) container.parentNode.insertBefore(animAccordion, container);
+    }
+    // Show mega styling sliders (hidden in normal card view)
+    var megaStylingRow = document.getElementById('mega-styling-row');
+    if (megaStylingRow) megaStylingRow.style.display = 'flex';
+    var container = document.querySelector('.segments-container');
+    // Add tip callout above the mega card
+    var tip = document.createElement('div');
+    tip.className = 'mega-tip';
+    tip.textContent = 'Tip: Click on any word to seek to it, or click a verse marker to jump to the start of that verse.';
+    container.appendChild(topBar);
+    container.appendChild(tip);
+    container.appendChild(mega);
+    // Append unified audio element to mega card (hidden)
+    if (animateAllState.unifiedAudio) {
+        mega.appendChild(animateAllState.unifiedAudio);
+    }
+    // Move Stop/Resume button into top bar (above mega card)
+    btn.classList.add('active');
+    btn.textContent = 'Stop';
+    animateAllState.btnParent = btn.parentNode;
+    topBar.appendChild(btn);
+    // Start animation from first segment
+    animateSegment(0);
+}
+
+// Event delegation for Animate button clicks and click-to-seek
+document.addEventListener('click', function(e) {
+    // Click-to-seek in Animate All mode
+    if (animateAllState.active && animateAllState.megaCard) {
+        var wordEl = e.target.closest('.word');
+        if (wordEl && animateAllState.megaCard.contains(wordEl)) {
+            seekToWord(wordEl);
+            return;
+        }
+        var markerEl = e.target.closest('.verse-marker');
+        if (markerEl && animateAllState.megaCard.contains(markerEl)) {
+            seekToVerseMarker(markerEl);
+            return;
+        }
+    }
+    if (e.target.matches('.play-btn')) {
+        var card = e.target.closest('.segment-card');
+        var audio = card && card.querySelector('audio');
+        if (audio) {
+            activateAudio(audio);
+            audio.play().catch(function(){});
+        }
+    }
+    if (e.target.matches('.animate-btn')) {
+        toggleAnimation(e.target);
+    }
+    if (e.target.matches('.animate-all-btn')) {
+        toggleAnimateAll(e.target);
+    }
+    if (e.target.matches('.mega-exit-btn')) {
+        stopAnimateAll();
+    }
+});
+
+// Clear highlights when audio ends (with delay so last word is visible)
+document.addEventListener('ended', function(e) {
+    if (e.target.tagName === 'AUDIO') {
+        var audio = e.target;
+        // If Animate All is active with unified audio, handle full recording end
+        if (animateAllState.active && audio === animateAllState.unifiedAudio) {
+            // Unified audio ended — entire recording finished
+            setTimeout(function() { stopAnimateAll(); }, 500);
+            return;
+        }
+        // Default per-card behavior
+        var card = audio.closest('.segment-card');
+        if (card) {
+            setTimeout(function() {
+                var btn = card.querySelector('.animate-btn');
+                if (btn && btn.classList.contains('active')) {
+                    btn.classList.remove('active');
+                    btn.textContent = 'Animate';
+                    stopAnimation(audio, card);
+                }
+            }, 500);
+        }
+    }
+}, true);
+
+// Prefetch next segment's audio when current segment starts playing
+document.addEventListener('play', function(e) {
+    if (e.target.tagName === 'AUDIO') {
+        var card = e.target.closest('.segment-card');
+        if (!card) return;
+        var next = card.nextElementSibling;
+        if (next && next.classList.contains('segment-card')) {
+            var nextAudio = next.querySelector('audio');
+            if (nextAudio && !nextAudio.src && nextAudio.dataset.src) {
+                nextAudio.src = nextAudio.dataset.src;
+                nextAudio.preload = 'metadata';
+            }
+        }
+    }
+}, true);

src/ui/static/animation-core.js

@@ -0,0 +1,699 @@
+// =====================================================================
+// Per-segment animation engine — audio warmup, caching, window mode,
+// highlight tick loop, and per-card Animate toggle.
+// Requires window.* config globals set by js_config.py.
+// =====================================================================
+
+// Warm up browser audio pipeline on first user interaction.
+// Uses pointerdown (fires ~50-100ms before click) + AudioContext.resume()
+// to prime the audio hardware before the <audio> element's play fires.
+var _audioWarmedUp = false;
+function _warmupAudio() {
+    if (_audioWarmedUp) return;
+    _audioWarmedUp = true;
+    // 1. Resume/create AudioContext — this is what actually initializes audio hardware
+    var ctx = new (window.AudioContext || window.webkitAudioContext)();
+    if (ctx.state === 'suspended') ctx.resume();
+    // Play a single silent sample to force full pipeline init
+    var buf = ctx.createBuffer(1, 1, 22050);
+    var src = ctx.createBufferSource();
+    src.buffer = buf;
+    src.connect(ctx.destination);
+    src.start();
+    // 2. Also prime HTML5 Audio path with a silent WAV
+    var a = new Audio('data:audio/wav;base64,UklGRiYAAABXQVZFZm10IBAAAAABAAEARKwAABCxAgACABAAZGF0YQIAAAAAAA==');
+    a.volume = 0;
+    a.play().catch(function(){});
+    document.removeEventListener('pointerdown', _warmupAudio);
+    document.removeEventListener('touchstart', _warmupAudio);
+}
+// pointerdown fires before click, giving audio hardware a head start
+document.addEventListener('pointerdown', _warmupAudio);
+document.addEventListener('touchstart', _warmupAudio, {passive: true});
+
+// --- localStorage persistence helpers ---
+var _ANIM_STORAGE_KEY = 'quran_anim_settings';
+function loadAnimSettings() {
+    try {
+        var raw = localStorage.getItem(_ANIM_STORAGE_KEY);
+        return raw ? JSON.parse(raw) : null;
+    } catch(e) { return null; }
+}
+function saveAnimSettings() {
+    try {
+        var mode = window.ANIM_DISPLAY_MODE;
+        var s = loadAnimSettings() || {};
+        s.granularity = window.ANIM_GRANULARITY;
+        s.mode = mode;
+        s.verseOnly = !!window.ANIM_VERSE_MODE;
+        s.color = getComputedStyle(document.documentElement).getPropertyValue('--anim-word-color').trim() || window.ANIM_WORD_COLOR_DEFAULT;
+        // Read text styling from slider DOM values (more reliable than mega-card inline styles)
+        var wsEl = document.querySelector('#anim-word-spacing input[type=range],#anim-word-spacing input[type=number]');
+        var tsEl = document.querySelector('#anim-text-size input[type=range],#anim-text-size input[type=number]');
+        var lsEl = document.querySelector('#anim-line-spacing input[type=range],#anim-line-spacing input[type=number]');
+        s.wordSpacing = wsEl ? parseFloat(wsEl.value) : window.MEGA_WORD_SPACING_DEFAULT;
+        s.textSize = tsEl ? parseFloat(tsEl.value) : window.MEGA_TEXT_SIZE_DEFAULT;
+        s.lineSpacing = lsEl ? parseFloat(lsEl.value) : window.MEGA_LINE_SPACING_DEFAULT;
+        // Always keep custom sub-object up to date when in Custom mode
+        if (mode === 'Custom') {
+            s.custom = {
+                prevOpacity: window.ANIM_OPACITY_PREV,
+                afterOpacity: window.ANIM_OPACITY_AFTER,
+                prevWords: window.ANIM_WINDOW_PREV,
+                afterWords: window.ANIM_WINDOW_AFTER
+            };
+        }
+        s.playbackRate = window.ANIM_PLAYBACK_RATE || 1;
+        localStorage.setItem(_ANIM_STORAGE_KEY, JSON.stringify(s));
+    } catch(e) {}
+}
+
+// --- Restore from localStorage or use defaults ---
+var _saved = loadAnimSettings();
+if (_saved) {
+    window.ANIM_DISPLAY_MODE = _saved.mode || window.ANIM_DISPLAY_MODE_DEFAULT;
+    window.ANIM_GRANULARITY = _saved.granularity || window.ANIM_GRANULARITY_DEFAULT;
+    window.ANIM_VERSE_MODE = !!_saved.verseOnly;
+    if (_saved.color) document.documentElement.style.setProperty('--anim-word-color', _saved.color);
+    var _rPreset = window.ANIM_PRESETS[window.ANIM_DISPLAY_MODE];
+    if (_rPreset) {
+        window.ANIM_OPACITY_PREV = _rPreset.prev_opacity;
+        window.ANIM_OPACITY_AFTER = _rPreset.after_opacity;
+        window.ANIM_WINDOW_PREV = _rPreset.prev_words;
+        window.ANIM_WINDOW_AFTER = _rPreset.after_words;
+    } else if (_saved.custom) {
+        window.ANIM_OPACITY_PREV = _saved.custom.prevOpacity;
+        window.ANIM_OPACITY_AFTER = _saved.custom.afterOpacity;
+        window.ANIM_WINDOW_PREV = _saved.custom.prevWords;
+        window.ANIM_WINDOW_AFTER = _saved.custom.afterWords;
+    } else {
+        window.ANIM_OPACITY_PREV = window.ANIM_OPACITY_PREV_DEFAULT;
+        window.ANIM_OPACITY_AFTER = window.ANIM_OPACITY_AFTER_DEFAULT;
+        window.ANIM_WINDOW_PREV = window.ANIM_WINDOW_PREV_DEFAULT;
+        window.ANIM_WINDOW_AFTER = window.ANIM_WINDOW_AFTER_DEFAULT;
+    }
+} else {
+    window.ANIM_DISPLAY_MODE = window.ANIM_DISPLAY_MODE_DEFAULT;
+    window.ANIM_GRANULARITY = window.ANIM_GRANULARITY_DEFAULT;
+    var _initPreset = window.ANIM_PRESETS[window.ANIM_DISPLAY_MODE_DEFAULT];
+    window.ANIM_OPACITY_PREV = _initPreset ? _initPreset.prev_opacity : window.ANIM_OPACITY_PREV_DEFAULT;
+    window.ANIM_OPACITY_AFTER = _initPreset ? _initPreset.after_opacity : window.ANIM_OPACITY_AFTER_DEFAULT;
+    window.ANIM_WINDOW_PREV = _initPreset ? _initPreset.prev_words : window.ANIM_WINDOW_PREV_DEFAULT;
+    window.ANIM_WINDOW_AFTER = _initPreset ? _initPreset.after_words : window.ANIM_WINDOW_AFTER_DEFAULT;
+    window.ANIM_VERSE_MODE = false;
+}
+window.ANIM_PLAYBACK_RATE = (_saved && _saved.playbackRate) ? _saved.playbackRate : 1;
+window._windowPrevGradient = [];
+window._windowAfterGradient = [];
+
+function rebuildWindowGradient() {
+    var basePrev = window.ANIM_OPACITY_PREV;
+    var baseAfter = window.ANIM_OPACITY_AFTER;
+    var pc = window.ANIM_WINDOW_PREV;
+    var ac = window.ANIM_WINDOW_AFTER;
+    window._windowPrevGradient = [];
+    window._windowAfterGradient = [];
+    // At max: empty gradient signals "show all at flat base opacity"
+    if (pc < window.ANIM_WINDOW_PREV_MAX) {
+        for (var d = 1; d <= pc; d++) {
+            window._windowPrevGradient.push(String(basePrev * (pc - d + 1) / pc));
+        }
+    }
+    if (ac < window.ANIM_WINDOW_AFTER_MAX) {
+        for (var d = 1; d <= ac; d++) {
+            window._windowAfterGradient.push(String(baseAfter * (ac - d + 1) / ac));
+        }
+    }
+}
+rebuildWindowGradient();
+
+// Activate a lazy-loaded audio element (set src, show controls, hide play button)
+function activateAudio(audio) {
+    if (audio.hasAttribute('controls')) return audio;
+    audio.src = audio.dataset.src;
+    audio.controls = true;
+    audio.style.display = '';
+    var playBtn = audio.parentElement && audio.parentElement.querySelector('.play-btn');
+    if (playBtn) playBtn.style.display = 'none';
+    return audio;
+}
+
+// =====================================================================
+// Animation Debug Logging
+// Enable via: window.ANIM_DEBUG = true; in browser console
+// =====================================================================
+window.ANIM_DEBUG = false;  // Set to true to enable animation debug logging
+function animDebug(category, msg, data) {
+    if (!window.ANIM_DEBUG) return;
+    var prefix = '[ANIM:' + category + ']';
+    if (data !== undefined) {
+        console.log(prefix, msg, data);
+    } else {
+        console.log(prefix, msg);
+    }
+}
+function dumpCacheTimestamps(cache, label) {
+    if (!window.ANIM_DEBUG) return;
+    console.group('[ANIM:CACHE] ' + label + ' (' + cache.length + ' entries)');
+    cache.forEach(function(item, idx) {
+        var text = item.el.textContent.substring(0, 20);
+        var gid = item.groupId || '-';
+        console.log(idx + ': "' + text + '" start=' + item.start.toFixed(3) + ' end=' + item.end.toFixed(3) + ' groupId=' + gid);
+    });
+    if (cache._groupIndex) {
+        console.log('_groupIndex:', JSON.parse(JSON.stringify(cache._groupIndex)));
+    }
+    console.groupEnd();
+}
+
+// Cache elements and timing data for a given selector
+// Also builds group index for letter groups (chars with same data-group-id)
+function initCacheFor(card, selector) {
+    var elements = Array.from(card.querySelectorAll(selector));
+    var cache = elements.map(function(el, idx) {
+        return {
+            el: el,
+            start: parseFloat(el.dataset.start),
+            end: parseFloat(el.dataset.end),
+            groupId: el.dataset.groupId || null,
+            cacheIdx: idx
+        };
+    });
+    // Build group index: groupId → [cacheIdx, ...]
+    var groupIndex = {};
+    cache.forEach(function(item) {
+        if (item.groupId) {
+            if (!groupIndex[item.groupId]) {
+                groupIndex[item.groupId] = [];
+            }
+            groupIndex[item.groupId].push(item.cacheIdx);
+        }
+    });
+    cache._groupIndex = groupIndex;
+    animDebug('INIT', 'initCacheFor("' + selector + '"): ' + cache.length + ' elements, ' + Object.keys(groupIndex).length + ' groups');
+    return cache;
+}
+
+// Apply class to element and all members of its letter group
+function applyClassToGroup(cache, idx, className, add) {
+    var item = cache[idx];
+    if (!item) {
+        animDebug('CLASS', 'applyClassToGroup SKIP: no item at idx=' + idx);
+        return;
+    }
+    var text = item.el.textContent.substring(0, 10);
+    animDebug('CLASS', (add ? '+' : '-') + className + ' idx=' + idx + ' "' + text + '" groupId=' + (item.groupId || '-'));
+    if (add) {
+        item.el.classList.add(className);
+    } else {
+        item.el.classList.remove(className);
+    }
+    // Also apply to all group members if this element has a groupId
+    if (item.groupId && cache._groupIndex) {
+        var groupMembers = cache._groupIndex[item.groupId] || [];
+        if (groupMembers.length > 1) {
+            animDebug('CLASS', '  -> propagating to group members:', groupMembers);
+        }
+        groupMembers.forEach(function(memberIdx) {
+            if (memberIdx !== idx) {
+                if (add) {
+                    cache[memberIdx].el.classList.add(className);
+                } else {
+                    cache[memberIdx].el.classList.remove(className);
+                }
+            }
+        });
+    }
+}
+
+// Return the active cache based on current granularity setting
+function getActiveCache(audio) {
+    return window.ANIM_GRANULARITY === 'Characters' ? audio._cacheChars : audio._cacheWords;
+}
+
+// Apply opacity to element and all members of its letter group
+function applyOpacityToGroup(cache, idx, opacity) {
+    var item = cache[idx];
+    if (!item) {
+        animDebug('OPACITY', 'applyOpacityToGroup SKIP: no item at idx=' + idx);
+        return;
+    }
+    var text = item.el.textContent.substring(0, 10);
+    animDebug('OPACITY', 'idx=' + idx + ' "' + text + '" opacity=' + (opacity === null ? 'CLEAR' : opacity) + ' groupId=' + (item.groupId || '-'));
+    if (opacity === null) {
+        item.el.style.removeProperty('opacity');
+    } else {
+        item.el.style.opacity = opacity;
+    }
+    // Also apply to all group members if this element has a groupId
+    if (item.groupId && cache._groupIndex) {
+        var groupMembers = cache._groupIndex[item.groupId] || [];
+        if (groupMembers.length > 1) {
+            animDebug('OPACITY', '  -> propagating to group members:', groupMembers);
+        }
+        groupMembers.forEach(function(memberIdx) {
+            if (memberIdx !== idx) {
+                if (opacity === null) {
+                    cache[memberIdx].el.style.removeProperty('opacity');
+                } else {
+                    cache[memberIdx].el.style.opacity = opacity;
+                }
+            }
+        });
+    }
+}
+
+// Build group index for a cache array (extracts groupId and builds _groupIndex)
+// Used for megacard caches which are built manually without initCacheFor()
+function buildGroupIndex(cache) {
+    var groupIndex = {};
+    cache.forEach(function(item, idx) {
+        var gid = item.el.dataset.groupId;
+        if (gid) {
+            item.groupId = gid;
+            if (!groupIndex[gid]) groupIndex[gid] = [];
+            groupIndex[gid].push(idx);
+        }
+    });
+    cache._groupIndex = groupIndex;
+    var groupCount = Object.keys(groupIndex).length;
+    animDebug('GROUP', 'buildGroupIndex: ' + cache.length + ' elements, ' + groupCount + ' groups');
+    if (window.ANIM_DEBUG && groupCount > 0) {
+        for (var gid in groupIndex) {
+            if (groupIndex[gid].length > 1) {
+                animDebug('GROUP', '  group "' + gid + '": indices ' + JSON.stringify(groupIndex[gid]));
+            }
+        }
+    }
+}
+
+// Window mode: track active state for live slider updates
+window._windowActiveCache = null;
+window._windowActiveIdx = -1;
+window._windowLastPc = 0;
+window._windowLastAc = 0;
+window._windowLastPcAll = false;
+window._windowLastAcAll = false;
+window._windowSettingsVersion = 0;  // Incremented when sliders change, so tick() can detect
+
+// Window mode: apply per-element opacity gradient around active index
+function applyWindowOpacity(cache, newIdx, prevIdx) {
+    animDebug('WINDOW', 'applyWindowOpacity newIdx=' + newIdx + ' prevIdx=' + prevIdx + ' cacheLen=' + cache.length);
+    // If prevIdx is unknown (e.g. after a timing gap between words),
+    // fall back to the last index we applied so the old window gets cleared.
+    if (prevIdx < 0 && window._windowActiveIdx >= 0 && window._windowActiveCache === cache) {
+        animDebug('WINDOW', '  -> using fallback prevIdx=' + window._windowActiveIdx);
+        prevIdx = window._windowActiveIdx;
+    }
+    var prevGrad = window._windowPrevGradient;
+    var afterGrad = window._windowAfterGradient;
+    var pc = prevGrad.length;
+    var ac = afterGrad.length;
+    var pcAll = (window.ANIM_WINDOW_PREV >= window.ANIM_WINDOW_PREV_MAX);
+    var acAll = (window.ANIM_WINDOW_AFTER >= window.ANIM_WINDOW_AFTER_MAX);
+    var oldPcAll = window._windowLastPcAll;
+    var oldAcAll = window._windowLastAcAll;
+    var basePrev = String(window.ANIM_OPACITY_PREV);
+    var baseAfter = String(window.ANIM_OPACITY_AFTER);
+    animDebug('WINDOW', '  verseMode=' + window.ANIM_VERSE_MODE + ' pcAll=' + pcAll + ' acAll=' + acAll + ' basePrev=' + basePrev + ' baseAfter=' + baseAfter);
+    // Verse mode: show only current-verse words, hide everything else
+    if (window.ANIM_VERSE_MODE) {
+        var activeEl = cache[newIdx].el;
+        var activePos = activeEl.dataset.pos || (activeEl.closest('.word') || {}).dataset?.pos || '';
+        var vp = activePos.split(':');
+        var activeVerse = vp.length >= 2 ? vp[0] + ':' + vp[1] : '';
+        // Track which group IDs we've already handled to avoid duplicates
+        var handledGroups = {};
+        for (var i = 0; i < cache.length; i++) {
+            // Skip if this element's group was already handled
+            var gid = cache[i].groupId;
+            if (gid && handledGroups[gid]) continue;
+            if (gid) handledGroups[gid] = true;
+            if (i === newIdx) {
+                applyOpacityToGroup(cache, i, null);
+                continue;
+            }
+            var el = cache[i].el;
+            var pos = el.dataset.pos || (el.closest('.word') || {}).dataset?.pos || '';
+            var wp = pos.split(':');
+            var wverse = wp.length >= 2 ? wp[0] + ':' + wp[1] : '';
+            if (wverse === activeVerse) {
+                // Same verse: normal gradient opacity
+                if (i < newIdx || !cache[i].el.classList.contains('reached')) {
+                    applyOpacityToGroup(cache, i, (i < newIdx) ? basePrev : baseAfter);
+                }
+            } else if (i < newIdx) {
+                // Different verse, before current: always hide past verses
+                applyOpacityToGroup(cache, i, '0');
+            } else {
+                // Different verse, after current: hide future verses in verse-only mode
+                applyOpacityToGroup(cache, i, '0');
+            }
+        }
+        window._windowActiveCache = cache;
+        window._windowActiveIdx = newIdx;
+        return;
+    }
+    // Fast path: All→All steady state — only 2 elements change (with group support)
+    if (prevIdx >= 0 && newIdx >= 0 && pcAll && acAll && oldPcAll && oldAcAll) {
+        applyOpacityToGroup(cache, prevIdx, basePrev);
+        applyOpacityToGroup(cache, newIdx, null);
+        window._windowActiveCache = cache;
+        window._windowActiveIdx = newIdx;
+        window._windowLastPc = pc;  window._windowLastAc = ac;
+        window._windowLastPcAll = pcAll;  window._windowLastAcAll = acAll;
+        return;
+    }
+    // Clear old window range
+    if (prevIdx >= 0) {
+        if (oldPcAll || oldAcAll) {
+            // Previous state had "all" — clear every element
+            for (var i = 0; i < cache.length; i++) {
+                cache[i].el.style.removeProperty('opacity');
+            }
+        } else {
+            var clearPc = Math.max(pc, window._windowLastPc);
+            var clearAc = Math.max(ac, window._windowLastAc);
+            var clearStart = Math.max(0, prevIdx - clearPc);
+            var clearEnd = Math.min(cache.length - 1, prevIdx + clearAc);
+            for (var i = clearStart; i <= clearEnd; i++) {
+                cache[i].el.style.removeProperty('opacity');
+            }
+        }
+    }
+    // Track state for live slider updates
+    window._windowActiveCache = cache;
+    window._windowActiveIdx = newIdx;
+    window._windowLastPc = pc;
+    window._windowLastAc = ac;
+    window._windowLastPcAll = pcAll;
+    window._windowLastAcAll = acAll;
+    if (newIdx < 0) return;
+    // Apply previous elements (with group support)
+    if (pcAll) {
+        for (var i = 0; i < newIdx; i++) {
+            applyOpacityToGroup(cache, i, basePrev);
+        }
+    } else {
+        for (var p = 0; p < pc; p++) {
+            var idx = newIdx - (p + 1);
+            if (idx < 0) break;
+            applyOpacityToGroup(cache, idx, prevGrad[p]);
+        }
+    }
+    // Apply after elements (upcoming words always get opacity set for
+    // proper word-by-word animation, even if they have 'reached' from
+    // a previous segment) — with group support
+    if (acAll) {
+        for (var i = newIdx + 1; i < cache.length; i++) {
+            applyOpacityToGroup(cache, i, baseAfter);
+        }
+    } else {
+        for (var a = 0; a < ac; a++) {
+            var idx = newIdx + (a + 1);
+            if (idx >= cache.length) break;
+            applyOpacityToGroup(cache, idx, afterGrad[a]);
+        }
+    }
+    // Fade previously-active word from full opacity to its new level (with group support)
+    if (prevIdx >= 0 && prevIdx !== newIdx) {
+        var tgt = cache[prevIdx].el.style.opacity || '0';
+        applyOpacityToGroup(cache, prevIdx, tgt);
+    }
+    // Reconcile group opacities: grouped characters should appear as
+    // one visual unit, using the max opacity from any member
+    if (cache._groupIndex) {
+        var gids = Object.keys(cache._groupIndex);
+        for (var g = 0; g < gids.length; g++) {
+            var members = cache._groupIndex[gids[g]];
+            if (members.length <= 1) continue;
+            // If any member is active, set all to full opacity
+            var anyActive = false;
+            var maxOp = -1;
+            for (var m = 0; m < members.length; m++) {
+                if (cache[members[m]].el.classList.contains('active')) {
+                    anyActive = true;
+                    break;
+                }
+                var op = cache[members[m]].el.style.opacity;
+                if (op !== '') {
+                    var val = parseFloat(op);
+                    if (!isNaN(val) && val > maxOp) maxOp = val;
+                }
+            }
+            if (anyActive) {
+                for (var m = 0; m < members.length; m++) {
+                    cache[members[m]].el.style.opacity = '1';
+                }
+            } else if (maxOp > 0) {
+                var maxOpStr = String(maxOp);
+                for (var m = 0; m < members.length; m++) {
+                    cache[members[m]].el.style.opacity = maxOpStr;
+                }
+            }
+            // maxOp <= 0: group is hidden (outside window), leave as-is
+        }
+    }
+}
+
+// Re-apply window opacity immediately (called when sliders change mid-animation)
+function reapplyWindowNow() {
+    var cache = window._windowActiveCache;
+    var idx = window._windowActiveIdx;
+    if (!cache || idx < 0) return;
+    applyWindowOpacity(cache, idx, idx);
+}
+
+// Replace numeric value with "All" when slider is at maximum
+function updateWindowMaxLabel(elemId, val, maxVal) {
+    var el = document.getElementById(elemId);
+    if (!el) return;
+    var numInput = el.querySelector('input[type="number"]');
+    if (!numInput) return;
+    if (val >= maxVal) {
+        numInput.style.display = 'none';
+        var maxSpan = el.querySelector('.max-label');
+        if (!maxSpan) {
+            maxSpan = document.createElement('span');
+            maxSpan.className = 'max-label';
+            maxSpan.style.cssText = 'font-weight: bold; opacity: 0.85;';
+            numInput.parentNode.insertBefore(maxSpan, numInput.nextSibling);
+        }
+        maxSpan.textContent = 'All';
+        maxSpan.style.display = '';
+    } else {
+        numInput.style.display = '';
+        var maxSpan = el.querySelector('.max-label');
+        if (maxSpan) maxSpan.style.display = 'none';
+    }
+    // Always inject a hint at the right end of the slider track
+    if (!el.querySelector('.max-hint')) {
+        var rangeWrap = el.querySelector('input[type="range"]');
+        if (rangeWrap) {
+            var hint = document.createElement('span');
+            hint.className = 'max-hint';
+            hint.textContent = 'All';
+            hint.style.cssText = 'position: absolute; right: 0; bottom: -1.2em; font-size: 0.7em; opacity: 0.5;';
+            var parent = rangeWrap.parentNode;
+            if (parent) {
+                parent.style.position = 'relative';
+                parent.appendChild(hint);
+            }
+        }
+    }
+}
+
+// Expose to global scope so Gradio inline js= callbacks can call them
+window.rebuildWindowGradient = rebuildWindowGradient;
+window.reapplyWindowNow = reapplyWindowNow;
+window.updateWindowMaxLabel = updateWindowMaxLabel;
+window.saveAnimSettings = saveAnimSettings;
+window.loadAnimSettings = loadAnimSettings;
+
+// Inject "All" hints on slider tracks once Gradio renders them
+setTimeout(function() {
+    updateWindowMaxLabel('anim-window-prev', window.ANIM_WINDOW_PREV, window.ANIM_WINDOW_PREV_MAX);
+    updateWindowMaxLabel('anim-window-after', window.ANIM_WINDOW_AFTER, window.ANIM_WINDOW_AFTER_MAX);
+}, 500);
+
+// Clear inline opacity from all words/chars in a card (Window mode cleanup)
+// Applies mode's prev_opacity instead of removing opacity entirely
+function clearWindowOpacity(card) {
+    var prevOp = window.ANIM_OPACITY_PREV;
+    card.querySelectorAll('.word, .char').forEach(function(el) {
+        // Apply mode's prev_opacity consistently:
+        // - Reveal/Fade (1.0): full visibility
+        // - Spotlight (0.3): dimmed
+        // - Isolate/Consume (0): hidden/disappear
+        if (prevOp >= 1) {
+            el.style.removeProperty('opacity');
+        } else {
+            el.style.opacity = String(prevOp);
+        }
+    });
+}
+
+function clearHighlights(card) {
+    card.querySelectorAll('.word.active, .word.reached, .char.active, .char.reached').forEach(function(w) {
+        w.classList.remove('active', 'reached');
+    });
+    clearWindowOpacity(card);
+    card.classList.remove('anim-window', 'anim-chars');
+}
+
+function stopAnimation(audio, card) {
+    if (audio._rafId) {
+        cancelAnimationFrame(audio._rafId);
+        audio._rafId = null;
+    }
+    if (card) {
+        // Apply mode's prev_opacity to last active word before clearing
+        var activeEl = card.querySelector('.word.active, .char.active');
+        if (activeEl && window.ANIM_OPACITY_PREV < 1) {
+            activeEl.style.opacity = String(window.ANIM_OPACITY_PREV);
+        }
+        clearHighlights(card);
+    }
+}
+
+function startAnimation(audio, card) {
+    var lastWordIdx = -1;
+    var lastGranularity = window.ANIM_GRANULARITY;
+    var lastOpacityPrev = window.ANIM_OPACITY_PREV;
+    var lastSeenVersion = window._windowSettingsVersion;
+    // Segment audio is trimmed, so currentTime starts at 0.
+    // Word timestamps are absolute, so we need to add segment offset.
+    var segOffset = parseFloat(card.dataset.startTime) || 0;
+
+    function tick() {
+        if (audio.paused || audio.ended) return;
+        var wordCache = getActiveCache(audio);
+        var currentTime = audio.currentTime + segOffset;
+
+        // Granularity switched mid-animation — clear old highlights and reset
+        if (window.ANIM_GRANULARITY !== lastGranularity) {
+            animDebug('TICK', 'Granularity changed: ' + lastGranularity + ' -> ' + window.ANIM_GRANULARITY);
+            card.querySelectorAll('.word.active, .word.reached, .char.active, .char.reached').forEach(function(w) {
+                w.classList.remove('active', 'reached');
+            });
+            clearWindowOpacity(card);
+            lastWordIdx = -1;
+            lastGranularity = window.ANIM_GRANULARITY;
+        }
+
+        // Mode changed mid-animation — refresh all reached words with new opacity
+        if (window.ANIM_OPACITY_PREV !== lastOpacityPrev) {
+            animDebug('TICK', 'Mode changed: prevOp ' + lastOpacityPrev + ' -> ' + window.ANIM_OPACITY_PREV);
+            card.querySelectorAll('.word.reached, .char.reached').forEach(function(el) {
+                if (window.ANIM_OPACITY_PREV >= 1) {
+                    el.style.removeProperty('opacity');
+                } else {
+                    el.style.opacity = String(window.ANIM_OPACITY_PREV);
+                }
+            });
+            lastOpacityPrev = window.ANIM_OPACITY_PREV;
+        }
+
+        // Slider settings changed mid-animation — reapply window opacity
+        if (window._windowSettingsVersion !== lastSeenVersion) {
+            if (lastWordIdx >= 0) {
+                applyWindowOpacity(wordCache, lastWordIdx, lastWordIdx);
+            }
+            lastSeenVersion = window._windowSettingsVersion;
+        }
+
+        var newWordIdx = -1;
+        var searchPath = '';
+        // Fast path: check current word, then next (covers ~99% of frames)
+        if (lastWordIdx >= 0 && lastWordIdx < wordCache.length &&
+            currentTime >= wordCache[lastWordIdx].start && currentTime < wordCache[lastWordIdx].end) {
+            newWordIdx = lastWordIdx;
+            searchPath = 'same';
+        } else if (lastWordIdx + 1 < wordCache.length &&
+            currentTime >= wordCache[lastWordIdx + 1].start && currentTime < wordCache[lastWordIdx + 1].end) {
+            newWordIdx = lastWordIdx + 1;
+            searchPath = 'next';
+        } else {
+            // Fallback: full scan (seeking, granularity switch, etc.)
+            searchPath = 'scan';
+            for (var i = 0; i < wordCache.length; i++) {
+                if (currentTime >= wordCache[i].start && currentTime < wordCache[i].end) {
+                    newWordIdx = i;
+                    break;
+                }
+            }
+            // Clamp to last word when past its end but audio hasn't ended yet
+            if (newWordIdx === -1 && wordCache.length > 0 && currentTime >= wordCache[wordCache.length - 1].start) {
+                newWordIdx = wordCache.length - 1;
+                searchPath = 'clamp';
+            }
+        }
+
+        // Only update DOM if word changed
+        if (newWordIdx !== lastWordIdx) {
+            var newText = newWordIdx >= 0 ? wordCache[newWordIdx].el.textContent.substring(0, 15) : '-';
+            animDebug('TICK', 'idx change: ' + lastWordIdx + ' -> ' + newWordIdx + ' (' + searchPath + ') t=' + currentTime.toFixed(3) + ' "' + newText + '"');
+            if (newWordIdx === -1 && wordCache.length > 0) {
+                // No match - log surrounding timing info
+                var first = wordCache[0];
+                var last = wordCache[wordCache.length - 1];
+                animDebug('TICK', '  NO MATCH: t=' + currentTime.toFixed(3) + ' cache[0]=[' + first.start.toFixed(3) + ',' + first.end.toFixed(3) + '] cache[' + (wordCache.length-1) + ']=[' + last.start.toFixed(3) + ',' + last.end.toFixed(3) + ']');
+            }
+            if (lastWordIdx >= 0 && lastWordIdx < wordCache.length) {
+                applyClassToGroup(wordCache, lastWordIdx, 'active', false);
+                applyClassToGroup(wordCache, lastWordIdx, 'reached', true);
+            }
+            if (newWordIdx >= 0) {
+                applyClassToGroup(wordCache, newWordIdx, 'active', true);
+                if (lastWordIdx === -1) {
+                    // First highlight — catch up any skipped words (with group support)
+                    for (var j = 0; j < newWordIdx; j++) {
+                        applyClassToGroup(wordCache, j, 'reached', true);
+                    }
+                }
+            }
+            if (newWordIdx >= 0) {
+                applyWindowOpacity(wordCache, newWordIdx, lastWordIdx);
+            }
+            lastWordIdx = newWordIdx;
+        }
+    }
+
+    function rafLoop() {
+        tick();
+        if (!audio.paused && !audio.ended) {
+            audio._rafId = requestAnimationFrame(rafLoop);
+        }
+    }
+    audio._rafId = requestAnimationFrame(rafLoop);
+}
+
+function toggleAnimation(btn) {
+    var card = btn.closest('.segment-card');
+    if (!card) return;
+    var audio = card.querySelector('audio');
+    if (!audio) return;
+
+    var isActive = btn.classList.toggle('active');
+    if (isActive) {
+        btn.textContent = 'Stop';
+        // Apply window engine class to card
+        card.classList.add('anim-window');
+        if (window.ANIM_GRANULARITY === 'Characters') {
+            card.classList.add('anim-chars');
+        }
+        // Build both caches upfront for live granularity switching
+        audio._cacheWords = initCacheFor(card, '.segment-text .word');
+        audio._cacheChars = initCacheFor(card, '.segment-text .char');
+        animDebug('START', 'toggleAnimation: words=' + audio._cacheWords.length + ' chars=' + audio._cacheChars.length + ' granularity=' + window.ANIM_GRANULARITY);
+        dumpCacheTimestamps(audio._cacheWords, 'Words');
+        dumpCacheTimestamps(audio._cacheChars, 'Chars');
+        activateAudio(audio);
+        startAnimation(audio, card);
+        audio.play();
+    } else {
+        btn.textContent = 'Animate';
+        audio.pause();
+        stopAnimation(audio, card);
+    }
+}