@uimaxbai/am-lyrics 1.4.1 → 1.5.0

package/dist/src/react.js

@@ -322,14 +322,11 @@ class GoogleService {
     }
 }
 
-const VERSION = '1.4.1';
+const VERSION = '1.5.0';
 const INSTRUMENTAL_THRESHOLD_MS = 7000; // Show dots for gaps >= 7s
 const FETCH_TIMEOUT_MS = 8000; // Timeout for all lyrics fetch requests
 const SEEK_THRESHOLD_MS = 500;
-const PRE_SCROLL_LEAD_MS = 500;
-const PRE_SCROLL_LEAD_SHORT_MS = 350;
-const SCROLL_ANIMATION_DURATION_MS = 280;
-const SCROLL_DELAY_INCREMENT_MS = 24;
+const SCROLL_ANIMATION_DURATION_MS = 350;
 const GAP_PULSE_DURATION_MS = 4000;
 const GAP_PULSE_CYCLE_MS = GAP_PULSE_DURATION_MS * 2;
 const GAP_EXIT_LEAD_MS = 600;
@@ -380,6 +377,8 @@ let AmLyrics$1 = class AmLyrics extends i {
         this.isClickSeeking = false;
         // Cached DOM elements for animation updates
         this.cachedLyricsLines = [];
+        // Cached line elements array for scroll/position queries
+        this.cachedLineArray = [];
         // Cached line and gap element maps for fast lookup
         this.lineElementCache = new Map();
         this.gapElementCache = new Map();
@@ -400,6 +399,8 @@ let AmLyrics$1 = class AmLyrics extends i {
         // Syllable animation tracking
         this.lastActiveIndex = 0;
         this.visibleLineIds = new Set();
+        // Cached scroll padding top value
+        this.cachedScrollPaddingTop = null;
         // Cached element tracking to avoid repeated querySelectorAll calls
         this.preActiveLineElements = [];
         this.positionedLineElements = [];
@@ -490,9 +491,9 @@ let AmLyrics$1 = class AmLyrics extends i {
             this.activeGapLineElements = [];
             // Stop all running animations and clear highlights immediately
             if (this.lyricsContainer) {
-                const activeLines = this.lyricsContainer.querySelectorAll('.lyrics-line.active, .lyrics-line.pre-active');
+                const activeLines = this.lyricsContainer.querySelectorAll('.lyrics-line.active, .lyrics-line.pre-active, .lyrics-line.bg-expanded');
                 activeLines.forEach(line => {
-                    line.classList.remove('active', 'pre-active');
+                    line.classList.remove('active', 'pre-active', 'bg-expanded');
                     AmLyrics.resetSyllables(line);
                 });
                 const activeGaps = this.lyricsContainer.querySelectorAll('.lyrics-gap.active, .lyrics-gap.gap-exiting');
@@ -546,14 +547,14 @@ let AmLyrics$1 = class AmLyrics extends i {
             clearTimeout(this.clickSeekTimeout);
             this.clickSeekTimeout = undefined;
         }
-        if (this.scrollUnlockTimeout) {
-            clearTimeout(this.scrollUnlockTimeout);
-            this.scrollUnlockTimeout = undefined;
-        }
         if (this.scrollAnimationTimeout) {
             clearTimeout(this.scrollAnimationTimeout);
             this.scrollAnimationTimeout = undefined;
         }
+        if (this.scrollUnlockTimeout) {
+            clearTimeout(this.scrollUnlockTimeout);
+            this.scrollUnlockTimeout = undefined;
+        }
         // Cancel any in-flight fetch requests
         this.fetchAbortController?.abort();
         this.fetchAbortController = undefined;
@@ -565,6 +566,8 @@ let AmLyrics$1 = class AmLyrics extends i {
         this.preActiveLineElements = [];
         this.positionedLineElements = [];
         this.activeGapLineElements = [];
+        this.visibilityObserver?.disconnect();
+        this.visibilityObserver = undefined;
     }
     async fetchLyrics() {
         // Cancel any in-flight fetch to prevent stale results from racing
@@ -593,9 +596,21 @@ let AmLyrics$1 = class AmLyrics extends i {
             if (resolvedMetadata?.metadata && !isMusicIdOnlyRequest) {
                 const title = resolvedMetadata.metadata.title?.trim() || '';
                 const artist = resolvedMetadata.metadata.artist?.trim() || '';
-                const youLyResults = await AmLyrics.fetchLyricsFromYouLyPlus(title, artist, resolvedMetadata.catalogIsrc, resolvedMetadata.metadata);
-                if (youLyResults && youLyResults.length > 0) {
-                    collectedSources.push(...youLyResults);
+                const biniResult = await AmLyrics.fetchLyricsFromBiniLyrics(title, artist, resolvedMetadata.catalogIsrc, resolvedMetadata.metadata);
+                if (biniResult && biniResult.lines.length > 0) {
+                    collectedSources.push(biniResult);
+                }
+                if (collectedSources.length === 0) {
+                    const unisonResult = await AmLyrics.fetchLyricsFromUnison(resolvedMetadata.metadata);
+                    if (unisonResult && unisonResult.lines.length > 0) {
+                        collectedSources.push(unisonResult);
+                    }
+                }
+                if (collectedSources.length === 0) {
+                    const youLyResults = await AmLyrics.fetchLyricsFromYouLyPlus(title, artist, resolvedMetadata.catalogIsrc, resolvedMetadata.metadata, true);
+                    if (youLyResults && youLyResults.length > 0) {
+                        collectedSources.push(...youLyResults);
+                    }
                 }
             }
             if (collectedSources.length === 0 && resolvedMetadata?.metadata) {
@@ -679,35 +694,47 @@ let AmLyrics$1 = class AmLyrics extends i {
         const isQQ = lower.includes('qq') || lower.includes('lyricsplus');
         if (lower.includes('apple') && hasWordSync)
             return 1;
-        if (isQQ && hasWordSync)
+        if (lower.includes('bini') && hasWordSync)
             return 2;
-        if (lower.includes('musixmatch') && hasWordSync)
+        if (lower.includes('unison') && hasWordSync)
             return 3;
-        if (lower.includes('lrclib') && hasWordSync)
+        if (isQQ && hasWordSync)
             return 4;
-        if (hasWordSync)
+        if (lower.includes('musixmatch') && hasWordSync)
             return 5;
-        if (lower.includes('apple') && !hasWordSync && !isUnsynced)
+        if (lower.includes('lrclib') && hasWordSync)
             return 6;
-        if (isQQ && !hasWordSync && !isUnsynced)
+        if (hasWordSync)
             return 7;
-        if (lower.includes('musixmatch') && !hasWordSync && !isUnsynced)
+        if (lower.includes('apple') && !hasWordSync && !isUnsynced)
             return 8;
-        if (lower.includes('lrclib') && !hasWordSync && !isUnsynced)
+        if (lower.includes('bini') && !hasWordSync && !isUnsynced)
             return 9;
-        if (!hasWordSync && !isUnsynced)
+        if (lower.includes('unison') && !hasWordSync && !isUnsynced)
             return 10;
-        if (lower.includes('apple') && isUnsynced)
+        if (isQQ && !hasWordSync && !isUnsynced)
             return 11;
-        if (isQQ && isUnsynced)
+        if (lower.includes('musixmatch') && !hasWordSync && !isUnsynced)
             return 12;
-        if (lower.includes('musixmatch') && isUnsynced)
+        if (lower.includes('lrclib') && !hasWordSync && !isUnsynced)
             return 13;
-        if (lower.includes('lrclib') && isUnsynced)
+        if (!hasWordSync && !isUnsynced)
             return 14;
-        if (lower.includes('genius'))
+        if (lower.includes('apple') && isUnsynced)
             return 15;
-        return 20;
+        if (lower.includes('bini') && isUnsynced)
+            return 16;
+        if (lower.includes('unison') && isUnsynced)
+            return 17;
+        if (isQQ && isUnsynced)
+            return 18;
+        if (lower.includes('musixmatch') && isUnsynced)
+            return 19;
+        if (lower.includes('lrclib') && isUnsynced)
+            return 20;
+        if (lower.includes('genius'))
+            return 21;
+        return 30;
     }
     static mergeAndSortSources(collectedSources) {
         const uniqueSourcesMap = new Map();
@@ -925,60 +952,11 @@ let AmLyrics$1 = class AmLyrics extends i {
         }
         return null;
     }
-    static async fetchLyricsFromYouLyPlus(title, artist, isrc, metadata = {}) {
+    static async fetchLyricsFromBiniLyrics(title, artist, isrc, metadata = {}) {
         if ((!title || !artist) && !isrc)
-            return [];
-        const params = new URLSearchParams();
-        if (title)
-            params.append('title', title);
-        if (artist)
-            params.append('artist', artist);
-        if (isrc)
-            params.append('isrc', isrc);
-        if (metadata.album) {
-            params.append('album', metadata.album);
-        }
-        if (metadata.durationMs && metadata.durationMs > 0) {
-            params.append('duration', Math.round(metadata.durationMs / 1000).toString());
-        }
-        if (!DEFAULT_KPOE_SOURCE_ORDER.includes('apple')) {
-            params.append('source', DEFAULT_KPOE_SOURCE_ORDER);
-        }
-        const getRank = (sourceLabel, parsedLines) => {
-            const lower = sourceLabel.toLowerCase();
-            const hasWordSync = parsedLines.some((line) => line.text && Array.isArray(line.text) && line.text.length > 1);
-            const isUnsynced = parsedLines.length > 0 &&
-                parsedLines.every((line) => line.timestamp === 0 && line.endtime === 0);
-            const isQQ = lower.includes('qq') || lower.includes('lyricsplus');
-            if (lower.includes('apple') && hasWordSync)
-                return 1;
-            if (isQQ && hasWordSync)
-                return 2;
-            if (lower.includes('musixmatch') && hasWordSync)
-                return 3;
-            if (hasWordSync)
-                return 4;
-            if (lower.includes('apple') && !hasWordSync && !isUnsynced)
-                return 5;
-            if (isQQ && !hasWordSync && !isUnsynced)
-                return 6;
-            if (lower.includes('musixmatch') && !hasWordSync && !isUnsynced)
-                return 7;
-            if (!hasWordSync && !isUnsynced)
-                return 8;
-            if (lower.includes('apple') && isUnsynced)
-                return 9;
-            if (isQQ && isUnsynced)
-                return 10;
-            if (lower.includes('musixmatch') && isUnsynced)
-                return 11;
-            return 20;
-        };
-        const allResults = [];
-        // Try BiniLyrics cache API first
+            return null;
         try {
             let cacheData = null;
-            // First attempt: Prefer ISRC search if available
             if (isrc) {
                 try {
                     const isrcUrl = `https://lyrics-api.binimum.org/?isrc=${encodeURIComponent(isrc)}`;
@@ -990,11 +968,10 @@ let AmLyrics$1 = class AmLyrics extends i {
                         }
                     }
                 }
-                catch (isrcErr) {
+                catch {
                     // Fall through to title/artist search
                 }
             }
-            // Second attempt: Fallback to title and artist search if ISRC search failed or was not available
             if (!cacheData && title && artist) {
                 const cacheParams = new URLSearchParams({
                     track: title,
@@ -1014,57 +991,17 @@ let AmLyrics$1 = class AmLyrics extends i {
             }
             if (cacheData && cacheData.results && cacheData.results.length > 0) {
                 const result = cacheData.results[0];
-                if (result.timing_type === 'word' && result.lyricsUrl) {
+                if (result.lyricsUrl) {
                     const ttmlRes = await fetchWithTimeout(result.lyricsUrl);
                     if (ttmlRes.ok) {
                         const ttmlText = await ttmlRes.text();
                         const parseResult = AmLyrics.parseTTML(ttmlText);
                         if (parseResult && parseResult.lines.length > 0) {
-                            allResults.push({
+                            return {
                                 lines: parseResult.lines,
                                 source: 'BiniLyrics',
                                 songwriters: parseResult.songwriters,
-                            });
-                            return allResults;
-                        }
-                    }
-                }
-                else {
-                    // Not word type, try fetching any word synced lyrics from lyricsplus
-                    const fallbackParams = new URLSearchParams(params);
-                    const fallbackUrl = `https://lyricsplus.binimum.org/v2/lyrics/get?${fallbackParams.toString()}`;
-                    try {
-                        const fallbackRes = await fetchWithTimeout(fallbackUrl);
-                        if (fallbackRes.ok) {
-                            const payload = await fallbackRes.json();
-                            const lines = AmLyrics.convertKPoeLyrics(payload);
-                            const hasWordSync = lines?.some((line) => line.text && Array.isArray(line.text) && line.text.length > 1);
-                            if (lines && lines.length > 0 && hasWordSync) {
-                                const sourceLabel = payload?.metadata?.source ||
-                                    payload?.metadata?.provider ||
-                                    'LyricsPlus (KPoe)';
-                                allResults.push({ lines, source: sourceLabel });
-                                return allResults;
-                            }
-                        }
-                    }
-                    catch (fallbackError) {
-                        // Ignore fallback fetch error
-                    }
-                    // If fallback fails or has no word sync, fall back to bini lyrics
-                    if (result.lyricsUrl) {
-                        const ttmlRes = await fetchWithTimeout(result.lyricsUrl);
-                        if (ttmlRes.ok) {
-                            const ttmlText = await ttmlRes.text();
-                            const parseResult = AmLyrics.parseTTML(ttmlText);
-                            if (parseResult && parseResult.lines.length > 0) {
-                                allResults.push({
-                                    lines: parseResult.lines,
-                                    source: 'BiniLyrics',
-                                    songwriters: parseResult.songwriters,
-                                });
-                                return allResults;
-                            }
+                            };
                         }
                     }
                 }
@@ -1074,6 +1011,77 @@ let AmLyrics$1 = class AmLyrics extends i {
             // eslint-disable-next-line no-console
             console.error('Cache API failed', e);
         }
+        return null;
+    }
+    static async fetchLyricsFromYouLyPlus(title, artist, isrc, metadata = {}, skipBiniCache = false) {
+        if ((!title || !artist) && !isrc)
+            return [];
+        const params = new URLSearchParams();
+        if (title)
+            params.append('title', title);
+        if (artist)
+            params.append('artist', artist);
+        if (isrc)
+            params.append('isrc', isrc);
+        if (metadata.album) {
+            params.append('album', metadata.album);
+        }
+        if (metadata.durationMs && metadata.durationMs > 0) {
+            params.append('duration', Math.round(metadata.durationMs / 1000).toString());
+        }
+        if (!DEFAULT_KPOE_SOURCE_ORDER.includes('apple')) {
+            params.append('source', DEFAULT_KPOE_SOURCE_ORDER);
+        }
+        const getRank = (sourceLabel, parsedLines) => {
+            const lower = sourceLabel.toLowerCase();
+            const hasWordSync = parsedLines.some((line) => line.text && Array.isArray(line.text) && line.text.length > 1);
+            const isUnsynced = parsedLines.length > 0 &&
+                parsedLines.every((line) => line.timestamp === 0 && line.endtime === 0);
+            const isQQ = lower.includes('qq') || lower.includes('lyricsplus');
+            if (lower.includes('apple') && hasWordSync)
+                return 1;
+            if (lower.includes('bini') && hasWordSync)
+                return 2;
+            if (lower.includes('unison') && hasWordSync)
+                return 3;
+            if (isQQ && hasWordSync)
+                return 4;
+            if (lower.includes('musixmatch') && hasWordSync)
+                return 5;
+            if (hasWordSync)
+                return 6;
+            if (lower.includes('apple') && !hasWordSync && !isUnsynced)
+                return 7;
+            if (lower.includes('bini') && !hasWordSync && !isUnsynced)
+                return 8;
+            if (lower.includes('unison') && !hasWordSync && !isUnsynced)
+                return 9;
+            if (isQQ && !hasWordSync && !isUnsynced)
+                return 10;
+            if (lower.includes('musixmatch') && !hasWordSync && !isUnsynced)
+                return 11;
+            if (!hasWordSync && !isUnsynced)
+                return 12;
+            if (lower.includes('apple') && isUnsynced)
+                return 13;
+            if (lower.includes('bini') && isUnsynced)
+                return 14;
+            if (lower.includes('unison') && isUnsynced)
+                return 15;
+            if (isQQ && isUnsynced)
+                return 16;
+            if (lower.includes('musixmatch') && isUnsynced)
+                return 17;
+            return 30;
+        };
+        const allResults = [];
+        if (!skipBiniCache) {
+            const biniResult = await AmLyrics.fetchLyricsFromBiniLyrics(title, artist, isrc, metadata);
+            if (biniResult) {
+                allResults.push(biniResult);
+                return allResults;
+            }
+        }
         // Shuffle servers so we pick a random one first, with all others as fallback
         // Try up to 3 servers to improve reliability when some have CORS or connectivity issues
         const shuffledServers = [...KPOE_SERVERS]
@@ -1299,6 +1307,73 @@ let AmLyrics$1 = class AmLyrics extends i {
         }
         return null;
     }
+    static async fetchLyricsFromUnison(metadata) {
+        const title = metadata.title?.trim();
+        const artist = metadata.artist?.trim();
+        if (!title || !artist)
+            return null;
+        const params = new URLSearchParams();
+        params.append('song', title);
+        params.append('artist', artist);
+        if (metadata.album) {
+            params.append('album', metadata.album);
+        }
+        if (metadata.durationMs && metadata.durationMs > 0) {
+            params.append('duration', Math.round(metadata.durationMs / 1000).toString());
+        }
+        try {
+            const response = await fetchWithTimeout(`https://unison.boidu.dev/lyrics?${params.toString()}`);
+            if (!response.ok)
+                return null;
+            const data = await response.json();
+            if (!data.success || !data.data?.lyrics)
+                return null;
+            const lyricsData = data.data;
+            const format = lyricsData.format || 'lrc';
+            const syncType = lyricsData.syncType || 'linesync';
+            const lyricsText = lyricsData.lyrics;
+            if (format === 'ttml') {
+                const parseResult = AmLyrics.parseTTML(lyricsText);
+                if (parseResult && parseResult.lines.length > 0) {
+                    return {
+                        lines: parseResult.lines,
+                        source: 'Unison',
+                        songwriters: parseResult.songwriters,
+                    };
+                }
+            }
+            if (format === 'lrc') {
+                if (syncType === 'plain') {
+                    const plainLines = lyricsText
+                        .split('\n')
+                        .map((l) => l.trim())
+                        .filter((l) => l);
+                    if (plainLines.length > 0) {
+                        const lines = plainLines.map((text) => ({
+                            text: [{ text, part: false, timestamp: 0, endtime: 0 }],
+                            background: false,
+                            backgroundText: [],
+                            oppositeTurn: false,
+                            timestamp: 0,
+                            endtime: 0,
+                            isWordSynced: false,
+                        }));
+                        return { lines, source: 'Unison (unsynced)' };
+                    }
+                }
+                else {
+                    const lines = AmLyrics.parseLrcSubtitles(lyricsText);
+                    if (lines.length > 0) {
+                        return { lines, source: 'Unison' };
+                    }
+                }
+            }
+        }
+        catch {
+            // Unison fetch failed
+        }
+        return null;
+    }
     static calculateLineAlignments(lineSingers, agentTypes) {
         const lineSideAssignments = new Array(lineSingers.length).fill(undefined);
         let currentSideIsLeft = true;
@@ -1774,25 +1849,35 @@ let AmLyrics$1 = class AmLyrics extends i {
         const linesChanged = !AmLyrics.arraysEqual(newActiveLines, oldActiveLines);
         if (linesChanged || isSeek) {
             if (this.lyricsContainer) {
-                // Remove 'active' from lines that are no longer active
+                // Remove .active and .bg-expanded immediately when a line drops.
+                // All visual fading is handled by CSS transitions — no JS delays,
+                // so overlapping lyrics never get stuck with multiple .active lines.
                 for (const lineIndex of oldActiveLines) {
                     if (!newActiveLines.includes(lineIndex)) {
                         const lineElement = this._getLineElement(lineIndex);
                         if (lineElement) {
-                            lineElement.classList.remove('active', 'pre-active');
+                            if (isSeek || this.isUserScrolling) {
+                                AmLyrics.unfinishSyllables(lineElement);
+                            }
+                            else {
+                                AmLyrics.finishSyllablesUpToTime(lineElement, newTime);
+                            }
+                            lineElement.classList.remove('active', 'bg-expanded');
+                            if (lineElement.classList.contains('pre-active')) {
+                                lineElement.classList.remove('pre-active');
+                            }
                             const preIdx = this.preActiveLineElements.indexOf(lineElement);
                             if (preIdx !== -1)
                                 this.preActiveLineElements.splice(preIdx, 1);
-                            AmLyrics.resetSyllables(lineElement);
                         }
                     }
                 }
-                // Add 'active' to newly active lines
+                // Add 'active' and 'bg-expanded' to newly active lines
                 for (const lineIndex of newActiveLines) {
                     if (!oldActiveLines.includes(lineIndex)) {
                         const lineElement = this._getLineElement(lineIndex);
                         if (lineElement) {
-                            lineElement.classList.add('active');
+                            lineElement.classList.add('active', 'bg-expanded');
                             lineElement.classList.remove('pre-active');
                             const preIdx = this.preActiveLineElements.indexOf(lineElement);
                             if (preIdx !== -1)
@@ -1800,13 +1885,24 @@ let AmLyrics$1 = class AmLyrics extends i {
                         }
                     }
                 }
-                if (newActiveLines.length > 0) {
-                    this.clearPreActiveClasses();
+                // Remove pre-active from lines that are now active (they no longer
+                // need the unblur preview class) and from lines that dropped.
+                for (const lineElement of this.preActiveLineElements) {
+                    const idx = AmLyrics.getLineIndexFromElement(lineElement);
+                    if (idx === null ||
+                        (!newActiveLines.includes(idx) &&
+                            lineElement !== this.currentPrimaryActiveLine)) {
+                        lineElement.classList.remove('pre-active');
+                    }
                 }
+                this.preActiveLineElements = this.preActiveLineElements.filter(el => el.classList.contains('pre-active'));
             }
             this.startAnimationFromTime(newTime);
-            this._handleActiveLineScroll(oldActiveLines, isSeek);
         }
+        // Predictive scroll: run on every tick so we scroll *before* the next
+        // line starts, matching YouLyPlus behaviour.
+        this._handleActiveLineScroll(oldActiveLines, isSeek);
+        this.clearPastLineHighlights();
         if (this.lyricsContainer) {
             // Update syllables in active lines using cached elements
             for (const lineIndex of this.activeLineIndices) {
@@ -1822,8 +1918,10 @@ let AmLyrics$1 = class AmLyrics extends i {
             // Imperatively manage gap active state
             if (this.gapElementCache.size > 0) {
                 for (const [, gap] of this.gapElementCache) {
-                    const gapStartTime = parseFloat(gap.getAttribute('data-start-time') || '0');
-                    const gapEndTime = parseFloat(gap.getAttribute('data-end-time') || '0');
+                    const gapStartTime = gap._cachedStartTime ??
+                        parseFloat(gap.getAttribute('data-start-time') || '0');
+                    const gapEndTime = gap._cachedEndTime ??
+                        parseFloat(gap.getAttribute('data-end-time') || '0');
                     const shouldBeActive = newTime >= gapStartTime && newTime < gapEndTime;
                     const isActive = gap.classList.contains('active');
                     const isExiting = gap.classList.contains('gap-exiting');
@@ -1954,6 +2052,15 @@ let AmLyrics$1 = class AmLyrics extends i {
                 const isFooterActive = newTime > lastLyric.endtime + 200; // Snappier 200ms buffer
                 if (isFooterActive && !footer.classList.contains('active')) {
                     footer.classList.add('active');
+                    // Clear pre-active from the last lyric so it doesn't stay
+                    // unblurred when the footer takes over.
+                    const lastLine = this.lyricsContainer.querySelector('.lyrics-line:last-of-type');
+                    if (lastLine) {
+                        lastLine.classList.remove('pre-active');
+                        const preIdx = this.preActiveLineElements.indexOf(lastLine);
+                        if (preIdx !== -1)
+                            this.preActiveLineElements.splice(preIdx, 1);
+                    }
                     if (this.autoScroll &&
                         !this.isUserScrolling &&
                         !this.isClickSeeking) {
@@ -1964,41 +2071,6 @@ let AmLyrics$1 = class AmLyrics extends i {
                     footer.classList.remove('active');
                 }
             }
-            // Pre-scroll: scroll to upcoming line ~0.5s before it starts
-            if (this.autoScroll &&
-                !this.isUserScrolling &&
-                !this.isClickSeeking &&
-                this.lyrics) {
-                let preActiveLineIndex = null;
-                for (let i = 0; i < this.lyrics.length; i += 1) {
-                    const line = this.lyrics[i];
-                    const timeUntilStart = line.timestamp - newTime;
-                    const nextLineEl = this._getLineElement(i);
-                    const isBackToBack = this.activeLineIndices.length > 0;
-                    const leadTime = isBackToBack
-                        ? PRE_SCROLL_LEAD_SHORT_MS
-                        : PRE_SCROLL_LEAD_MS;
-                    if (timeUntilStart > leadTime) {
-                        break;
-                    }
-                    if (timeUntilStart > 0 && timeUntilStart <= leadTime) {
-                        if (nextLineEl) {
-                            preActiveLineIndex = i;
-                            if (!isBackToBack) {
-                                nextLineEl.classList.add('pre-active');
-                                if (!this.preActiveLineElements.includes(nextLineEl)) {
-                                    this.preActiveLineElements.push(nextLineEl);
-                                }
-                            }
-                            this.clearPreActiveClasses(i);
-                            const slowScrollDuration = Math.max(SCROLL_ANIMATION_DURATION_MS, timeUntilStart);
-                            this.focusLine(nextLineEl, false, isBackToBack ? 500 : slowScrollDuration);
-                        }
-                        break;
-                    }
-                }
-                this.clearPreActiveClasses(preActiveLineIndex);
-            }
         }
     }
     updated(changedProperties) {
@@ -2016,11 +2088,31 @@ let AmLyrics$1 = class AmLyrics extends i {
                 for (const lineIndex of activeLines) {
                     const lineEl = this._getLineElement(lineIndex);
                     if (lineEl)
-                        lineEl.classList.add('active');
+                        lineEl.classList.add('active', 'bg-expanded');
                 }
                 // Trigger a faux time-change so that updateSyllablesForLine fires
                 // to setup inline syllable CSS wipe animations for whatever the current time is
                 this._onTimeChanged(0, this.currentTime);
+                // Ensure position classes are applied on initial render if not playing yet
+                if (this.positionedLineElements.length === 0) {
+                    const firstLine = this.lyricsContainer.querySelector('.lyrics-line');
+                    if (firstLine)
+                        this.updatePositionClasses(firstLine);
+                }
+                // Set up IntersectionObserver for viewport virtualization
+                this.visibilityObserver?.disconnect();
+                this.visibilityObserver = new IntersectionObserver(entries => {
+                    entries.forEach(entry => {
+                        const el = entry.target;
+                        el.classList.toggle('far-line', !entry.isIntersecting);
+                    });
+                }, {
+                    root: this.lyricsContainer,
+                    rootMargin: '200px',
+                    threshold: 0,
+                });
+                const lines = this.lyricsContainer.querySelectorAll('.lyrics-line');
+                lines.forEach(line => this.visibilityObserver.observe(line));
             }
         }
         // Handle duration reset (-1 stops playback and resets currentTime to 0)
@@ -2047,6 +2139,14 @@ let AmLyrics$1 = class AmLyrics extends i {
                 clearTimeout(this.userScrollTimeoutId);
                 this.userScrollTimeoutId = undefined;
             }
+            if (this.scrollUnlockTimeout) {
+                clearTimeout(this.scrollUnlockTimeout);
+                this.scrollUnlockTimeout = undefined;
+            }
+            if (this.scrollAnimationTimeout) {
+                clearTimeout(this.scrollAnimationTimeout);
+                this.scrollAnimationTimeout = undefined;
+            }
             // Scroll to top
             if (this.lyricsContainer) {
                 this.lyricsContainer.scrollTop = 0;
@@ -2068,30 +2168,56 @@ let AmLyrics$1 = class AmLyrics extends i {
     /**
      * Handle scrolling when active line indices change.
      * Called imperatively from _onTimeChanged instead of from updated().
+     *
+     * Uses predictive scroll like YouLyPlus: computes a scrollLookAheadMs based
+     * on the gap to the next line, finds the primary line at predictiveTime,
+     * and scrolls with a duration matching the lookahead.
      */
     _handleActiveLineScroll(_oldActiveIndices, forceScroll = false) {
-        if (this.activeLineIndices.length === 0 || !this.lyricsContainer) {
+        if (!this.lyricsContainer || !this.lyrics || this.lyrics.length === 0) {
+            return;
+        }
+        // If the footer is already active, it set up its own scroll.
+        // Don't override it with a scroll back to the last lyric.
+        const footer = this.lyricsContainer.querySelector('.lyrics-footer');
+        if (footer?.classList.contains('active')) {
             return;
         }
-        const targetLineIndex = this.getPrimaryActiveLineIndex(this.activeLineIndices);
-        if (targetLineIndex === null)
+        // 1. Compute scroll lookahead based on gap to next line (YouLyPlus style)
+        let scrollLookAheadMs = 350;
+        const currentAudioIndex = this.getLineIndexAtTime(this.currentTime, this.lastActiveIndex);
+        if (currentAudioIndex !== -1 &&
+            currentAudioIndex + 1 < this.lyrics.length) {
+            const currentLine = this.lyrics[currentAudioIndex];
+            const nextLine = this.lyrics[currentAudioIndex + 1];
+            const gap = nextLine.timestamp - currentLine.endtime;
+            scrollLookAheadMs = Math.min(500, Math.max(350, gap));
+        }
+        // 2. Find scroll target at predictive time
+        const predictiveTime = this.currentTime + scrollLookAheadMs;
+        const predictiveActiveIndices = this.findActiveLineIndices(predictiveTime);
+        let targetLineIndex;
+        if (predictiveActiveIndices.length > 0) {
+            targetLineIndex = this.getPrimaryScrollLineIndex(predictiveActiveIndices, predictiveTime);
+        }
+        else {
+            // Fallback: closest line before predictiveTime
+            targetLineIndex = this.getLineIndexAtTime(predictiveTime, 0);
+        }
+        if (targetLineIndex === null || targetLineIndex === -1)
             return;
         const targetLine = this._getLineElement(targetLineIndex);
         if (!targetLine)
             return;
-        // Only scroll snappily when lines are essentially back-to-back.
-        // If there is any noticeable gap between them, scroll slower.
-        let scrollDuration;
-        const prevPrimaryIndex = AmLyrics.getLineIndexFromElement(this.currentPrimaryActiveLine);
-        if (prevPrimaryIndex !== null &&
-            targetLineIndex > prevPrimaryIndex &&
-            this.lyrics) {
-            const gap = this.lyrics[targetLineIndex].timestamp -
-                this.lyrics[prevPrimaryIndex].endtime;
-            if (gap > 200) {
-                scrollDuration = Math.min(Math.max(gap * 0.85, SCROLL_ANIMATION_DURATION_MS), 4000);
+        // Unblur the upcoming target line early (pre-active) so background
+        // vocals start their max-height/opacity transition in sync with scroll.
+        if (!targetLine.classList.contains('active')) {
+            targetLine.classList.add('pre-active');
+            if (!this.preActiveLineElements.includes(targetLine)) {
+                this.preActiveLineElements.push(targetLine);
             }
         }
+        const scrollDuration = scrollLookAheadMs;
         this.focusLine(targetLine, forceScroll, scrollDuration);
     }
     _getTextWidth(text, font) {
@@ -2112,6 +2238,7 @@ let AmLyrics$1 = class AmLyrics extends i {
             return;
         this.lineElementCache.clear();
         this.gapElementCache.clear();
+        this.cachedLineArray = [];
         if (!this.lyrics)
             return;
         for (let i = 0; i < this.lyrics.length; i += 1) {
@@ -2119,9 +2246,16 @@ let AmLyrics$1 = class AmLyrics extends i {
             if (lineEl)
                 this.lineElementCache.set(i, lineEl);
             const gapEl = this.lyricsContainer.querySelector(`#gap-${i}`);
-            if (gapEl)
+            if (gapEl) {
+                // Cache numeric timing values to avoid parseFloat on every frame
+                gapEl._cachedStartTime = parseFloat(gapEl.getAttribute('data-start-time') || '0');
+                gapEl._cachedEndTime = parseFloat(gapEl.getAttribute('data-end-time') || '0');
                 this.gapElementCache.set(i, gapEl);
+            }
         }
+        // Rebuild cached line array for scroll/position queries
+        const lineElements = this.lyricsContainer.querySelectorAll('.lyrics-line');
+        this.cachedLineArray = Array.from(lineElements);
     }
     _getLineElement(index) {
         const cached = this.lineElementCache.get(index);
@@ -2151,9 +2285,13 @@ let AmLyrics$1 = class AmLyrics extends i {
         this.cachedLineData = null;
         this.lineElementCache.clear();
         this.gapElementCache.clear();
+        this.cachedLineArray = [];
+        this.cachedScrollPaddingTop = null;
         this.preActiveLineElements = [];
         this.positionedLineElements = [];
         this.activeGapLineElements = [];
+        this.visibilityObserver?.disconnect();
+        this.visibilityObserver = undefined;
     }
     _updateCachedIsUnsynced() {
         this.cachedIsUnsynced =
@@ -2186,6 +2324,7 @@ let AmLyrics$1 = class AmLyrics extends i {
             }
             const groupGrowable = new Array(wordGroups.length).fill(false);
             const groupGlowing = new Array(wordGroups.length).fill(false);
+            const groupCharRise = new Array(wordGroups.length).fill(false);
             const vwFullText = new Array(wordGroups.length).fill('');
             const vwFullDuration = new Array(wordGroups.length).fill(0);
             const vwCharOffset = new Array(wordGroups.length).fill(0);
@@ -2230,10 +2369,12 @@ let AmLyrics$1 = class AmLyrics extends i {
                 }
                 const isLineSynced = line.isWordSynced === false || line.text.some(s => s.lineSynced);
                 const isGlowingVW = isGrowableVW && !isLineSynced;
+                const isCharRiseVW = !isGrowableVW && !isLineSynced && !isCJK && !isRTL && wordLen >= 8;
                 let charOff = 0;
                 for (let gi = vwStart; gi <= vwEnd; gi += 1) {
                     groupGrowable[gi] = isGrowableVW;
                     groupGlowing[gi] = isGlowingVW;
+                    groupCharRise[gi] = isCharRiseVW;
                     vwFullText[gi] = combinedText;
                     vwFullDuration[gi] = combinedDuration;
                     vwCharOffset[gi] = charOff;
@@ -2248,6 +2389,7 @@ let AmLyrics$1 = class AmLyrics extends i {
                 wordGroups,
                 groupGrowable,
                 groupGlowing,
+                groupCharRise,
                 vwFullText,
                 vwFullDuration,
                 vwCharOffset,
@@ -2268,10 +2410,10 @@ let AmLyrics$1 = class AmLyrics extends i {
         const computedStyle = getComputedStyle(referenceSyllable);
         const { font } = computedStyle; // Full font string
         const fontSize = parseFloat(computedStyle.fontSize);
-        const growableWords = this.shadowRoot.querySelectorAll('.lyrics-word.growable');
-        if (!growableWords)
+        const charTimedWords = this.shadowRoot.querySelectorAll('.lyrics-word.growable, .lyrics-word.char-rise');
+        if (!charTimedWords)
             return;
-        growableWords.forEach((wordSpan) => {
+        charTimedWords.forEach((wordSpan) => {
             const syllableWraps = wordSpan.querySelectorAll('.lyrics-syllable-wrap');
             // Flatten syllables
             const syllables = [];
@@ -2354,21 +2496,88 @@ let AmLyrics$1 = class AmLyrics extends i {
         let candidateIndex = Math.max(groupStart, groupEnd - 2);
         const currentPrimaryIndex = AmLyrics.getLineIndexFromElement(this.currentPrimaryActiveLine);
         if (currentPrimaryIndex !== null &&
-            activeIndices.includes(currentPrimaryIndex) &&
-            candidateIndex < currentPrimaryIndex) {
-            candidateIndex = currentPrimaryIndex;
+            activeIndices.includes(currentPrimaryIndex)) {
+            if (activeIndices.length <= 3) {
+                candidateIndex = currentPrimaryIndex;
+            }
+            else if (candidateIndex < currentPrimaryIndex) {
+                candidateIndex = currentPrimaryIndex;
+            }
         }
         return candidateIndex;
     }
-    focusLine(lineElement, forceScroll = false, scrollDuration = undefined, skipScroll = false) {
+    getPrimaryScrollLineIndex(_activeIndices, time) {
+        if (!this.lyrics || this.lyrics.length === 0)
+            return null;
+        // YouLyPlus-style: primary is simply the line at predictive time.
+        const primaryIndex = this.getLineIndexAtTime(time, this.lastActiveIndex);
+        if (primaryIndex === -1)
+            return null;
+        // Guard: if new primary is ahead of current but they share the same
+        // end time, keep current to prevent bounce during overlaps.
+        const currentPrimaryIndex = AmLyrics.getLineIndexFromElement(this.currentPrimaryActiveLine);
+        if (currentPrimaryIndex !== null &&
+            primaryIndex > currentPrimaryIndex &&
+            this.lyrics[currentPrimaryIndex] &&
+            this.lyrics[primaryIndex] &&
+            this.lyrics[currentPrimaryIndex].endtime ===
+                this.lyrics[primaryIndex].endtime) {
+            const activeCount = this.findActiveLineIndices(time).length;
+            if (activeCount <= 3) {
+                return currentPrimaryIndex;
+            }
+        }
+        return primaryIndex;
+    }
+    getOverlapClusterForActiveIndices(activeIndices, time) {
+        if (!this.lyrics || activeIndices.length === 0)
+            return null;
+        let start = activeIndices[0];
+        while (start > 0 &&
+            this.lyrics[start - 1].endtime >= this.lyrics[start].timestamp) {
+            start -= 1;
+        }
+        let end = start;
+        let clusterEndTime = this.lyrics[start].endtime;
+        while (end + 1 < this.lyrics.length &&
+            this.lyrics[end + 1].timestamp <= clusterEndTime) {
+            end += 1;
+            clusterEndTime = Math.max(clusterEndTime, this.lyrics[end].endtime);
+        }
+        let startedEnd = start;
+        let startedEndTime = this.lyrics[start].endtime;
+        for (let i = start; i <= end; i += 1) {
+            if (this.lyrics[i].timestamp <= time) {
+                startedEnd = i;
+                startedEndTime = Math.max(startedEndTime, this.lyrics[i].endtime);
+            }
+            else {
+                break;
+            }
+        }
+        return { start, end, startedEnd, startedEndTime };
+    }
+    focusLine(lineElement, forceScroll = false, scrollDuration = undefined, skipScroll = false, preservePrimary = false) {
         const primaryChanged = lineElement !== this.currentPrimaryActiveLine;
-        if (primaryChanged) {
+        if (primaryChanged && !preservePrimary) {
+            // .active is now managed solely by findActiveLineIndices (which uses
+            // effectiveEndTimes).  Lines stay active until their extended end,
+            // so we no longer need to remove .active here.
             this.lastPrimaryActiveLine = this.currentPrimaryActiveLine;
             this.currentPrimaryActiveLine = lineElement;
+            const lineIndex = AmLyrics.getLineIndexFromElement(lineElement);
+            if (lineIndex !== null) {
+                this.lastActiveIndex = lineIndex;
+            }
+        }
+        // Only update blur/opacity position classes when the primary line
+        // actually changes (or on force scroll). Running this every tick
+        // causes visual churn and upward glitches.
+        if (primaryChanged || forceScroll) {
+            this.updatePositionClasses(lineElement);
         }
-        this.updatePositionClasses(lineElement);
         if (!skipScroll &&
-            (forceScroll || primaryChanged) &&
+            (forceScroll || primaryChanged || preservePrimary) &&
             this.autoScroll &&
             !this.isUserScrolling &&
             !this.isClickSeeking) {
@@ -2391,6 +2600,7 @@ let AmLyrics$1 = class AmLyrics extends i {
         }
         // Mark that user is currently scrolling
         this.setUserScrolling(true);
+        this.clearPastLineHighlights();
         // Clear any existing timeout
         if (this.userScrollTimeoutId) {
             clearTimeout(this.userScrollTimeoutId);
@@ -2401,29 +2611,75 @@ let AmLyrics$1 = class AmLyrics extends i {
             this.userScrollTimeoutId = undefined;
             // Optionally scroll back to current active line when re-enabling auto-scroll
             if (this.activeLineIndices.length > 0) {
-                this.scrollToActiveLine();
+                this._handleActiveLineScroll([], false);
             }
         }, 2000);
     }
+    clearPastLineHighlights() {
+        if (!this.lyricsContainer)
+            return;
+        const lineElements = this.cachedLineArray.length
+            ? this.cachedLineArray
+            : Array.from(this.lyricsContainer.querySelectorAll('.lyrics-line:not(.lyrics-gap)'));
+        const containerRect = this.lyricsContainer.getBoundingClientRect();
+        const anchorY = containerRect.top + this.getScrollPaddingTop();
+        for (let i = 0; i < lineElements.length; i += 1) {
+            const lineElement = lineElements[i];
+            const isActive = lineElement.classList.contains('active');
+            const lineRect = lineElement.getBoundingClientRect();
+            const hasScrolledPast = lineRect.bottom < anchorY - 2;
+            if (!isActive && hasScrolledPast) {
+                AmLyrics.unfinishSyllables(lineElement);
+            }
+        }
+    }
+    /**
+     * Find the first (lowest-index) line whose raw time range contains `timeMs`.
+     * Uses a stable forward scan so overlapping ranges always return the same
+     * line, preventing primary-target jitter that causes scroll glitches.
+     */
+    getLineIndexAtTime(timeMs, startHintIndex = 0) {
+        if (!this.lyrics || this.lyrics.length === 0)
+            return -1;
+        const len = this.lyrics.length;
+        // 1. Check hint and immediate neighbours first (fast path)
+        const hint = Math.max(0, Math.min(startHintIndex, len - 1));
+        for (let i = hint; i < len; i += 1) {
+            const line = this.lyrics[i];
+            if (line.timestamp > timeMs)
+                break;
+            if (timeMs >= line.timestamp && timeMs < line.endtime) {
+                return i;
+            }
+        }
+        for (let i = hint - 1; i >= 0; i -= 1) {
+            const line = this.lyrics[i];
+            if (timeMs >= line.timestamp && timeMs < line.endtime) {
+                return i;
+            }
+            if (line.endtime < timeMs)
+                break;
+        }
+        // 2. Full forward scan — guaranteed deterministic for overlaps
+        for (let i = 0; i < len; i += 1) {
+            const line = this.lyrics[i];
+            if (line.timestamp > timeMs)
+                break;
+            if (timeMs >= line.timestamp && timeMs < line.endtime) {
+                return i;
+            }
+        }
+        return -1;
+    }
     findActiveLineIndices(time) {
         if (!this.lyrics || this.lyrics.length === 0)
             return [];
         const activeLines = [];
         for (let i = 0; i < this.lyrics.length; i += 1) {
             const line = this.lyrics[i];
-            let effectiveEndTime = line.endtime;
-            if (i < this.lyrics.length - 1) {
-                const nextLineStart = this.lyrics[i + 1].timestamp;
-                const gapDuration = nextLineStart - line.endtime;
-                if (gapDuration < INSTRUMENTAL_THRESHOLD_MS) {
-                    if (effectiveEndTime < nextLineStart) {
-                        effectiveEndTime = Math.max(effectiveEndTime, nextLineStart - 500);
-                    }
-                }
-            }
             if (line.timestamp > time)
                 break;
-            if (time >= line.timestamp && time <= effectiveEndTime) {
+            if (time >= line.timestamp && time < line.endtime) {
                 activeLines.push(i);
             }
         }
@@ -2633,10 +2889,6 @@ let AmLyrics$1 = class AmLyrics extends i {
             this.scrollAnimationState.pendingUpdate = null;
         }
         // Clear scroll animation timeouts
-        if (this.scrollUnlockTimeout) {
-            clearTimeout(this.scrollUnlockTimeout);
-            this.scrollUnlockTimeout = undefined;
-        }
         if (this.scrollAnimationTimeout) {
             clearTimeout(this.scrollAnimationTimeout);
             this.scrollAnimationTimeout = undefined;
@@ -2731,6 +2983,7 @@ let AmLyrics$1 = class AmLyrics extends i {
             const paddingTop = this.getScrollPaddingTop();
             const targetTranslateY = paddingTop - gapTarget.offsetTop;
             this.isProgrammaticScroll = true;
+            this.clearPastLineHighlights();
             this.animateScrollYouLy(targetTranslateY, false);
             setTimeout(() => {
                 this.isProgrammaticScroll = false;
@@ -2742,14 +2995,22 @@ let AmLyrics$1 = class AmLyrics extends i {
      * Get the scroll padding top value from CSS variable
      */
     getScrollPaddingTop() {
+        if (this.cachedScrollPaddingTop !== null)
+            return this.cachedScrollPaddingTop;
         if (!this.lyricsContainer)
             return 0;
         const style = getComputedStyle(this);
         const paddingTopValue = style.getPropertyValue('--lyrics-scroll-padding-top') || '25%';
+        let result;
         if (paddingTopValue.includes('%')) {
-            return (this.lyricsContainer.clientHeight * (parseFloat(paddingTopValue) / 100));
+            result =
+                this.lyricsContainer.clientHeight * (parseFloat(paddingTopValue) / 100);
         }
-        return parseFloat(paddingTopValue) || 0;
+        else {
+            result = parseFloat(paddingTopValue) || 0;
+        }
+        this.cachedScrollPaddingTop = result;
+        return result;
     }
     /**
      * Animate scroll with staggered delay for smooth YouLyPlus-style scrolling
@@ -2758,6 +3019,7 @@ let AmLyrics$1 = class AmLyrics extends i {
         if (!this.lyricsContainer)
             return;
         const parent = this.lyricsContainer;
+        const targetTop = Math.max(0, -newTranslateY);
         if (!this.scrollAnimationState) {
             this.scrollAnimationState = {
                 isAnimating: false,
@@ -2767,19 +3029,25 @@ let AmLyrics$1 = class AmLyrics extends i {
         }
         const animState = this.scrollAnimationState;
         if (animState.isAnimating && !forceScroll) {
+            const pendingTop = animState.pendingUpdate === null
+                ? null
+                : Math.max(0, -animState.pendingUpdate);
+            if (Math.abs(parent.scrollTop - targetTop) < 2 ||
+                (pendingTop !== null && Math.abs(pendingTop - targetTop) < 2)) {
+                return;
+            }
             animState.pendingUpdate = newTranslateY;
             return;
         }
-        if (this.scrollUnlockTimeout) {
-            clearTimeout(this.scrollUnlockTimeout);
-            this.scrollUnlockTimeout = undefined;
-        }
         if (this.scrollAnimationTimeout) {
             clearTimeout(this.scrollAnimationTimeout);
             this.scrollAnimationTimeout = undefined;
         }
+        if (this.scrollUnlockTimeout) {
+            clearTimeout(this.scrollUnlockTimeout);
+            this.scrollUnlockTimeout = undefined;
+        }
         const { animatingLines } = this;
-        const targetTop = Math.max(0, -newTranslateY);
         const appliedTranslateY = -targetTop;
         const prevOffset = -parent.scrollTop;
         const delta = prevOffset - appliedTranslateY;
@@ -2794,7 +3062,6 @@ let AmLyrics$1 = class AmLyrics extends i {
             // Clean up any lingering scroll animations before smooth scroll
             for (const line of animatingLines) {
                 line.classList.remove('scroll-animate');
-                line.style.removeProperty('will-change');
                 line.style.removeProperty('--scroll-delta');
                 line.style.removeProperty('--lyrics-line-delay');
                 line.style.removeProperty('--scroll-duration');
@@ -2805,14 +3072,21 @@ let AmLyrics$1 = class AmLyrics extends i {
             animState.pendingUpdate = null;
             return;
         }
-        // --- Step 1: Remove scroll-animate from ALL previously animating lines ---
+        // --- Step 1: Remove scroll-animate and custom properties from ALL
+        // previously animating lines so stale deltas don't interfere. ---
         for (const line of animatingLines) {
             line.classList.remove('scroll-animate');
+            line.style.removeProperty('--scroll-delta');
+            line.style.removeProperty('--lyrics-line-delay');
+            line.style.removeProperty('--scroll-duration');
         }
         animatingLines.length = 0;
-        // Get lines for staggered animation
-        const lineElements = this.lyricsContainer.querySelectorAll('.lyrics-line');
-        const lineArray = Array.from(lineElements);
+        // Get lines for staggered animation — use cached array
+        if (this.cachedLineArray.length === 0) {
+            const lineElements = this.lyricsContainer.querySelectorAll('.lyrics-line');
+            this.cachedLineArray = Array.from(lineElements);
+        }
+        const lineArray = this.cachedLineArray;
         const referenceLine = this.currentPrimaryActiveLine ||
             this.lastPrimaryActiveLine ||
             lineArray[0];
@@ -2821,43 +3095,64 @@ let AmLyrics$1 = class AmLyrics extends i {
         const referenceIndex = lineArray.indexOf(referenceLine);
         if (referenceIndex === -1)
             return;
-        const delayIncrement = SCROLL_DELAY_INCREMENT_MS;
-        const lookBehind = 10;
-        const lookAhead = 15;
+        const duration = Math.min(450, scrollDuration ?? SCROLL_ANIMATION_DURATION_MS);
+        const delayIncrement = duration * 0.1;
+        const lookAhead = 20;
         const len = lineArray.length;
-        const start = Math.max(0, referenceIndex - lookBehind);
+        const start = Math.max(0, referenceIndex - lookAhead);
         const end = Math.min(len, referenceIndex + lookAhead);
         let maxAnimationDuration = 0;
-        let delayCounter = 0;
-        // --- Step 2: Set CSS custom properties on target lines ---
         const newAnimatingLines = [];
-        for (let i = start; i < end; i += 1) {
-            const line = lineArray[i];
-            if (i >= referenceIndex)
-                delayCounter += 1;
-            const delay = i >= referenceIndex ? (delayCounter - 1) * delayIncrement : 0;
-            const duration = scrollDuration ?? SCROLL_ANIMATION_DURATION_MS;
-            line.style.setProperty('--scroll-delta', `${delta}px`);
-            line.style.setProperty('--lyrics-line-delay', `${delay}ms`);
-            line.style.setProperty('--scroll-duration', `${duration}ms`);
-            newAnimatingLines.push(line);
-            const lineDuration = duration + delay;
-            if (lineDuration > maxAnimationDuration) {
-                maxAnimationDuration = lineDuration;
+        const scrollingDown = delta >= 0;
+        if (scrollingDown) {
+            let delayCounter = 0;
+            for (let i = start; i < end; i += 1) {
+                const line = lineArray[i];
+                const delay = i >= referenceIndex ? delayCounter * delayIncrement : 0;
+                if (i >= referenceIndex && !line.classList.contains('lyrics-gap')) {
+                    delayCounter += 1;
+                }
+                line.style.setProperty('--scroll-delta', `${delta}px`);
+                line.style.setProperty('--lyrics-line-delay', `${delay}ms`);
+                line.style.setProperty('--scroll-duration', `${duration + 100}ms`);
+                newAnimatingLines.push(line);
+                const lineDuration = duration + delay;
+                if (lineDuration > maxAnimationDuration) {
+                    maxAnimationDuration = lineDuration;
+                }
+            }
+        }
+        else {
+            let delayCounter = 0;
+            for (let i = end - 1; i >= start; i -= 1) {
+                const line = lineArray[i];
+                const delay = i <= referenceIndex ? delayCounter * delayIncrement : 0;
+                if (i <= referenceIndex && !line.classList.contains('lyrics-gap')) {
+                    delayCounter += 1;
+                }
+                line.style.setProperty('--scroll-delta', `${delta}px`);
+                line.style.setProperty('--lyrics-line-delay', `${delay}ms`);
+                line.style.setProperty('--scroll-duration', `${duration + 100}ms`);
+                newAnimatingLines.push(line);
+                const lineDuration = duration + delay;
+                if (lineDuration > maxAnimationDuration) {
+                    maxAnimationDuration = lineDuration;
+                }
             }
         }
         // --- Step 3: Force reflow so the browser sees the class removal ---
-        // This guarantees the animation restarts reliably, unlike the
-        // CSS-variable-toggle approach which doesn't restart in all browsers.
-        parent.getBoundingClientRect(); // force synchronous reflow
+        // Use offsetHeight which is cheaper than getBoundingClientRect
+        // eslint-disable-next-line no-void
+        void parent.offsetHeight;
         // --- Step 4: Re-add scroll-animate class to start fresh animations ---
         for (const line of newAnimatingLines) {
             line.classList.add('scroll-animate');
-            line.style.willChange = 'transform';
             animatingLines.push(line);
         }
         animState.isAnimating = true;
-        const BASE_DURATION = scrollDuration ?? SCROLL_ANIMATION_DURATION_MS;
+        // YouLyPlus-style early unlock: allow new scrolls to start after a
+        // short base duration, even if CSS animations are still running.
+        const BASE_DURATION = 400;
         this.scrollUnlockTimeout = setTimeout(() => {
             animState.isAnimating = false;
             if (animState.pendingUpdate !== null) {
@@ -2870,7 +3165,6 @@ let AmLyrics$1 = class AmLyrics extends i {
             for (let i = 0; i < animatingLines.length; i += 1) {
                 const line = animatingLines[i];
                 line.classList.remove('scroll-animate');
-                line.style.removeProperty('will-change');
                 line.style.removeProperty('--scroll-delta');
                 line.style.removeProperty('--lyrics-line-delay');
                 line.style.removeProperty('--scroll-duration');
@@ -2907,8 +3201,13 @@ let AmLyrics$1 = class AmLyrics extends i {
         // Add new position classes
         lineToScroll.classList.add('lyrics-activest');
         this.positionedLineElements.push(lineToScroll);
-        const lineElements = Array.from(this.lyricsContainer.querySelectorAll('.lyrics-line'));
+        if (this.cachedLineArray.length === 0) {
+            this.cachedLineArray = Array.from(this.lyricsContainer.querySelectorAll('.lyrics-line'));
+        }
+        const lineElements = this.cachedLineArray;
         const scrollLineIndex = lineElements.indexOf(lineToScroll);
+        if (scrollLineIndex === -1)
+            return;
         for (let i = Math.max(0, scrollLineIndex - 4); i <= Math.min(lineElements.length - 1, scrollLineIndex + 4); i += 1) {
             const position = i - scrollLineIndex;
             if (position !== 0) {
@@ -2957,6 +3256,7 @@ let AmLyrics$1 = class AmLyrics extends i {
             clearTimeout(this.userScrollTimeoutId);
             this.userScrollTimeoutId = undefined;
         }
+        this.clearPastLineHighlights();
         const duration = scrollDuration ?? SCROLL_ANIMATION_DURATION_MS;
         setTimeout(() => {
             this.isProgrammaticScroll = false;
@@ -2978,6 +3278,7 @@ let AmLyrics$1 = class AmLyrics extends i {
             ? Array.from(wordElement.querySelectorAll('span.char'))
             : [];
         const isGrowable = wordElement?.classList.contains('growable');
+        const isCharRise = wordElement?.classList.contains('char-rise');
         const isFirstSyllable = syllable.getAttribute('data-syllable-index') === '0';
         const isFirstInContainer = isFirstSyllable; // Simplified
         const isGap = syllable.closest('.lyrics-gap') !== null;
@@ -3024,6 +3325,16 @@ let AmLyrics$1 = class AmLyrics extends i {
                 });
             });
         }
+        if (isCharRise && isFirstSyllable && allWordCharSpans.length > 0) {
+            const finalDuration = Math.max(wordDurationMs, syllableDurationMs);
+            const baseDelayPerChar = finalDuration * 0.09;
+            const riseDurationMs = finalDuration * 1.5;
+            allWordCharSpans.forEach(span => {
+                const charIndex = parseFloat(span.dataset.syllableCharIndex || '0');
+                const riseDelay = baseDelayPerChar * charIndex;
+                charAnimationsMap.set(span, `rise-char ${riseDurationMs}ms ease-in-out ${riseDelay}ms forwards`);
+            });
+        }
         // Step 2: Wipe Pass
         if (charSpans.length > 0) {
             charSpans.forEach((span, charIndex) => {
@@ -3041,7 +3352,9 @@ let AmLyrics$1 = class AmLyrics extends i {
                 }
                 const existingAnimation = charAnimationsMap.get(span) || span.style.animation || '';
                 const animationParts = [];
-                if (existingAnimation && existingAnimation.includes('grow-dynamic')) {
+                if (existingAnimation &&
+                    (existingAnimation.includes('grow-dynamic') ||
+                        existingAnimation.includes('rise-char'))) {
                     animationParts.push(existingAnimation.split(',')[0].trim());
                 }
                 if (charIndex > 0) {
@@ -3107,36 +3420,119 @@ let AmLyrics$1 = class AmLyrics extends i {
         // eslint-disable-next-line no-param-reassign
         syllable.style.backgroundColor = 'var(--lyplus-text-secondary)';
         // Reset character animations — disable transition so finished chars don't slowly fade
-        syllable.querySelectorAll('span.char').forEach(span => {
-            const el = span;
+        const charSpans = syllable.querySelectorAll('span.char');
+        for (let i = 0; i < charSpans.length; i += 1) {
+            const el = charSpans[i];
             el.style.animation = '';
-            el.style.willChange = '';
             el.style.transition = 'none';
             el.style.backgroundColor = 'var(--lyplus-text-secondary)';
-        });
+        }
         // Immediately remove all state classes
         syllable.classList.remove('highlight', 'finished', 'pre-highlight', 'cleanup');
-        // In next frame, clear inline styles so CSS transitions can resume for future use
-        requestAnimationFrame(() => {
-            syllable.style.removeProperty('background-color');
-            syllable.style.removeProperty('transition');
-            syllable.querySelectorAll('span.char').forEach(span => {
-                const el = span;
-                el.style.removeProperty('background-color');
-                el.style.removeProperty('transition');
-                el.style.removeProperty('will-change');
-            });
-        });
     }
     /**
-     * Reset all syllables in a line
+     * Reset all syllables in a line — batches deferred cleanup into a single rAF
      */
     static resetSyllables(line) {
         if (!line)
             return;
+        line.classList.remove('persist-highlight');
         // eslint-disable-next-line no-param-reassign
         line._cachedSyllableElements = null;
-        Array.from(line.getElementsByClassName('lyrics-syllable')).forEach(syllable => AmLyrics.resetSyllable(syllable));
+        const syllables = line.getElementsByClassName('lyrics-syllable');
+        for (let i = 0; i < syllables.length; i += 1) {
+            AmLyrics.resetSyllable(syllables[i]);
+        }
+        // Batch deferred style cleanup into a single rAF for all syllables in the line
+        requestAnimationFrame(() => {
+            for (let i = 0; i < syllables.length; i += 1) {
+                const syllable = syllables[i];
+                syllable.style.removeProperty('background-color');
+                syllable.style.removeProperty('transition');
+                const chars = syllable.querySelectorAll('span.char');
+                for (let j = 0; j < chars.length; j += 1) {
+                    const el = chars[j];
+                    el.style.removeProperty('background-color');
+                    el.style.removeProperty('transition');
+                    el.style.removeProperty('will-change');
+                }
+            }
+        });
+    }
+    /**
+     * Gentle reset for normal playback: remove highlight/finished classes
+     * without forcing inline styles. Lets CSS transition fade syllables
+     * back to secondary colour smoothly.
+     */
+    static unfinishSyllables(line) {
+        if (!line)
+            return;
+        line.classList.remove('persist-highlight');
+        const syllables = line.getElementsByClassName('lyrics-syllable');
+        for (let i = 0; i < syllables.length; i += 1) {
+            const s = syllables[i];
+            s.classList.remove('highlight', 'finished', 'pre-highlight', 'cleanup');
+            s.style.animation = '';
+            s.style.removeProperty('--pre-wipe-duration');
+            s.style.removeProperty('--pre-wipe-delay');
+            s.style.removeProperty('background-color');
+            s.style.removeProperty('transition');
+            const chars = s.querySelectorAll('span.char');
+            for (let j = 0; j < chars.length; j += 1) {
+                const el = chars[j];
+                el.style.animation = '';
+                el.style.removeProperty('will-change');
+                el.style.removeProperty('background-color');
+                el.style.removeProperty('transition');
+                el.style.removeProperty('filter');
+            }
+        }
+    }
+    static finishSyllablesUpToTime(line, currentTimeMs) {
+        if (!line)
+            return;
+        let hasFinishedSyllable = false;
+        let syllables = line._cachedSyllableElements;
+        if (!syllables) {
+            syllables = Array.from(line.querySelectorAll('.lyrics-syllable'));
+            for (let i = 0; i < syllables.length; i += 1) {
+                const syllable = syllables[i];
+                syllable._cachedStartTime = parseFloat(syllable.getAttribute('data-start-time') || '0');
+                syllable._cachedEndTime = parseFloat(syllable.getAttribute('data-end-time') || '0');
+            }
+            // eslint-disable-next-line no-param-reassign
+            line._cachedSyllableElements = syllables;
+        }
+        for (let i = 0; i < syllables.length; i += 1) {
+            const syllable = syllables[i];
+            const startTime = syllable._cachedStartTime;
+            if (Number.isFinite(startTime) && currentTimeMs >= startTime) {
+                const { classList } = syllable;
+                if (!classList.contains('finished')) {
+                    if (!classList.contains('highlight')) {
+                        AmLyrics.updateSyllableAnimation(syllable, Math.max(0, currentTimeMs - startTime));
+                    }
+                    classList.add('finished');
+                }
+                hasFinishedSyllable = true;
+                classList.remove('highlight');
+                classList.remove('pre-highlight');
+                classList.add('cleanup');
+                syllable.style.animation = '';
+                syllable.style.removeProperty('--pre-wipe-duration');
+                syllable.style.removeProperty('--pre-wipe-delay');
+                const chars = syllable.querySelectorAll('span.char');
+                for (let ci = 0; ci < chars.length; ci += 1) {
+                    chars[ci].style.animation = '';
+                }
+            }
+        }
+        if (hasFinishedSyllable) {
+            line.classList.add('persist-highlight');
+        }
+        else {
+            line.classList.remove('persist-highlight');
+        }
     }
     /**
      * Update syllables based on current time
@@ -3147,13 +3543,18 @@ let AmLyrics$1 = class AmLyrics extends i {
         let syllables = line._cachedSyllableElements;
         if (!syllables) {
             syllables = Array.from(line.querySelectorAll('.lyrics-syllable'));
+            for (let i = 0; i < syllables.length; i += 1) {
+                const syllable = syllables[i];
+                syllable._cachedStartTime = parseFloat(syllable.getAttribute('data-start-time') || '0');
+                syllable._cachedEndTime = parseFloat(syllable.getAttribute('data-end-time') || '0');
+            }
             // eslint-disable-next-line no-param-reassign
             line._cachedSyllableElements = syllables;
         }
         for (let i = 0; i < syllables.length; i += 1) {
             const syllable = syllables[i];
-            const startTime = parseFloat(syllable.getAttribute('data-start-time') || '0');
-            const endTime = parseFloat(syllable.getAttribute('data-end-time') || '0');
+            const startTime = syllable._cachedStartTime;
+            const endTime = syllable._cachedEndTime;
             if (Number.isFinite(startTime) && Number.isFinite(endTime)) {
                 const { classList } = syllable;
                 const hasHighlight = classList.contains('highlight');
@@ -3191,6 +3592,7 @@ let AmLyrics$1 = class AmLyrics extends i {
                                     AmLyrics.updateSyllableAnimation(syllable, currentTimeMs - startTime);
                                 }
                                 classList.add('finished');
+                                // Keep the completed wipe state until user scroll resets it.
                             }
                         }
                         else if (hasHighlight || hasFinished) {
@@ -3473,7 +3875,8 @@ let AmLyrics$1 = class AmLyrics extends i {
                 // Create background vocals container (with romanization support)
                 const backgroundVocalElement = hasBackground
                     ? b `<p class="background-vocal-container">
-              ${line.backgroundText.map((syllable, syllableIndex) => {
+              <span class="background-vocal-wrap">
+                ${line.backgroundText.map((syllable, syllableIndex) => {
                         const startTimeMs = syllable.timestamp;
                         const endTimeMs = syllable.endtime;
                         const durationMs = endTimeMs - startTimeMs;
@@ -3481,36 +3884,37 @@ let AmLyrics$1 = class AmLyrics extends i {
                             syllable.romanizedText &&
                             syllable.romanizedText.trim() !== syllable.text.trim()
                             ? b `<span
-                        class="lyrics-syllable transliteration no-chars ${syllable.lineSynced
+                          class="lyrics-syllable transliteration no-chars ${syllable.lineSynced
                                 ? 'line-synced'
                                 : ''}"
-                        data-start-time="${startTimeMs}"
-                        data-end-time="${endTimeMs}"
-                        data-duration="${durationMs}"
-                        data-syllable-index="0"
-                        data-wipe-ratio="1"
-                        >${syllable.romanizedText}</span
-                      >`
+                          data-start-time="${startTimeMs}"
+                          data-end-time="${endTimeMs}"
+                          data-duration="${durationMs}"
+                          data-syllable-index="0"
+                          data-wipe-ratio="1"
+                          >${syllable.romanizedText}</span
+                        >`
                             : '';
                         return b `<span class="lyrics-word"
-                  ><span
-                    class="lyrics-syllable-wrap${bgRomanizedText
+                    ><span
+                      class="lyrics-syllable-wrap${bgRomanizedText
                             ? ' has-transliteration'
                             : ''}"
-                    ><span
-                      class="lyrics-syllable no-chars${syllable.lineSynced
+                      ><span
+                        class="lyrics-syllable no-chars${syllable.lineSynced
                             ? ' line-synced'
                             : ''}"
-                      data-start-time="${startTimeMs}"
-                      data-end-time="${endTimeMs}"
-                      data-duration="${durationMs}"
-                      data-syllable-index="${syllableIndex}"
-                      data-wipe-ratio="1"
-                      >${syllable.text}</span
-                    >${bgRomanizedText}</span
-                  ></span
-                >`;
+                        data-start-time="${startTimeMs}"
+                        data-end-time="${endTimeMs}"
+                        data-duration="${durationMs}"
+                        data-syllable-index="${syllableIndex}"
+                        data-wipe-ratio="1"
+                        >${syllable.text}</span
+                      >${bgRomanizedText}</span
+                    ></span
+                  >`;
                     })}
+              </span>
             </p>`
                     : '';
                 // Background vocals share the same line.translation and line.romanizedText
@@ -3524,6 +3928,7 @@ let AmLyrics$1 = class AmLyrics extends i {
                 const wordGroups = lineData?.wordGroups ?? [];
                 const groupGrowable = lineData?.groupGrowable ?? [];
                 const groupGlowing = lineData?.groupGlowing ?? [];
+                const groupCharRise = lineData?.groupCharRise ?? [];
                 const vwFullText = lineData?.vwFullText ?? [];
                 const vwFullDuration = lineData?.vwFullDuration ?? [];
                 const vwCharOffset = lineData?.vwCharOffset ?? [];
@@ -3535,11 +3940,17 @@ let AmLyrics$1 = class AmLyrics extends i {
           ${wordGroups.map((group, groupIdx) => {
                     const isGrowable = groupGrowable[groupIdx];
                     const isGlowing = groupGlowing[groupIdx];
+                    const isCharRise = groupCharRise[groupIdx];
+                    const isAnimatedByChar = isGrowable || isCharRise;
                     const groupLineSynced = group.some(s => s.lineSynced);
-                    const wordText = isGrowable ? vwFullText[groupIdx] : '';
-                    const wordDuration = isGrowable ? vwFullDuration[groupIdx] : 0;
+                    const wordText = isAnimatedByChar ? vwFullText[groupIdx] : '';
+                    const wordDuration = isAnimatedByChar
+                        ? vwFullDuration[groupIdx]
+                        : 0;
                     const wordNumChars = wordText.length;
-                    const groupCharOffset = isGrowable ? vwCharOffset[groupIdx] : 0;
+                    const groupCharOffset = isAnimatedByChar
+                        ? vwCharOffset[groupIdx]
+                        : 0;
                     let sylCharAccumulator = 0;
                     const groupText = group.map(s => s.text).join('');
                     const shouldAllowBreak = groupText.trim().length >= 16 ||
@@ -3551,9 +3962,11 @@ let AmLyrics$1 = class AmLyrics extends i {
                     // Base float is 0.8s, plus a portion of the audio duration, capped between 1.0s and 2.5s
                     const riseDuration = Math.max(1.2, Math.min(2.5, 1.2 + (actualDurationMs / 1000) * 0.6));
                     return b `<span
-              class="lyrics-word${isGrowable ? ' growable' : ''}${isGlowing
-                        ? ' glowing'
-                        : ''}${shouldAllowBreak ? ' allow-break' : ''}"
+              class="lyrics-word${isGrowable ? ' growable' : ''}${isCharRise
+                        ? ' char-rise'
+                        : ''}${isGlowing ? ' glowing' : ''}${shouldAllowBreak
+                        ? ' allow-break'
+                        : ''}"
               style="--rise-duration: ${riseDuration}s"
               >${group.map((syllable, sylIdx) => {
                         const startTimeMs = syllable.timestamp;
@@ -3576,7 +3989,7 @@ let AmLyrics$1 = class AmLyrics extends i {
                       >`
                             : '';
                         let syllableContent = text;
-                        if (isGrowable) {
+                        if (isAnimatedByChar) {
                             let charIndexInsideSyllable = 0;
                             const numCharsInSyllable = text.replace(/\s/g, '').length || 1;
                             syllableContent = b `${text.split('').map(char => {
@@ -3656,7 +4069,7 @@ let AmLyrics$1 = class AmLyrics extends i {
                   ><span
                     class="lyrics-syllable${groupLineSynced
                             ? ' line-synced'
-                            : ''}${isGrowable ? ' has-chars' : ' no-chars'}"
+                            : ''}${isAnimatedByChar ? ' has-chars' : ' no-chars'}"
                     data-start-time="${startTimeMs}"
                     data-end-time="${endTimeMs}"
                     data-duration="${durationMs}"
@@ -4018,6 +4431,7 @@ AmLyrics$1.styles = i$3 `
       -webkit-overflow-scrolling: touch;
       box-sizing: border-box;
       scrollbar-width: none;
+      overflow-anchor: none;
     }
 
     .lyrics-container::-webkit-scrollbar {
@@ -4038,9 +4452,16 @@ AmLyrics$1.styles = i$3 `
     }
 
     .lyrics-line.scroll-animate {
-      transition: none !important; /* Prevent conflict with scroll animation */
+      /* Preserve the graceful fade duration; the keyframe handles the
+         transform, so we only need to keep opacity/filter transitions
+         alive without !important overriding the base rule. */
+      transition:
+        opacity 0.7s ease,
+        filter 0.7s ease,
+        transform 0.4s cubic-bezier(0.41, 0, 0.12, 0.99)
+          var(--lyrics-line-delay, 0ms);
       animation-name: lyrics-scroll;
-      animation-duration: var(--scroll-duration, 280ms);
+      animation-duration: var(--scroll-duration, 400ms);
       animation-timing-function: cubic-bezier(0.41, 0, 0.12, 0.99);
       animation-fill-mode: both;
       animation-delay: var(--lyrics-line-delay, 0ms);
@@ -4061,12 +4482,15 @@ AmLyrics$1.styles = i$3 `
       font-size: var(--lyplus-font-size-base);
       cursor: pointer;
       transform-origin: left;
+      /* Graceful 0.7 s fade so the line stays mostly bright while the
+         0.4 s scroll animation runs, then settles into the inactive state. */
       transition:
-        opacity 0.3s ease,
+        opacity 0.7s ease,
         transform 0.4s cubic-bezier(0.41, 0, 0.12, 0.99)
           var(--lyrics-line-delay, 0ms),
-        filter 0.3s ease;
+        filter 0.7s ease;
       content-visibility: auto;
+      contain: layout style;
       text-rendering: optimizeLegibility;
     }
 
@@ -4078,7 +4502,7 @@ AmLyrics$1.styles = i$3 `
     .lyrics-line-container {
       overflow-wrap: break-word;
       transform-origin: left;
-      transform: scale3d(0.93, 0.93, 0.95);
+      transform: translateZ(0);
       transition:
         transform 0.7s ease,
         background-color 0.7s,
@@ -4087,7 +4511,7 @@ AmLyrics$1.styles = i$3 `
 
     .lyrics-line.active .lyrics-line-container,
     .lyrics-line.pre-active .lyrics-line-container {
-      transform: scale3d(1.001, 1.001, 1) translateZ(0);
+      transform: translateZ(0);
       transition:
         transform 0.5s ease,
         background-color 0.18s,
@@ -4101,31 +4525,50 @@ AmLyrics$1.styles = i$3 `
 
     .background-vocal-container {
       max-height: 0;
-      padding-top: 0;
-      transform: translateY(-0.5em) scale(0.95);
       overflow: visible;
       opacity: 0;
       font-size: var(--lyplus-font-size-subtext);
+      line-height: 1.15;
+      color: color-mix(in srgb, var(--lyplus-text-secondary) 80%, transparent);
+      /* Fast exit (0.25 s) so bg vocals collapse quickly and feel snappy.
+         The scroll takes ~0.4 s; finishing the collapse first prevents
+         the container from trailing behind the motion. */
       transition:
-        max-height 450ms cubic-bezier(0.33, 1, 0.68, 1),
-        opacity 400ms ease-out,
-        transform 450ms cubic-bezier(0.33, 1, 0.68, 1),
-        padding 450ms cubic-bezier(0.33, 1, 0.68, 1);
+        max-height 250ms cubic-bezier(0.41, 0, 0.12, 0.99),
+        opacity 250ms cubic-bezier(0.41, 0, 0.12, 0.99);
       margin: 0;
+      pointer-events: none;
     }
 
-    .lyrics-line.active .background-vocal-container,
-    .lyrics-line.pre-active .background-vocal-container {
+    .background-vocal-wrap {
+      display: block;
+      padding-top: 0;
+      padding-bottom: 0;
+      transition: padding-top 250ms cubic-bezier(0.41, 0, 0.12, 0.99);
+    }
+
+    .lyrics-line.singer-right .background-vocal-container,
+    .lyrics-line.rtl-text .background-vocal-container {
+      margin-left: auto;
+      margin-right: 0;
+    }
+
+    /* Background vocals expand only when .bg-expanded is present.
+       This is separate from .active so bg vocals can collapse immediately
+       while .active stays to keep text white until the scroll passes. */
+    .lyrics-line.bg-expanded .background-vocal-container {
       max-height: 4em;
       opacity: 1;
-      padding-top: 0.2em;
-      transform: translateY(0) scale(1);
+      /* Slower entry (0.6 s) so bg vocals expand smoothly. */
       transition:
-        max-height 450ms cubic-bezier(0.22, 1, 0.36, 1),
-        opacity 400ms ease-out,
-        transform 450ms cubic-bezier(0.22, 1, 0.36, 1),
-        padding 450ms cubic-bezier(0.22, 1, 0.36, 1);
-      will-change: max-height, opacity, padding, transform;
+        max-height 0.6s ease,
+        opacity 0.6s ease;
+      will-change: max-height, opacity;
+    }
+
+    .lyrics-line.bg-expanded .background-vocal-wrap {
+      padding-top: 0.26em;
+      transition: padding-top 0.6s ease;
     }
 
     /* --- Line States & Modifiers --- */
@@ -4138,6 +4581,16 @@ AmLyrics$1.styles = i$3 `
       opacity: 1;
     }
 
+    .lyrics-line.persist-highlight {
+      filter: none !important;
+      opacity: 1;
+    }
+
+    .lyrics-line.persist-highlight .lyrics-syllable.finished,
+    .lyrics-line.persist-highlight .lyrics-syllable.finished span.char {
+      transition: none !important;
+    }
+
     .lyrics-line.singer-right {
       text-align: end;
     }
@@ -4202,22 +4655,32 @@ AmLyrics$1.styles = i$3 `
 
     /* --- Blur Effect for Inactive Lines --- */
     .lyrics-container.blur-inactive-enabled:not(.not-focused)
-      .lyrics-line:not(.active):not(.pre-active):not(.lyrics-gap) {
+      .lyrics-line:not(.active):not(.pre-active):not(.lyrics-gap):not(
+        .persist-highlight
+      ) {
       filter: blur(var(--lyplus-blur-amount));
     }
 
+    /* Viewport Virtualization: Strip expensive filters and animations from
+       offscreen lines.  IntersectionObserver toggles this class. */
+    .lyrics-line.far-line {
+      filter: none !important;
+      will-change: auto !important;
+      animation: none !important;
+    }
+
     .lyrics-container.blur-inactive-enabled:not(.not-focused)
       .lyrics-line.post-active-line:not(.lyrics-gap):not(.active):not(
         .pre-active
-      ),
+      ):not(.persist-highlight),
     .lyrics-container.blur-inactive-enabled:not(.not-focused)
       .lyrics-line.next-active-line:not(.lyrics-gap):not(.active):not(
         .pre-active
-      ),
+      ):not(.persist-highlight),
     .lyrics-container.blur-inactive-enabled:not(.not-focused)
       .lyrics-line.lyrics-activest:not(.active):not(.lyrics-gap):not(
         .pre-active
-      ) {
+      ):not(.persist-highlight) {
       filter: blur(var(--lyplus-blur-amount-near));
     }
 
@@ -4247,6 +4710,17 @@ AmLyrics$1.styles = i$3 `
       display: inline;
     }
 
+    .lyrics-word.char-rise {
+      display: inline-block;
+      vertical-align: baseline;
+      white-space: nowrap;
+    }
+
+    .lyrics-word.char-rise.allow-break {
+      display: inline;
+      white-space: normal;
+    }
+
     .lyrics-syllable-wrap {
       display: inline;
     }
@@ -4276,17 +4750,19 @@ AmLyrics$1.styles = i$3 `
     /* --- Syllable States --- */
     .lyrics-syllable.finished {
       background-color: var(--lyplus-text-primary);
-      transition: transform 1s ease !important;
+      /* Unified transition: transform keeps its 1s glow decay, while
+         background-color and color fade at 0.7s so everything dims
+         together when the line becomes inactive. */
+      transition:
+        transform 1s ease,
+        background-color 0.7s ease,
+        color 0.7s ease;
     }
 
     .lyrics-syllable.finished.has-chars {
       background-color: transparent;
     }
 
-    .lyrics-line:not(.active) .lyrics-syllable.finished {
-      transition: color 0.18s;
-    }
-
     .lyrics-line.active:not(.lyrics-gap) .lyrics-syllable {
       transition:
         transform 1s ease,
@@ -4336,7 +4812,60 @@ AmLyrics$1.styles = i$3 `
         );
       background-position:
         calc(100% + 0.5em) 0%,
-        right;
+        right 0%;
+    }
+
+    /* Background vocals: muted gray wipe instead of white.
+       Must match specificity of the main .active .highlight rule (0,3,1). */
+    .lyrics-line.active
+      .background-vocal-container
+      .lyrics-syllable.highlight.no-chars,
+    .lyrics-line.active
+      .background-vocal-container
+      .lyrics-syllable.pre-highlight.no-chars,
+    .lyrics-line.pre-active
+      .background-vocal-container
+      .lyrics-syllable.highlight.no-chars,
+    .lyrics-line.pre-active
+      .background-vocal-container
+      .lyrics-syllable.pre-highlight.no-chars {
+      background-image:
+        linear-gradient(
+          90deg,
+          #ffffff00 0%,
+          color-mix(in srgb, var(--lyplus-text-primary, #fff) 50%, #888888) 50%,
+          #0000 100%
+        ),
+        linear-gradient(
+          90deg,
+          color-mix(in srgb, var(--lyplus-text-primary, #fff) 50%, #888888) 100%,
+          #0000 100%
+        );
+    }
+
+    .lyrics-line.active
+      .background-vocal-container
+      .lyrics-syllable.highlight.rtl-text,
+    .lyrics-line.active
+      .background-vocal-container
+      .lyrics-syllable.pre-highlight.rtl-text,
+    .lyrics-line.pre-active
+      .background-vocal-container
+      .lyrics-syllable.highlight.rtl-text,
+    .lyrics-line.pre-active
+      .background-vocal-container
+      .lyrics-syllable.pre-highlight.rtl-text {
+      background-image:
+        linear-gradient(
+          -90deg,
+          color-mix(in srgb, var(--lyplus-text-primary) 50%, #888888) 0%,
+          transparent 100%
+        ),
+        linear-gradient(
+          -90deg,
+          color-mix(in srgb, var(--lyplus-text-primary) 50%, #888888) 100%,
+          transparent 100%
+        );
     }
 
     /* Non-growable words float up with a gentle curve */
@@ -4344,18 +4873,88 @@ AmLyrics$1.styles = i$3 `
       .lyrics-word:not(.growable)
       .lyrics-syllable.highlight {
       transform: translateY(-3.5%);
-      transition:
-        transform var(--rise-duration, 1.5s) cubic-bezier(0.22, 1, 0.36, 1),
-        background-color 0.5s,
-        color 0.5s;
+    }
+
+    .lyrics-line.persist-highlight:not(.lyrics-gap)
+      .lyrics-word:not(.growable)
+      .lyrics-syllable.finished {
+      transform: translateY(-3.5%);
     }
 
     .lyrics-word.growable .lyrics-syllable.cleanup .char {
       transform: translateY(-3.5%);
     }
 
-    .lyrics-line.active:not(.lyrics-gap) .lyrics-syllable.highlight.finished {
-      background-image: none;
+    .lyrics-word.char-rise .lyrics-syllable.cleanup .char {
+      transform: translateY(-3.5%);
+    }
+
+    .lyrics-line.persist-highlight
+      .lyrics-word.growable
+      .lyrics-syllable.finished
+      .char,
+    .lyrics-line.persist-highlight
+      .lyrics-word.char-rise
+      .lyrics-syllable.finished
+      .char {
+      transform: translateY(-3.5%);
+    }
+
+    /* Background vocal overrides — placed AFTER main rules so they win
+       on equal specificity. */
+    .background-vocal-container .lyrics-syllable {
+      background-color: color-mix(
+        in srgb,
+        var(--lyplus-text-secondary) 50%,
+        #888888
+      );
+    }
+
+    .lyrics-line.active:not(.lyrics-gap)
+      .background-vocal-container
+      .lyrics-syllable.finished,
+    .lyrics-line.pre-active
+      .background-vocal-container
+      .lyrics-syllable.finished {
+      background-color: color-mix(
+        in srgb,
+        var(--lyplus-text-primary) 50%,
+        #888888
+      );
+    }
+
+    .background-vocal-container .lyrics-syllable.line-synced {
+      color: color-mix(
+        in srgb,
+        var(--lyplus-text-secondary) 50%,
+        #888888
+      ) !important;
+    }
+
+    .lyrics-line.active:not(.lyrics-gap)
+      .background-vocal-container
+      .lyrics-syllable.line-synced,
+    .lyrics-line.pre-active
+      .background-vocal-container
+      .lyrics-syllable.line-synced {
+      color: color-mix(
+        in srgb,
+        var(--lyplus-text-primary) 50%,
+        #888888
+      ) !important;
+    }
+
+    .lyrics-line.active:not(.lyrics-gap)
+      .background-vocal-container
+      .lyrics-syllable.line-synced.finished,
+    .lyrics-line.pre-active
+      .background-vocal-container
+      .lyrics-syllable.line-synced.finished {
+      color: color-mix(
+        in srgb,
+        var(--lyplus-text-primary) 50%,
+        #888888
+      ) !important;
     }
 
     .lyrics-syllable.pre-highlight {
@@ -4399,8 +4998,11 @@ AmLyrics$1.styles = i$3 `
     }
 
     .lyrics-syllable.finished span.char {
-      transition: color 0.18s;
       background-color: var(--lyplus-text-primary);
+      transition:
+        color 0.7s,
+        background-color 0.7s,
+        transform 0.7s ease;
     }
 
     /* Active char spans: structural only, wipe animation sets gradient */
@@ -4591,7 +5193,7 @@ AmLyrics$1.styles = i$3 `
       position: relative;
       box-sizing: border-box;
       font-weight: normal;
-      transform: translateY(var(--lyrics-scroll-offset, 0px)) translateZ(1px);
+      transform: translateY(var(--lyrics-scroll-offset, 0px));
       transition:
         opacity 0.3s ease,
         transform 0.6s cubic-bezier(0.23, 1, 0.32, 1)
@@ -4602,7 +5204,7 @@ AmLyrics$1.styles = i$3 `
     .lyrics-plus-empty {
       display: block;
       height: 100vh;
-      transform: translateY(var(--lyrics-scroll-offset, 0px)) translateZ(1px);
+      transform: translateY(var(--lyrics-scroll-offset, 0px));
     }
 
     .lyrics-footer {
@@ -4611,8 +5213,8 @@ AmLyrics$1.styles = i$3 `
       align-items: center;
       flex-wrap: wrap;
       text-align: left;
-      font-size: 1.2em;
-      color: rgba(255, 255, 255, 0.6);
+      font-size: calc(var(--lyplus-font-size-base) * 0.5);
+      color: var(--lyplus-text-secondary);
       padding: 20px 0 50vh 0;
       margin-top: 10px;
       font-weight: 400;
@@ -4625,9 +5227,9 @@ AmLyrics$1.styles = i$3 `
     }
 
     .lyrics-footer.lyrics-line {
-      font-size: 1.2em;
+      font-size: calc(var(--lyplus-font-size-base) * 0.5);
       padding: 20px var(--lyplus-padding-line) 50vh var(--lyplus-padding-line);
-      cursor: default;
+      margin-top: 0;
     }
 
     .lyrics-footer.active {
@@ -4915,7 +5517,7 @@ AmLyrics$1.styles = i$3 `
           0% 100%;
         background-position:
           calc(100% + 0.375em) 0%,
-          calc(100% + 0.36em);
+          calc(100% + 0.36em) 0%;
       }
       to {
         background-size:
@@ -4923,7 +5525,7 @@ AmLyrics$1.styles = i$3 `
           100% 100%;
         background-position:
           -0.75em 0%,
-          right;
+          right 0%;
       }
     }
 
@@ -4934,7 +5536,7 @@ AmLyrics$1.styles = i$3 `
           0% 100%;
         background-position:
           calc(100% + 0.75em) 0%,
-          calc(100% + 0.5em);
+          calc(100% + 0.5em) 0%;
       }
       100% {
         background-size:
@@ -4942,7 +5544,7 @@ AmLyrics$1.styles = i$3 `
           100% 100%;
         background-position:
           -0.75em 0%,
-          right;
+          right 0%;
       }
     }
 
@@ -4972,7 +5574,7 @@ AmLyrics$1.styles = i$3 `
           0% 100%;
         background-position:
           calc(100% + 0.75em) 0%,
-          right;
+          right 0%;
       }
       to {
         background-size:
@@ -4980,7 +5582,7 @@ AmLyrics$1.styles = i$3 `
           0% 100%;
         background-position:
           calc(100% + 0.375em) 0%,
-          right;
+          right 0%;
       }
     }
 
@@ -5046,7 +5648,7 @@ AmLyrics$1.styles = i$3 `
     }
 
     /* Character grow animation — translate3d+scale3d for smooth transform,
-       drop-shadow for glow (text-shadow doesn't work with background-clip:text) */
+       drop-shadow for glow */
     @keyframes grow-dynamic {
       0% {
         transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
@@ -5083,6 +5685,16 @@ AmLyrics$1.styles = i$3 `
       }
     }
 
+    @keyframes rise-char {
+      0% {
+        transform: translate3d(0, 0, 0);
+      }
+      65%,
+      100% {
+        transform: translate3d(0, var(--char-rise-y, -1.12px), 0);
+      }
+    }
+
     @keyframes grow-static {
       0%,
       100% {