@uimaxbai/am-lyrics 1.3.0 → 1.4.0

package/dist/src/react.js

@@ -322,7 +322,7 @@ class GoogleService {
     }
 }
 
-const VERSION = '1.3.0';
+const VERSION = '1.4.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;
@@ -345,32 +345,17 @@ function fetchWithTimeout(url, options = {}, timeoutMs = FETCH_TIMEOUT_MS) {
 }
 const KPOE_SERVERS = [
     'https://lyricsplus.binimum.org',
-    'https://lyricsplus.atomix.one',
     'https://lyricsplus-seven.vercel.app',
     'https://lyricsplus.prjktla.workers.dev',
     'https://lyrics-plus-backend.vercel.app',
 ];
 const DEFAULT_KPOE_SOURCE_ORDER = 'apple,lyricsplus,musixmatch,spotify,qq,deezer,musixmatch-word';
-const TIDAL_SERVERS = [
-    'https://arran.monochrome.tf',
-    'https://api.monochrome.tf/',
-    'https://triton.squid.wtf',
-    'https://wolf.qqdl.site',
-    'https://maus.qqdl.site',
-    'https://vogel.qqdl.site',
-    'https://katze.qqdl.site',
-    'https://hund.qqdl.site',
-    'https://tidal.kinoplus.online',
-    'https://hifi-one.spotisaver.net',
-    'https://hifi-two.spotisaver.net',
-];
 const GENIUS_WORKER_URL = 'https://fetch-genius.samidy.workers.dev/';
 let AmLyrics$1 = class AmLyrics extends i {
     constructor() {
         super(...arguments);
         this.downloadFormat = 'auto';
         this.highlightColor = '#ffffff';
-        this.hoverBackgroundColor = 'rgba(255, 255, 255, 0.13)';
         this.autoScroll = true;
         this.interpolate = true;
         this.showRomanization = false;
@@ -415,6 +400,10 @@ let AmLyrics$1 = class AmLyrics extends i {
         // Syllable animation tracking
         this.lastActiveIndex = 0;
         this.visibleLineIds = new Set();
+        // Cached element tracking to avoid repeated querySelectorAll calls
+        this.preActiveLineElements = [];
+        this.positionedLineElements = [];
+        this.activeGapLineElements = [];
         // Bound handler references for proper event listener removal
         this._boundHandleUserScroll = this.handleUserScroll.bind(this);
         this._boundAnimateProgress = this.animateProgress.bind(this);
@@ -487,6 +476,31 @@ let AmLyrics$1 = class AmLyrics extends i {
     }
     set currentTime(value) {
         const oldValue = this._currentTime;
+        // If the new time is significantly smaller than the old time (e.g. song looped)
+        if (value < oldValue && oldValue - value > 1000 && this.lyrics) {
+            this.activeLineIndices = [];
+            this.activeMainWordIndices.clear();
+            this.activeBackgroundWordIndices.clear();
+            this.mainWordProgress.clear();
+            this.backgroundWordProgress.clear();
+            this.mainWordAnimations.clear();
+            this.backgroundWordAnimations.clear();
+            this.preActiveLineElements = [];
+            this.positionedLineElements = [];
+            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');
+                activeLines.forEach(line => {
+                    line.classList.remove('active', 'pre-active');
+                    AmLyrics.resetSyllables(line);
+                });
+                const activeGaps = this.lyricsContainer.querySelectorAll('.lyrics-gap.active, .lyrics-gap.gap-exiting');
+                activeGaps.forEach(gap => gap.classList.remove('active', 'gap-exiting'));
+                // Reset gap cache since we manually messed with the elements
+                this.gapElementCache.clear();
+            }
+        }
         this._currentTime = value;
         if (oldValue !== value && this.lyrics) {
             this._onTimeChanged(oldValue, value);
@@ -548,6 +562,9 @@ let AmLyrics$1 = class AmLyrics extends i {
             this.lyricsContainer.removeEventListener('wheel', this._boundHandleUserScroll);
             this.lyricsContainer.removeEventListener('touchmove', this._boundHandleUserScroll);
         }
+        this.preActiveLineElements = [];
+        this.positionedLineElements = [];
+        this.activeGapLineElements = [];
     }
     async fetchLyrics() {
         // Cancel any in-flight fetch to prevent stale results from racing
@@ -582,16 +599,7 @@ let AmLyrics$1 = class AmLyrics extends i {
                 }
             }
             if (collectedSources.length === 0 && resolvedMetadata?.metadata) {
-                const tidalResult = await AmLyrics.fetchLyricsFromTidal(resolvedMetadata.metadata, resolvedMetadata.catalogIsrc);
-                if (tidalResult && tidalResult.lines.length > 0) {
-                    collectedSources.push({
-                        lines: tidalResult.lines,
-                        source: 'Tidal',
-                    });
-                }
-            }
-            // Fallback: LRCLIB
-            if (collectedSources.length === 0 && resolvedMetadata?.metadata) {
+                // Fallback: LRCLIB
                 const lrclibResult = await AmLyrics.fetchLyricsFromLrclib(resolvedMetadata.metadata);
                 if (lrclibResult && lrclibResult.lines.length > 0) {
                     collectedSources.push({
@@ -611,15 +619,17 @@ let AmLyrics$1 = class AmLyrics extends i {
             }
             this.hasFetchedAllProviders =
                 collectedSources.length === 0 ||
-                    collectedSources.some(s => s.source === 'LRCLIB' ||
-                        s.source === 'Tidal' ||
-                        s.source === 'Genius');
+                    collectedSources.some(s => s.source === 'LRCLIB' || s.source === 'Genius');
             this._updateFooter();
             if (collectedSources.length > 0) {
                 this.availableSources = AmLyrics.mergeAndSortSources(collectedSources);
                 this.currentSourceIndex = 0;
-                this.lyrics = this.availableSources[0].lines;
-                this.lyricsSource = this.availableSources[0].source;
+                const sourceResult = this.availableSources[0];
+                this.lyrics = sourceResult.lines;
+                this.lyricsSource = sourceResult.source;
+                if (sourceResult.songwriters) {
+                    this.songwriters = sourceResult.songwriters;
+                }
                 await this.onLyricsLoaded();
                 return;
             }
@@ -641,6 +651,9 @@ let AmLyrics$1 = class AmLyrics extends i {
         this.backgroundWordProgress.clear();
         this.mainWordAnimations.clear();
         this.backgroundWordAnimations.clear();
+        this.preActiveLineElements = [];
+        this.positionedLineElements = [];
+        this.activeGapLineElements = [];
         if (this.lyricsContainer) {
             this.isProgrammaticScroll = true;
             this.lyricsContainer.scrollTop = 0;
@@ -670,36 +683,30 @@ let AmLyrics$1 = class AmLyrics extends i {
             return 2;
         if (lower.includes('musixmatch') && hasWordSync)
             return 3;
-        if (lower.includes('tidal') && hasWordSync)
-            return 4;
         if (lower.includes('lrclib') && hasWordSync)
-            return 5;
+            return 4;
         if (hasWordSync)
-            return 6;
+            return 5;
         if (lower.includes('apple') && !hasWordSync && !isUnsynced)
-            return 7;
+            return 6;
         if (isQQ && !hasWordSync && !isUnsynced)
-            return 8;
+            return 7;
         if (lower.includes('musixmatch') && !hasWordSync && !isUnsynced)
-            return 9;
-        if (lower.includes('tidal') && !hasWordSync && !isUnsynced)
-            return 10;
+            return 8;
         if (lower.includes('lrclib') && !hasWordSync && !isUnsynced)
-            return 11;
+            return 9;
         if (!hasWordSync && !isUnsynced)
-            return 12;
+            return 10;
         if (lower.includes('apple') && isUnsynced)
-            return 13;
+            return 11;
         if (isQQ && isUnsynced)
-            return 14;
+            return 12;
         if (lower.includes('musixmatch') && isUnsynced)
-            return 15;
-        if (lower.includes('tidal') && isUnsynced)
-            return 16;
+            return 13;
         if (lower.includes('lrclib') && isUnsynced)
-            return 17;
+            return 14;
         if (lower.includes('genius'))
-            return 18;
+            return 15;
         return 20;
     }
     static mergeAndSortSources(collectedSources) {
@@ -730,13 +737,6 @@ let AmLyrics$1 = class AmLyrics extends i {
                 const resolvedMetadata = await this.resolveSongMetadata();
                 if (resolvedMetadata?.metadata) {
                     const newSources = [];
-                    // Try Tidal if not fetched
-                    if (!this.availableSources.some(s => s.source.toLowerCase().includes('tidal'))) {
-                        const tidalResult = await AmLyrics.fetchLyricsFromTidal(resolvedMetadata.metadata, resolvedMetadata.catalogIsrc);
-                        if (tidalResult && tidalResult.lines.length > 0) {
-                            newSources.push({ lines: tidalResult.lines, source: 'Tidal' });
-                        }
-                    }
                     // Try LRCLIB if not fetched
                     if (!this.availableSources.some(s => s.source.toLowerCase().includes('lrclib'))) {
                         const lrclibResult = await AmLyrics.fetchLyricsFromLrclib(resolvedMetadata.metadata);
@@ -771,8 +771,12 @@ let AmLyrics$1 = class AmLyrics extends i {
         if (this.availableSources.length > 1) {
             this.currentSourceIndex =
                 (this.currentSourceIndex + 1) % this.availableSources.length;
-            this.lyrics = this.availableSources[this.currentSourceIndex].lines;
-            this.lyricsSource = this.availableSources[this.currentSourceIndex].source;
+            const sourceResult = this.availableSources[this.currentSourceIndex];
+            this.lyrics = sourceResult.lines;
+            this.lyricsSource = sourceResult.source;
+            if (sourceResult.songwriters) {
+                this.songwriters = sourceResult.songwriters;
+            }
             await this.onLyricsLoaded();
         }
     }
@@ -781,6 +785,7 @@ let AmLyrics$1 = class AmLyrics extends i {
             title: this.songTitle?.trim() ?? '',
             artist: this.songArtist?.trim() ?? '',
             album: this.songAlbum?.trim() || undefined,
+            songwriters: this.songwriters?.trim() || undefined,
             durationMs: undefined,
         };
         if (typeof this.songDurationMs === 'number' && this.songDurationMs > 0) {
@@ -820,6 +825,9 @@ let AmLyrics$1 = class AmLyrics extends i {
                 if (!metadata.album && catalogResult.album) {
                     metadata.album = catalogResult.album;
                 }
+                if (!metadata.songwriters && catalogResult.songwriters) {
+                    metadata.songwriters = catalogResult.songwriters;
+                }
                 if (metadata.durationMs == null &&
                     typeof catalogResult.durationMs === 'number' &&
                     catalogResult.durationMs > 0) {
@@ -1010,9 +1018,13 @@ let AmLyrics$1 = class AmLyrics extends i {
                     const ttmlRes = await fetchWithTimeout(result.lyricsUrl);
                     if (ttmlRes.ok) {
                         const ttmlText = await ttmlRes.text();
-                        const lines = AmLyrics.parseTTML(ttmlText);
-                        if (lines && lines.length > 0) {
-                            allResults.push({ lines, source: 'BiniLyrics' });
+                        const parseResult = AmLyrics.parseTTML(ttmlText);
+                        if (parseResult && parseResult.lines.length > 0) {
+                            allResults.push({
+                                lines: parseResult.lines,
+                                source: 'BiniLyrics',
+                                songwriters: parseResult.songwriters,
+                            });
                             return allResults;
                         }
                     }
@@ -1044,11 +1056,12 @@ let AmLyrics$1 = class AmLyrics extends i {
                         const ttmlRes = await fetchWithTimeout(result.lyricsUrl);
                         if (ttmlRes.ok) {
                             const ttmlText = await ttmlRes.text();
-                            const lines = AmLyrics.parseTTML(ttmlText);
-                            if (lines && lines.length > 0) {
+                            const parseResult = AmLyrics.parseTTML(ttmlText);
+                            if (parseResult && parseResult.lines.length > 0) {
                                 allResults.push({
-                                    lines,
+                                    lines: parseResult.lines,
                                     source: 'BiniLyrics',
+                                    songwriters: parseResult.songwriters,
                                 });
                                 return allResults;
                             }
@@ -1181,77 +1194,6 @@ let AmLyrics$1 = class AmLyrics extends i {
         }
         return lines;
     }
-    /**
-     * Fetch lyrics from Tidal API.
-     * Picks 2 random servers, tries search + lyrics on each.
-     */
-    static async fetchLyricsFromTidal(metadata, isrc) {
-        const title = metadata.title?.trim();
-        const artist = metadata.artist?.trim();
-        if (!title || !artist)
-            return null;
-        // Pick 3 random unique servers for better reliability
-        const shuffled = [...TIDAL_SERVERS].sort(() => Math.random() - 0.5);
-        const serversToTry = shuffled.slice(0, 3);
-        for (const base of serversToTry) {
-            try {
-                const normalizedBase = base.endsWith('/') ? base.slice(0, -1) : base;
-                // Step 1: Search for the track
-                const searchQuery = `${title} ${artist}`;
-                const searchParams = new URLSearchParams({ s: searchQuery });
-                // eslint-disable-next-line no-await-in-loop
-                const searchResponse = await fetchWithTimeout(`${normalizedBase}/search/?${searchParams.toString()}`);
-                if (!searchResponse.ok) {
-                    // eslint-disable-next-line no-continue
-                    continue;
-                }
-                // eslint-disable-next-line no-await-in-loop
-                const searchData = await searchResponse.json();
-                const items = searchData?.data?.items;
-                if (!Array.isArray(items) || items.length === 0) {
-                    // eslint-disable-next-line no-continue
-                    continue;
-                }
-                // Find best match: prefer ISRC match, then first result
-                let bestTrack = items[0];
-                if (isrc) {
-                    const isrcMatch = items.find((item) => item.isrc && item.isrc.toLowerCase() === isrc.toLowerCase());
-                    if (isrcMatch) {
-                        bestTrack = isrcMatch;
-                    }
-                }
-                const trackId = bestTrack?.id;
-                if (!trackId) {
-                    // eslint-disable-next-line no-continue
-                    continue;
-                }
-                // Step 2: Fetch lyrics
-                // eslint-disable-next-line no-await-in-loop
-                const lyricsResponse = await fetchWithTimeout(`${normalizedBase}/lyrics/?id=${trackId}`);
-                if (!lyricsResponse.ok) {
-                    // eslint-disable-next-line no-continue
-                    continue;
-                }
-                // eslint-disable-next-line no-await-in-loop
-                const lyricsData = await lyricsResponse.json();
-                const subtitles = lyricsData?.lyrics?.subtitles;
-                if (subtitles && typeof subtitles === 'string') {
-                    const lines = AmLyrics.parseLrcSubtitles(subtitles);
-                    if (lines.length > 0) {
-                        const provider = lyricsData?.lyrics?.lyricsProvider || 'Tidal';
-                        return {
-                            lines,
-                            source: `Tidal (${provider})`,
-                        };
-                    }
-                }
-            }
-            catch {
-                // Try next server
-            }
-        }
-        return null;
-    }
     /**
      * Fetch lyrics from LRCLIB.
      * Uses search endpoint, prefers synced lyrics.
@@ -1434,6 +1376,19 @@ let AmLyrics$1 = class AmLyrics extends i {
                     agentMap[id] = type;
                 }
             }
+            let songwriters;
+            const songwritersNodes = doc.getElementsByTagName('songwriter');
+            if (songwritersNodes.length > 0) {
+                const names = [];
+                for (let i = 0; i < songwritersNodes.length; i += 1) {
+                    if (songwritersNodes[i].textContent) {
+                        names.push(songwritersNodes[i].textContent);
+                    }
+                }
+                if (names.length > 0) {
+                    songwriters = names.join(', ');
+                }
+            }
             const translationNodes = doc.getElementsByTagName('translation');
             for (let i = 0; i < translationNodes.length; i += 1) {
                 const texts = translationNodes[i].getElementsByTagName('text');
@@ -1550,7 +1505,7 @@ let AmLyrics$1 = class AmLyrics extends i {
                                     text: bgText,
                                     timestamp: timeToMs(bgSpan.getAttribute('begin')),
                                     endtime: timeToMs(bgSpan.getAttribute('end')),
-                                    part: false,
+                                    part: !/\s$/.test(bgText),
                                 });
                             }
                             // eslint-disable-next-line no-continue
@@ -1573,7 +1528,7 @@ let AmLyrics$1 = class AmLyrics extends i {
                             text,
                             timestamp: timeToMs(span.getAttribute('begin')),
                             endtime: timeToMs(span.getAttribute('end')),
-                            part: false,
+                            part: !/\s$/.test(text),
                         });
                     }
                 }
@@ -1659,7 +1614,7 @@ let AmLyrics$1 = class AmLyrics extends i {
                     oppositeTurn: alignment === 'end',
                 });
             }
-            return lines;
+            return { lines, songwriters };
         }
         catch (e) {
             // eslint-disable-next-line no-console
@@ -1824,7 +1779,10 @@ let AmLyrics$1 = class AmLyrics extends i {
                     if (!newActiveLines.includes(lineIndex)) {
                         const lineElement = this._getLineElement(lineIndex);
                         if (lineElement) {
-                            lineElement.classList.remove('active');
+                            lineElement.classList.remove('active', 'pre-active');
+                            const preIdx = this.preActiveLineElements.indexOf(lineElement);
+                            if (preIdx !== -1)
+                                this.preActiveLineElements.splice(preIdx, 1);
                             AmLyrics.resetSyllables(lineElement);
                         }
                     }
@@ -1836,6 +1794,9 @@ let AmLyrics$1 = class AmLyrics extends i {
                         if (lineElement) {
                             lineElement.classList.add('active');
                             lineElement.classList.remove('pre-active');
+                            const preIdx = this.preActiveLineElements.indexOf(lineElement);
+                            if (preIdx !== -1)
+                                this.preActiveLineElements.splice(preIdx, 1);
                         }
                     }
                 }
@@ -1855,10 +1816,9 @@ let AmLyrics$1 = class AmLyrics extends i {
                 }
             }
             // Also update syllables in active gap lines (breathing dots)
-            const activeGaps = this.lyricsContainer.querySelectorAll('.lyrics-gap.active');
-            activeGaps.forEach(gapLine => {
+            for (const gapLine of this.activeGapLineElements) {
                 AmLyrics.updateSyllablesForLine(gapLine, newTime);
-            });
+            }
             // Imperatively manage gap active state
             if (this.gapElementCache.size > 0) {
                 for (const [, gap] of this.gapElementCache) {
@@ -1869,9 +1829,21 @@ let AmLyrics$1 = class AmLyrics extends i {
                     const isExiting = gap.classList.contains('gap-exiting');
                     const exitLeadMs = GAP_EXIT_LEAD_MS;
                     const shouldStartExiting = isActive && !isExiting && newTime >= gapEndTime - exitLeadMs;
-                    if (shouldBeActive && !isActive && !isExiting) {
+                    if (shouldBeActive && (!isActive || isSeek) && !isExiting) {
                         gap.classList.remove('gap-exiting');
+                        if (isSeek && isActive) {
+                            gap.classList.remove('active');
+                            // eslint-disable-next-line no-void
+                            void gap.offsetWidth; // Force reflow
+                        }
+                        const gapDuration = gapEndTime - gapStartTime;
+                        const baseLoopDelay = AmLyrics.getGapLoopDelay(gapDuration);
+                        const totalDelay = baseLoopDelay + (newTime - gapStartTime);
+                        gap.style.setProperty('--gap-loop-delay', `-${totalDelay}ms`);
                         gap.classList.add('active');
+                        if (!this.activeGapLineElements.includes(gap)) {
+                            this.activeGapLineElements.push(gap);
+                        }
                         const dotSyllables = gap.querySelectorAll('.lyrics-syllable');
                         dotSyllables.forEach(dot => {
                             const dotStart = parseFloat(dot.getAttribute('data-start-time') || '0');
@@ -1879,24 +1851,34 @@ let AmLyrics$1 = class AmLyrics extends i {
                             if (newTime > dotEnd) {
                                 dot.classList.add('finished');
                                 if (!dot.classList.contains('highlight')) {
-                                    AmLyrics.updateSyllableAnimation(dot);
+                                    AmLyrics.updateSyllableAnimation(dot, newTime - dotStart);
                                 }
                             }
                             else if (newTime >= dotStart && newTime <= dotEnd) {
-                                AmLyrics.updateSyllableAnimation(dot);
+                                AmLyrics.updateSyllableAnimation(dot, newTime - dotStart);
                             }
                         });
                     }
                     else if (shouldStartExiting) {
-                        gap.classList.add('gap-exiting');
+                        // Cancel gap-loop first, force reflow, then start gap-ended
+                        // so the browser sees a clean animation swap
                         gap.classList.remove('active');
+                        // eslint-disable-next-line no-void
+                        void gap.offsetWidth;
+                        gap.classList.add('gap-exiting');
+                        const gapIdx = this.activeGapLineElements.indexOf(gap);
+                        if (gapIdx !== -1)
+                            this.activeGapLineElements.splice(gapIdx, 1);
                         setTimeout(() => {
                             gap.classList.remove('gap-exiting');
                         }, GAP_EXIT_LEAD_MS);
                     }
-                    else if (isActive && !shouldBeActive) {
+                    else if (!shouldBeActive && (isActive || isExiting)) {
                         gap.classList.remove('active');
                         gap.classList.remove('gap-exiting');
+                        const gapIdx = this.activeGapLineElements.indexOf(gap);
+                        if (gapIdx !== -1)
+                            this.activeGapLineElements.splice(gapIdx, 1);
                     }
                     else if (isExiting && newTime < gapEndTime - exitLeadMs) {
                         gap.classList.remove('gap-exiting');
@@ -1914,20 +1896,41 @@ let AmLyrics$1 = class AmLyrics extends i {
                     const isExiting = gap.classList.contains('gap-exiting');
                     const exitLeadMs = GAP_EXIT_LEAD_MS;
                     const shouldStartExiting = isActive && !isExiting && newTime >= gapEndTime - exitLeadMs;
-                    if (shouldBeActive && !isActive && !isExiting) {
+                    if (shouldBeActive && (!isActive || isSeek) && !isExiting) {
                         gap.classList.remove('gap-exiting');
+                        if (isSeek && isActive) {
+                            gap.classList.remove('active');
+                            // eslint-disable-next-line no-void
+                            void gap.offsetWidth; // Force reflow
+                        }
+                        const gapDuration = gapEndTime - gapStartTime;
+                        const baseLoopDelay = AmLyrics.getGapLoopDelay(gapDuration);
+                        const totalDelay = baseLoopDelay + (newTime - gapStartTime);
+                        gap.style.setProperty('--gap-loop-delay', `-${totalDelay}ms`);
                         gap.classList.add('active');
+                        if (!this.activeGapLineElements.includes(gap)) {
+                            this.activeGapLineElements.push(gap);
+                        }
                     }
                     else if (shouldStartExiting) {
-                        gap.classList.add('gap-exiting');
+                        // Cancel gap-loop first, force reflow, then start gap-ended
                         gap.classList.remove('active');
+                        // eslint-disable-next-line no-void
+                        void gap.offsetWidth;
+                        gap.classList.add('gap-exiting');
+                        const gapIdx = this.activeGapLineElements.indexOf(gap);
+                        if (gapIdx !== -1)
+                            this.activeGapLineElements.splice(gapIdx, 1);
                         setTimeout(() => {
                             gap.classList.remove('gap-exiting');
                         }, GAP_EXIT_LEAD_MS);
                     }
-                    else if (isActive && !shouldBeActive) {
+                    else if (!shouldBeActive && (isActive || isExiting)) {
                         gap.classList.remove('active');
                         gap.classList.remove('gap-exiting');
+                        const gapIdx = this.activeGapLineElements.indexOf(gap);
+                        if (gapIdx !== -1)
+                            this.activeGapLineElements.splice(gapIdx, 1);
                     }
                     else if (isExiting && newTime < gapEndTime - exitLeadMs) {
                         gap.classList.remove('gap-exiting');
@@ -1942,6 +1945,25 @@ let AmLyrics$1 = class AmLyrics extends i {
             else if (this.lastInstrumentalIndex !== null) {
                 this.lastInstrumentalIndex = null;
             }
+            // Check footer active state
+            const lastLyric = this.lyrics && this.lyrics.length > 0
+                ? this.lyrics[this.lyrics.length - 1]
+                : null;
+            const footer = this.lyricsContainer.querySelector('.lyrics-footer');
+            if (footer && lastLyric && lastLyric.endtime > 0) {
+                const isFooterActive = newTime > lastLyric.endtime + 200; // Snappier 200ms buffer
+                if (isFooterActive && !footer.classList.contains('active')) {
+                    footer.classList.add('active');
+                    if (this.autoScroll &&
+                        !this.isUserScrolling &&
+                        !this.isClickSeeking) {
+                        this.focusLine(footer);
+                    }
+                }
+                else if (!isFooterActive && footer.classList.contains('active')) {
+                    footer.classList.remove('active');
+                }
+            }
             // Pre-scroll: scroll to upcoming line ~0.5s before it starts
             if (this.autoScroll &&
                 !this.isUserScrolling &&
@@ -1964,6 +1986,9 @@ let AmLyrics$1 = class AmLyrics extends i {
                             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);
@@ -1993,6 +2018,9 @@ let AmLyrics$1 = class AmLyrics extends i {
                     if (lineEl)
                         lineEl.classList.add('active');
                 }
+                // 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);
             }
         }
         // Handle duration reset (-1 stops playback and resets currentTime to 0)
@@ -2005,6 +2033,9 @@ let AmLyrics$1 = class AmLyrics extends i {
             this.backgroundWordProgress.clear();
             this.mainWordAnimations.clear();
             this.backgroundWordAnimations.clear();
+            this.preActiveLineElements = [];
+            this.positionedLineElements = [];
+            this.activeGapLineElements = [];
             this.setUserScrolling(false);
             // Cancel any running animations
             if (this.animationFrameId) {
@@ -2058,7 +2089,7 @@ let AmLyrics$1 = class AmLyrics extends i {
             const gap = this.lyrics[targetLineIndex].timestamp -
                 this.lyrics[prevPrimaryIndex].endtime;
             if (gap > 200) {
-                scrollDuration = Math.min(Math.max(gap * 0.6, SCROLL_ANIMATION_DURATION_MS), 2000);
+                scrollDuration = Math.min(Math.max(gap * 0.85, SCROLL_ANIMATION_DURATION_MS), 4000);
             }
         }
         this.focusLine(targetLine, forceScroll, scrollDuration);
@@ -2120,6 +2151,9 @@ let AmLyrics$1 = class AmLyrics extends i {
         this.cachedLineData = null;
         this.lineElementCache.clear();
         this.gapElementCache.clear();
+        this.preActiveLineElements = [];
+        this.positionedLineElements = [];
+        this.activeGapLineElements = [];
     }
     _updateCachedIsUnsynced() {
         this.cachedIsUnsynced =
@@ -2132,13 +2166,23 @@ let AmLyrics$1 = class AmLyrics extends i {
             return;
         this.cachedLineData = this.lyrics.map(line => {
             const wordGroups = [];
-            for (const syllable of line.text) {
-                if (syllable.part && wordGroups.length > 0) {
-                    wordGroups[wordGroups.length - 1].push(syllable);
-                }
-                else {
-                    wordGroups.push([syllable]);
+            let currentGroupBuffer = [];
+            line.text.forEach((syllable, idx) => {
+                currentGroupBuffer.push(syllable);
+                const nextSyllable = line.text[idx + 1];
+                const endsWithDelimiter = !nextSyllable ||
+                    syllable.part === false ||
+                    /\s$/.test(syllable.text) ||
+                    (nextSyllable &&
+                        syllable.isBackground !==
+                            nextSyllable.isBackground);
+                if (endsWithDelimiter) {
+                    wordGroups.push(currentGroupBuffer);
+                    currentGroupBuffer = [];
                 }
+            });
+            if (currentGroupBuffer.length > 0) {
+                wordGroups.push(currentGroupBuffer);
             }
             const groupGrowable = new Array(wordGroups.length).fill(false);
             const groupGlowing = new Array(wordGroups.length).fill(false);
@@ -2147,6 +2191,7 @@ let AmLyrics$1 = class AmLyrics extends i {
             const vwCharOffset = new Array(wordGroups.length).fill(0);
             const vwStartMs = new Array(wordGroups.length).fill(0);
             const vwEndMs = new Array(wordGroups.length).fill(0);
+            let lineIsRTL = false;
             let vwStart = 0;
             while (vwStart < wordGroups.length) {
                 let vwEnd = vwStart;
@@ -2168,9 +2213,11 @@ let AmLyrics$1 = class AmLyrics extends i {
                 const combinedDuration = combinedEnd - combinedStart;
                 const isCJK = /[\u4e00-\u9fff\u3040-\u309f\u30a0-\u30ff\uac00-\ud7af]/.test(combinedText);
                 const isRTL = /[\u0600-\u06FF\u0750-\u077F\u08A0-\u08FF\u0590-\u05FF]/.test(combinedText);
+                if (isRTL)
+                    lineIsRTL = true;
                 const hasHyphen = combinedText.includes('-');
                 const wordLen = combinedText.length;
-                let isGrowableVW = !isCJK && !isRTL && !hasHyphen && wordLen > 0 && wordLen <= 12;
+                let isGrowableVW = !isCJK && !isRTL && !hasHyphen && wordLen > 0 && wordLen <= 7;
                 if (isGrowableVW) {
                     if (wordLen < 3) {
                         isGrowableVW =
@@ -2181,7 +2228,8 @@ let AmLyrics$1 = class AmLyrics extends i {
                             combinedDuration >= 850 && combinedDuration >= wordLen * 190;
                     }
                 }
-                const isGlowingVW = isGrowableVW;
+                const isLineSynced = line.isWordSynced === false || line.text.some(s => s.lineSynced);
+                const isGlowingVW = isGrowableVW && !isLineSynced;
                 let charOff = 0;
                 for (let gi = vwStart; gi <= vwEnd; gi += 1) {
                     groupGrowable[gi] = isGrowableVW;
@@ -2205,6 +2253,7 @@ let AmLyrics$1 = class AmLyrics extends i {
                 vwCharOffset,
                 vwStartMs,
                 vwEndMs,
+                lineIsRTL,
             };
         });
     }
@@ -2285,15 +2334,17 @@ let AmLyrics$1 = class AmLyrics extends i {
     clearPreActiveClasses(exceptLineIndex = null) {
         if (!this.lyricsContainer)
             return;
-        this.lyricsContainer
-            .querySelectorAll('.lyrics-line.pre-active')
-            .forEach(element => {
-            const lineElement = element;
+        const keptLines = [];
+        for (const lineElement of this.preActiveLineElements) {
             const lineIndex = AmLyrics.getLineIndexFromElement(lineElement);
-            if (lineIndex !== exceptLineIndex) {
+            if (lineIndex === exceptLineIndex) {
+                keptLines.push(lineElement);
+            }
+            else {
                 lineElement.classList.remove('pre-active');
             }
-        });
+        }
+        this.preActiveLineElements = keptLines;
     }
     getPrimaryActiveLineIndex(activeIndices) {
         if (activeIndices.length === 0)
@@ -2743,6 +2794,7 @@ 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');
@@ -2801,6 +2853,7 @@ let AmLyrics$1 = class AmLyrics extends i {
         // --- 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;
@@ -2817,6 +2870,7 @@ 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');
@@ -2845,12 +2899,14 @@ let AmLyrics$1 = class AmLyrics extends i {
             'next-3',
             'next-4',
         ];
-        // Remove old position classes
-        this.lyricsContainer
-            .querySelectorAll(`.${positionClasses.join(', .')}`)
-            .forEach(el => el.classList.remove(...positionClasses));
+        // Remove old position classes from tracked elements
+        for (const el of this.positionedLineElements) {
+            el.classList.remove(...positionClasses);
+        }
+        this.positionedLineElements = [];
         // Add new position classes
         lineToScroll.classList.add('lyrics-activest');
+        this.positionedLineElements.push(lineToScroll);
         const lineElements = Array.from(this.lyricsContainer.querySelectorAll('.lyrics-line'));
         const scrollLineIndex = lineElements.indexOf(lineToScroll);
         for (let i = Math.max(0, scrollLineIndex - 4); i <= Math.min(lineElements.length - 1, scrollLineIndex + 4); i += 1) {
@@ -2865,6 +2921,7 @@ let AmLyrics$1 = class AmLyrics extends i {
                     element.classList.add(`prev-${Math.abs(position)}`);
                 else
                     element.classList.add(`next-${position}`);
+                this.positionedLineElements.push(element);
             }
         }
     }
@@ -2885,7 +2942,7 @@ let AmLyrics$1 = class AmLyrics extends i {
             return;
         }
         // Skip scroll if near the bottom of content (prevents footer jitter)
-        if (!forceScroll) {
+        if (!forceScroll && !activeLine.classList.contains('lyrics-footer')) {
             const parent = this.lyricsContainer;
             const atBottom = parent.scrollTop + parent.clientHeight >= parent.scrollHeight - 50;
             if (atBottom) {
@@ -2909,7 +2966,7 @@ let AmLyrics$1 = class AmLyrics extends i {
      * Update syllable highlight animation - apply CSS wipe animation
      * (Exact copy from YouLyPlus _updateSyllableAnimation)
      */
-    static updateSyllableAnimation(syllable) {
+    static updateSyllableAnimation(syllable, elapsedTimeMs = 0) {
         if (syllable.classList.contains('highlight'))
             return;
         const { classList } = syllable;
@@ -2937,8 +2994,8 @@ let AmLyrics$1 = class AmLyrics extends i {
             const baseDelayPerChar = finalDuration * 0.09;
             const growDurationMs = finalDuration * 1.5;
             allWordCharSpans.forEach(span => {
-                const horizontalOffset = parseFloat(span.dataset.horizontalOffset || '0');
-                const maxScale = span.dataset.maxScale || '1.1';
+                const matrixScale = span.dataset.matrixScale || '1.1';
+                const charOffsetX = span.dataset.charOffsetX || '0';
                 const shadowIntensity = span.dataset.shadowIntensity || '0.6';
                 const translateYPeak = span.dataset.translateYPeak || '-2';
                 const syllableCharIndex = parseFloat(span.dataset.syllableCharIndex || '0');
@@ -2946,13 +3003,13 @@ let AmLyrics$1 = class AmLyrics extends i {
                 charAnimationsMap.set(span, `grow-dynamic ${growDurationMs}ms ease-in-out ${growDelay}ms forwards`);
                 styleUpdates.push({
                     element: span,
-                    property: '--char-offset-x',
-                    value: `${horizontalOffset}`,
+                    property: '--matrix-scale',
+                    value: matrixScale,
                 });
                 styleUpdates.push({
                     element: span,
-                    property: '--max-scale',
-                    value: maxScale,
+                    property: '--char-offset-x',
+                    value: `${charOffsetX}px`,
                 });
                 styleUpdates.push({
                     element: span,
@@ -2962,7 +3019,7 @@ let AmLyrics$1 = class AmLyrics extends i {
                 styleUpdates.push({
                     element: span,
                     property: '--translate-y-peak',
-                    value: `${translateYPeak}`,
+                    value: `${translateYPeak}px`,
                 });
             });
         }
@@ -2971,7 +3028,7 @@ let AmLyrics$1 = class AmLyrics extends i {
             charSpans.forEach((span, charIndex) => {
                 const startPct = parseFloat(span.dataset.wipeStart || '0');
                 const durationPct = parseFloat(span.dataset.wipeDuration || '0');
-                const wipeDelay = syllableDurationMs * startPct;
+                const wipeDelay = syllableDurationMs * startPct - elapsedTimeMs;
                 const wipeDuration = syllableDurationMs * durationPct;
                 const useStartAnimation = isFirstInContainer && charIndex === 0;
                 let charWipeAnimation = 'wipe';
@@ -2987,9 +3044,9 @@ let AmLyrics$1 = class AmLyrics extends i {
                     animationParts.push(existingAnimation.split(',')[0].trim());
                 }
                 if (charIndex > 0) {
-                    const arrivalTime = span.dataset.preWipeArrival
+                    const arrivalTime = (span.dataset.preWipeArrival
                         ? parseFloat(span.dataset.preWipeArrival)
-                        : wipeDelay;
+                        : syllableDurationMs * startPct) - elapsedTimeMs;
                     const constantDuration = parseFloat(span.dataset.preWipeDuration || '100');
                     const animDelay = arrivalTime - constantDuration;
                     if (constantDuration > 0) {
@@ -3019,12 +3076,13 @@ let AmLyrics$1 = class AmLyrics extends i {
                 return;
             const currentWipeAnimation = isGap ? 'fade-gap' : wipeAnimation;
             // eslint-disable-next-line no-param-reassign
-            syllable.style.animation = `${currentWipeAnimation} ${visualDuration}ms ${isGap ? 'ease-out' : 'linear'} forwards`;
+            syllable.style.animation = `${currentWipeAnimation} ${visualDuration}ms ${isGap ? 'ease-out' : 'linear'} ${-elapsedTimeMs}ms forwards`;
         }
         // --- WRITE PHASE ---
         classList.remove('pre-highlight');
         classList.add('highlight');
         for (const [span, animationString] of charAnimationsMap.entries()) {
+            span.style.willChange = 'transform';
             span.style.animation = animationString;
         }
         // Apply style updates
@@ -3051,6 +3109,7 @@ let AmLyrics$1 = class AmLyrics extends i {
         syllable.querySelectorAll('span.char').forEach(span => {
             const el = span;
             el.style.animation = '';
+            el.style.willChange = '';
             el.style.transition = 'none';
             el.style.backgroundColor = 'var(--lyplus-text-secondary)';
         });
@@ -3064,6 +3123,7 @@ let AmLyrics$1 = class AmLyrics extends i {
                 const el = span;
                 el.style.removeProperty('background-color');
                 el.style.removeProperty('transition');
+                el.style.removeProperty('will-change');
             });
         });
     }
@@ -3093,7 +3153,7 @@ let AmLyrics$1 = class AmLyrics extends i {
             const syllable = syllables[i];
             const startTime = parseFloat(syllable.getAttribute('data-start-time') || '0');
             const endTime = parseFloat(syllable.getAttribute('data-end-time') || '0');
-            if (startTime) {
+            if (Number.isFinite(startTime) && Number.isFinite(endTime)) {
                 const { classList } = syllable;
                 const hasHighlight = classList.contains('highlight');
                 const hasFinished = classList.contains('finished');
@@ -3117,7 +3177,7 @@ let AmLyrics$1 = class AmLyrics extends i {
                         if (currentTimeMs >= startTime && currentTimeMs <= endTime) {
                             // Currently active
                             if (!hasHighlight) {
-                                AmLyrics.updateSyllableAnimation(syllable);
+                                AmLyrics.updateSyllableAnimation(syllable, currentTimeMs - startTime);
                             }
                             if (hasFinished) {
                                 classList.remove('finished');
@@ -3127,7 +3187,7 @@ let AmLyrics$1 = class AmLyrics extends i {
                             // Finished
                             if (!hasFinished) {
                                 if (!hasHighlight) {
-                                    AmLyrics.updateSyllableAnimation(syllable);
+                                    AmLyrics.updateSyllableAnimation(syllable, currentTimeMs - startTime);
                                 }
                                 classList.add('finished');
                             }
@@ -3379,7 +3439,6 @@ let AmLyrics$1 = class AmLyrics extends i {
         }
         // Set both old internal CSS variables (for backward compatibility)
         // and new public CSS variables (which take precedence)
-        this.style.setProperty('--hover-background-color', this.hoverBackgroundColor);
         this.style.setProperty('--highlight-color', this.highlightColor);
         const sourceLabel = this.lyricsSource ?? 'Unavailable';
         const isUnsynced = this.cachedIsUnsynced;
@@ -3432,21 +3491,24 @@ let AmLyrics$1 = class AmLyrics extends i {
                         >${syllable.romanizedText}</span
                       >`
                             : '';
-                        return b `<span class="lyrics-word">
-                  <span class="lyrics-syllable-wrap">
-                    <span
-                      class="lyrics-syllable ${syllable.lineSynced
-                            ? 'line-synced'
+                        return b `<span class="lyrics-word"
+                  ><span
+                    class="lyrics-syllable-wrap${bgRomanizedText
+                            ? ' has-transliteration'
+                            : ''}"
+                    ><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>`;
+                    >${bgRomanizedText}</span
+                  ></span
+                >`;
                     })}
             </p>`
                     : '';
@@ -3464,8 +3526,11 @@ let AmLyrics$1 = class AmLyrics extends i {
                 const vwFullText = lineData?.vwFullText ?? [];
                 const vwFullDuration = lineData?.vwFullDuration ?? [];
                 const vwCharOffset = lineData?.vwCharOffset ?? [];
+                const lineIsRTL = lineData?.lineIsRTL ?? false;
                 // Create main vocals using YouLyPlus syllable structure
-                const mainVocalElement = b `<p class="main-vocal-container">
+                const mainVocalElement = b `<p
+          class="main-vocal-container ${lineIsRTL ? 'rtl-text' : ''}"
+        >
           ${wordGroups.map((group, groupIdx) => {
                     const isGrowable = groupGrowable[groupIdx];
                     const isGlowing = groupGlowing[groupIdx];
@@ -3475,12 +3540,21 @@ let AmLyrics$1 = class AmLyrics extends i {
                     const wordNumChars = wordText.length;
                     const groupCharOffset = isGrowable ? vwCharOffset[groupIdx] : 0;
                     let sylCharAccumulator = 0;
+                    const groupText = group.map(s => s.text).join('');
+                    const shouldAllowBreak = groupText.trim().length >= 16 ||
+                        /[\u4e00-\u9fff\u3040-\u309f\u30a0-\u30ff\uac00-\ud7af]/.test(groupText);
+                    // Calculate dynamic rise duration based on the audio duration of the word
+                    const wordStartTimeMs = group[0].timestamp;
+                    const wordEndTimeMs = group[group.length - 1].endtime;
+                    const actualDurationMs = wordEndTimeMs - wordStartTimeMs;
+                    // 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'
-                        : ''} ${group.length > 1 ? 'allow-break' : ''}"
-            >
-              ${group.map((syllable, sylIdx) => {
+              class="lyrics-word${isGrowable ? ' growable' : ''}${isGlowing
+                        ? ' glowing'
+                        : ''}${shouldAllowBreak ? ' allow-break' : ''}"
+              style="--rise-duration: ${riseDuration}s"
+              >${group.map((syllable, sylIdx) => {
                         const startTimeMs = syllable.timestamp;
                         const endTimeMs = syllable.endtime;
                         const durationMs = endTimeMs - startTimeMs;
@@ -3566,17 +3640,22 @@ let AmLyrics$1 = class AmLyrics extends i {
                       data-wipe-duration="${(1 / numCharsInSyllable).toFixed(4)}"
                       data-horizontal-offset="${horizontalOffset.toFixed(2)}"
                       data-max-scale="${charMaxScale.toFixed(3)}"
+                      data-matrix-scale="${(charMaxScale * 0.98).toFixed(3)}"
+                      data-char-offset-x="${(horizontalOffset * 0.98).toFixed(2)}"
                       data-shadow-intensity="${charShadowIntensity.toFixed(3)}"
                       data-translate-y-peak="${charTranslateYPeak.toFixed(3)}"
                       >${char}</span
                     >`;
                             })}`;
                         }
-                        return b `<span class="lyrics-syllable-wrap">
-                  <span
-                    class="lyrics-syllable ${groupLineSynced
-                            ? 'line-synced'
+                        return b `<span
+                  class="lyrics-syllable-wrap${romanizedText
+                            ? ' has-transliteration'
                             : ''}"
+                  ><span
+                    class="lyrics-syllable${groupLineSynced
+                            ? ' line-synced'
+                            : ''}${isGrowable ? ' has-chars' : ' no-chars'}"
                     data-start-time="${startTimeMs}"
                     data-end-time="${endTimeMs}"
                     data-duration="${durationMs}"
@@ -3584,11 +3663,10 @@ let AmLyrics$1 = class AmLyrics extends i {
                     data-syllable-index="${sylIdx}"
                     data-wipe-ratio="1"
                     >${syllableContent}</span
-                  >
-                  ${romanizedText}
-                </span>`;
-                    })}
-            </span>`;
+                  >${romanizedText}</span
+                >`;
+                    })}</span
+            >`;
                 })}
         </p>`;
                 // Translation container (if enabled)
@@ -3610,7 +3688,11 @@ let AmLyrics$1 = class AmLyrics extends i {
                     line.romanizedText &&
                     !line.text.some(s => s.romanizedText) &&
                     line.romanizedText.trim() !== fullLineText
-                    ? b `<div class="lyrics-romanization-container">
+                    ? b `<div
+                class="lyrics-romanization-container ${lineIsRTL
+                        ? 'rtl-text'
+                        : ''}"
+              >
                 ${line.romanizedText}
               </div>`
                     : '';
@@ -3630,42 +3712,37 @@ let AmLyrics$1 = class AmLyrics extends i {
             data-end-time="${gapForLine.gapEnd}"
             style="--gap-pulse-duration: ${GAP_PULSE_DURATION_MS}ms; --gap-loop-delay: -${gapLoopDelay}ms; --gap-exit-duration: ${GAP_EXIT_LEAD_MS}ms; --gap-exit-scale: ${GAP_MIN_SCALE};"
           >
-            <div class="lyrics-line-container">
-              <p class="main-vocal-container">
-                <span class="lyrics-word">
-                  <span class="lyrics-syllable-wrap">
-                    <span
-                      class="lyrics-syllable"
-                      data-start-time="${gapForLine.gapStart}"
-                      data-end-time="${gapForLine.gapStart + dotDuration}"
-                      data-duration="${dotDuration}"
-                      data-wipe-ratio="1"
-                      data-syllable-index="0"
-                    ></span>
-                  </span>
-                  <span class="lyrics-syllable-wrap">
-                    <span
-                      class="lyrics-syllable"
-                      data-start-time="${gapForLine.gapStart + dotDuration}"
-                      data-end-time="${gapForLine.gapStart + dotDuration * 2}"
-                      data-duration="${dotDuration}"
-                      data-wipe-ratio="1"
-                      data-syllable-index="1"
-                    ></span>
-                  </span>
-                  <span class="lyrics-syllable-wrap">
-                    <span
-                      class="lyrics-syllable"
-                      data-start-time="${gapForLine.gapStart + dotDuration * 2}"
-                      data-end-time="${gapForLine.gapEnd}"
-                      data-duration="${dotDuration}"
-                      data-wipe-ratio="1"
-                      data-syllable-index="2"
-                    ></span>
-                  </span>
-                </span>
-              </p>
-            </div>
+            <p class="main-vocal-container">
+              <span class="lyrics-word"
+                ><span class="lyrics-syllable-wrap"
+                  ><span
+                    class="lyrics-syllable"
+                    data-start-time="${gapForLine.gapStart}"
+                    data-end-time="${gapForLine.gapStart + dotDuration}"
+                    data-duration="${dotDuration}"
+                    data-wipe-ratio="1"
+                    data-syllable-index="0"
+                  ></span></span
+                ><span class="lyrics-syllable-wrap"
+                  ><span
+                    class="lyrics-syllable"
+                    data-start-time="${gapForLine.gapStart + dotDuration}"
+                    data-end-time="${gapForLine.gapStart + dotDuration * 2}"
+                    data-duration="${dotDuration}"
+                    data-wipe-ratio="1"
+                    data-syllable-index="1"
+                  ></span></span
+                ><span class="lyrics-syllable-wrap"
+                  ><span
+                    class="lyrics-syllable"
+                    data-start-time="${gapForLine.gapStart + dotDuration * 2}"
+                    data-end-time="${gapForLine.gapEnd}"
+                    data-duration="${dotDuration}"
+                    data-wipe-ratio="1"
+                    data-syllable-index="2"
+                  ></span></span
+              ></span>
+            </p>
           </div>`;
                 }
                 return b `
@@ -3674,7 +3751,7 @@ let AmLyrics$1 = class AmLyrics extends i {
             id="${lineId}"
             class="lyrics-line ${line.alignment === 'end'
                     ? 'singer-right'
-                    : 'singer-left'}"
+                    : 'singer-left'} ${lineIsRTL ? 'rtl-text' : ''}"
             data-start-time="${lineStartTime}"
             data-end-time="${lineEndTime}"
             @click=${() => this.handleLineClick(line)}
@@ -3685,11 +3762,11 @@ let AmLyrics$1 = class AmLyrics extends i {
                     }
                 }}
           >
-            <div class="lyrics-line-container">
+            <div class="lyrics-line-container ${lineIsRTL ? 'rtl-text' : ''}">
               ${bgPlacement === 'before' ? backgroundVocalElement : ''}
               ${mainVocalElement}
               ${bgPlacement === 'after' ? backgroundVocalElement : ''}
-              ${translationElement} ${lineRomanizationElement}
+              ${lineRomanizationElement} ${translationElement}
             </div>
           </div>
         `;
@@ -3802,13 +3879,13 @@ let AmLyrics$1 = class AmLyrics extends i {
         ${renderContent()}
         ${!this.isLoading
             ? b `
-              <footer class="lyrics-footer">
+              <footer class="lyrics-footer lyrics-line">
                 <div class="footer-content">
                   <span
                     class="source-info"
                     style="display: flex; align-items: center; gap: 8px;"
                   >
-                    Source: ${sourceLabel}
+                    <b style="font-weight: 750;">Source</b> ${sourceLabel}
                     ${(this.availableSources &&
                 this.availableSources.length > 1) ||
                 !this.hasFetchedAllProviders
@@ -3851,15 +3928,25 @@ let AmLyrics$1 = class AmLyrics extends i {
                         `
                 : ''}
                   </span>
-                  <span class="version-info">
-                    v${VERSION} •
+                  ${this.songwriters
+                ? b `<span
+                        class="songwriters-info"
+                        style="margin-top: 4px; font-weight: normal; font-size: 0.9em;"
+                      >
+                        <b style="font-weight: 750;">Songwriters</b> ${this
+                    .songwriters}
+                      </span>`
+                : ''}
+                  <span class="version-info" style="margin-top: 8px;">
+                    <b style="font-weight: 750;">am-lyrics</b> v${VERSION} •
 
                     <a
                       href="https://github.com/uimaxbai/apple-music-web-components"
                       target="_blank"
                       rel="noopener noreferrer"
-                      >Star me on GitHub</a
-                    >
+                      style="display: inline-flex; align-items: center; gap: 4px;"
+                      >Star me on GitHub
+                    </a>
                   </span>
                 </div>
               </footer>
@@ -3896,6 +3983,7 @@ AmLyrics$1.styles = i$3 `
       --lyplus-font-size-base: 32px;
       --lyplus-font-size-base-grow: 24.5;
       --lyplus-font-size-subtext: 0.6em;
+      --char-rise-y: calc(-0.035 * var(--lyplus-font-size-base));
 
       --lyplus-blur-amount: 0.07em;
       --lyplus-blur-amount-near: 0.035em;
@@ -3929,7 +4017,6 @@ AmLyrics$1.styles = i$3 `
       -webkit-overflow-scrolling: touch;
       box-sizing: border-box;
       scrollbar-width: none;
-      transform: translateZ(0);
     }
 
     .lyrics-container::-webkit-scrollbar {
@@ -3940,11 +4027,13 @@ AmLyrics$1.styles = i$3 `
     .lyrics-container.touch-scrolling .lyrics-line,
     .lyrics-container.touch-scrolling .lyrics-plus-metadata {
       transition: none !important;
+      filter: none !important;
     }
 
     /* Apply smooth gliding transition for mouse-wheel scrolling */
     .lyrics-container.wheel-scrolling .lyrics-line {
       transition: transform 0.3s ease-out !important;
+      filter: none !important;
     }
 
     .lyrics-line.scroll-animate {
@@ -3971,18 +4060,13 @@ AmLyrics$1.styles = i$3 `
       font-size: var(--lyplus-font-size-base);
       cursor: pointer;
       transform-origin: left;
-      transform: translateZ(1px);
       transition:
         opacity 0.3s ease,
         transform 0.4s cubic-bezier(0.41, 0, 0.12, 0.99)
           var(--lyrics-line-delay, 0ms),
         filter 0.3s ease;
-      will-change: transform, filter, opacity;
       content-visibility: auto;
       text-rendering: optimizeLegibility;
-      overflow-wrap: break-word;
-      mix-blend-mode: lighten;
-      border-radius: var(--lyplus-border-radius-base);
     }
 
     .lyrics-line:not(.scroll-animate) {
@@ -4002,8 +4086,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);
-      will-change: transform;
+      transform: scale3d(1.001, 1.001, 1) translateZ(0);
       transition:
         transform 0.5s ease,
         background-color 0.18s,
@@ -4048,12 +4131,10 @@ AmLyrics$1.styles = i$3 `
     .lyrics-line.active {
       opacity: 1;
       color: var(--lyplus-text-primary);
-      will-change: transform, opacity;
     }
 
     .lyrics-line.pre-active {
       opacity: 1;
-      will-change: transform, opacity;
     }
 
     .lyrics-line.singer-right {
@@ -4067,6 +4148,18 @@ AmLyrics$1.styles = i$3 `
 
     .lyrics-line.rtl-text {
       direction: rtl;
+      text-align: right !important;
+      transform-origin: right;
+    }
+
+    .lyrics-line.rtl-text .lyrics-line-container,
+    .lyrics-line.rtl-text .main-vocal-container {
+      transform-origin: right;
+    }
+
+    .lyrics-line.rtl-text .lyrics-romanization-container,
+    .lyrics-line.rtl-text .lyrics-translation-container {
+      text-align: right;
     }
 
     /* --- Unsynced (Plain Text) Lyrics Overrides --- */
@@ -4098,7 +4191,8 @@ AmLyrics$1.styles = i$3 `
 
     @media (hover: hover) and (pointer: fine) {
       .lyrics-line:hover {
-        background: var(--hover-background-color, rgba(255, 255, 255, 0.13));
+        filter: none !important;
+        opacity: 1 !important;
       }
       .lyrics-container.is-unsynced .lyrics-line:hover {
         background: transparent !important;
@@ -4128,6 +4222,7 @@ AmLyrics$1.styles = i$3 `
 
     /* Unblur all lines when user is scrolling */
     .lyrics-container.user-scrolling .lyrics-line {
+      transition: none !important;
       filter: none !important;
       opacity: 0.8 !important;
     }
@@ -4144,6 +4239,7 @@ AmLyrics$1.styles = i$3 `
     .lyrics-word:not(.allow-break) {
       display: inline-block;
       vertical-align: baseline;
+      white-space: nowrap;
     }
 
     .lyrics-word.allow-break {
@@ -4154,7 +4250,7 @@ AmLyrics$1.styles = i$3 `
       display: inline;
     }
 
-    .lyrics-syllable-wrap:has(.lyrics-syllable.transliteration) {
+    .lyrics-syllable-wrap.has-transliteration {
       display: inline-flex;
       flex-direction: column;
       align-items: start;
@@ -4182,7 +4278,7 @@ AmLyrics$1.styles = i$3 `
       transition: transform 1s ease !important;
     }
 
-    .lyrics-syllable.finished:has(.char) {
+    .lyrics-syllable.finished.has-chars {
       background-color: transparent;
     }
 
@@ -4191,19 +4287,16 @@ AmLyrics$1.styles = i$3 `
     }
 
     .lyrics-line.active:not(.lyrics-gap) .lyrics-syllable {
-      transform: translateY(0.001%) translateZ(1px);
       transition:
         transform 1s ease,
         background-color 0.5s,
         color 0.5s;
-      will-change: transform, background;
     }
 
     /* --- Wipe Highlight Effect --- */
+    .lyrics-line.active:not(.lyrics-gap) .lyrics-syllable.highlight.no-chars,
     .lyrics-line.active:not(.lyrics-gap)
-      .lyrics-syllable.highlight:not(:has(.char)),
-    .lyrics-line.active:not(.lyrics-gap)
-      .lyrics-syllable.pre-highlight:not(:has(.char)) {
+      .lyrics-syllable.pre-highlight.no-chars {
       background-repeat: no-repeat;
       background-image:
         linear-gradient(
@@ -4245,11 +4338,19 @@ AmLyrics$1.styles = i$3 `
         right;
     }
 
+    /* Non-growable words float up with a gentle curve */
     .lyrics-line.active:not(.lyrics-gap)
       .lyrics-word:not(.growable)
-      .lyrics-syllable.highlight,
+      .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-word.growable .lyrics-syllable.cleanup .char {
-      transform: translateY(-3.5%) translateZ(1px);
+      transform: translateY(-3.5%);
     }
 
     .lyrics-line.active:not(.lyrics-gap) .lyrics-syllable.highlight.finished {
@@ -4276,7 +4377,7 @@ AmLyrics$1.styles = i$3 `
     }
 
     /* Syllable with chars: make syllable transparent, chars handle color */
-    .lyrics-line .lyrics-syllable:has(span.char):not(.finished) {
+    .lyrics-line .lyrics-syllable.has-chars:not(.finished) {
       background-color: transparent;
       color: transparent;
     }
@@ -4289,6 +4390,7 @@ AmLyrics$1.styles = i$3 `
       font-feature-settings: 'liga' 0;
       background-clip: text;
       -webkit-background-clip: text;
+      backface-visibility: hidden;
       transition:
         color 0.7s,
         background-color 0.7s,
@@ -4324,11 +4426,9 @@ AmLyrics$1.styles = i$3 `
         -0.5em 0%,
         -0.25em 0%;
       transform-origin: 50% 80%;
-      transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
       transition:
         transform 0.7s ease,
         color 0.18s;
-      will-change: background, transform;
     }
 
     .lyrics-line.active .lyrics-syllable span.char.highlight {
@@ -4380,6 +4480,8 @@ AmLyrics$1.styles = i$3 `
       box-sizing: content-box;
       background-clip: unset;
       transform-origin: top;
+      content-visibility: visible !important;
+      contain: none !important;
       transition:
         opacity 160ms ease-out,
         transform var(--scroll-duration, 280ms) var(--lyrics-line-delay, 0ms);
@@ -4390,41 +4492,35 @@ AmLyrics$1.styles = i$3 `
       transition:
         opacity 160ms ease-out,
         transform var(--scroll-duration, 280ms);
-      will-change: opacity;
     }
 
     /* Exiting state: quickly collapse width and height so dots don't distort page, or remove max-height transition */
     .lyrics-gap.gap-exiting {
       opacity: 1;
-      transition: transform var(--scroll-duration, 280ms);
     }
 
     .lyrics-gap .main-vocal-container {
-      transform: translateY(-25%) scale(1) translateZ(0);
+      transform: translateY(-25%) scale(1);
       transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
     }
 
-    /* Jump animation plays during exit */
-    .lyrics-gap.gap-exiting .main-vocal-container {
-      animation: gap-ended var(--gap-exit-duration, 360ms)
-        cubic-bezier(0.33, 1, 0.68, 1) forwards;
-    }
-
     .lyrics-gap:not(.active):not(.gap-exiting) .main-vocal-container {
-      transform: translateY(-25%) scale(0) translateZ(0);
-    }
-
-    .lyrics-gap:not(.active):not(.gap-exiting)
-      .main-vocal-container
-      .lyrics-word {
-      animation-play-state: paused;
+      transform: translateY(-25%) scale(0);
     }
 
-    .lyrics-gap.active .main-vocal-container .lyrics-word {
+    /* Pulse — must come BEFORE .gap-exiting so exiting wins via specificity+order */
+    .lyrics-gap.active .main-vocal-container {
       animation: gap-loop var(--gap-pulse-duration, 4000ms) ease-in-out infinite
         alternate;
       animation-delay: var(--gap-loop-delay, 0ms);
-      will-change: transform;
+    }
+
+    /* Jump animation plays during exit — disable transition so animation wins.
+       Placed AFTER .active so it wins when both classes are present briefly. */
+    .lyrics-gap.gap-exiting .main-vocal-container {
+      animation: gap-ended var(--gap-exit-duration, 360ms)
+        cubic-bezier(0.33, 1, 0.68, 1) forwards;
+      transition: none !important;
     }
 
     .lyrics-gap .lyrics-syllable {
@@ -4475,20 +4571,17 @@ AmLyrics$1.styles = i$3 `
       background-clip: unset;
     }
 
-    .lyrics-gap.active .lyrics-syllable.highlight,
     .lyrics-gap.active .lyrics-syllable.finished,
-    .lyrics-gap.gap-exiting .lyrics-syllable,
-    .lyrics-gap:not(.active).post-active-line .lyrics-syllable,
-    .lyrics-gap:not(.active).lyrics-activest .lyrics-syllable {
+    .lyrics-gap.gap-exiting .lyrics-syllable.finished,
+    .lyrics-gap:not(.active):not(.gap-exiting).post-active-line
+      .lyrics-syllable,
+    .lyrics-gap:not(.active):not(.gap-exiting).lyrics-activest
+      .lyrics-syllable {
       background-color: var(--lyplus-text-primary);
       animation: none !important;
       opacity: 1;
     }
 
-    .lyrics-gap.active .lyrics-syllable.finished {
-      animation: none !important;
-    }
-
     /* ==========================================================================
        METADATA & FOOTER STYLES
        ========================================================================== */
@@ -4517,12 +4610,49 @@ AmLyrics$1.styles = i$3 `
       align-items: center;
       flex-wrap: wrap;
       text-align: left;
-      font-size: 0.8em;
-      color: rgba(255, 255, 255, 0.5);
-      padding: 10px 0;
-      border-top: 1px solid rgba(255, 255, 255, 0.1);
+      font-size: 1.2em;
+      color: rgba(255, 255, 255, 0.6);
+      padding: 20px 0 50vh 0;
       margin-top: 10px;
-      font-weight: normal;
+      font-weight: 400;
+      opacity: 0.8;
+      transition:
+        opacity 0.3s ease,
+        transform 0.5s cubic-bezier(0.41, 0, 0.12, 0.99),
+        filter 0.3s ease;
+      transform-origin: left;
+    }
+
+    .lyrics-footer.lyrics-line {
+      font-size: 1.2em;
+      padding: 20px var(--lyplus-padding-line) 50vh var(--lyplus-padding-line);
+      cursor: default;
+    }
+
+    .lyrics-footer.active {
+      opacity: 1;
+      color: rgba(255, 255, 255, 0.5); /* Grey instead of primary */
+    }
+
+    .lyrics-footer.scroll-animate {
+      transition: none !important;
+      animation-name: lyrics-scroll;
+      animation-duration: var(--scroll-duration, 280ms);
+      animation-timing-function: cubic-bezier(0.41, 0, 0.12, 0.99);
+      animation-fill-mode: both;
+      animation-delay: var(--lyrics-line-delay, 0ms);
+    }
+
+    .lyrics-container.blur-inactive-enabled:not(.not-focused)
+      .lyrics-footer:not(.active) {
+      filter: blur(var(--lyplus-blur-amount));
+      opacity: 0.5;
+    }
+
+    .lyrics-container.user-scrolling .lyrics-footer {
+      transition: none !important;
+      filter: none !important;
+      opacity: 0.8 !important;
     }
 
     .lyrics-footer p {
@@ -4530,12 +4660,14 @@ AmLyrics$1.styles = i$3 `
     }
 
     .lyrics-footer a {
-      color: rgba(255, 255, 255, 0.7);
-      text-decoration: none;
+      color: var(--lyplus-text-primary); /* Stand out using primary color */
+      text-underline-offset: 2px;
+      opacity: 0.8;
+      transition: opacity 0.2s;
     }
 
     .lyrics-footer a:hover {
-      text-decoration: underline;
+      opacity: 1;
     }
 
     .footer-content {
@@ -4659,6 +4791,7 @@ AmLyrics$1.styles = i$3 `
 
     .lyrics-romanization-container.rtl-text {
       direction: rtl !important;
+      text-align: right;
     }
 
     .lyrics-romanization-container .lyrics-syllable {
@@ -4872,23 +5005,22 @@ AmLyrics$1.styles = i$3 `
     /* Gap dot animations */
     @keyframes gap-loop {
       from {
-        transform: scale(1.12);
+        transform: translateY(-25%) scale(1.12);
       }
       to {
-        transform: scale(var(--gap-exit-scale, 0.85));
+        transform: translateY(-25%) scale(var(--gap-exit-scale, 0.85));
       }
     }
 
     @keyframes gap-ended {
       0% {
-        transform: translateY(-25%) scale(var(--gap-exit-scale, 0.85))
-          translateZ(0);
+        transform: translateY(-25%) scale(var(--gap-exit-scale, 0.85));
       }
       35% {
-        transform: translateY(-5%) scale(1.08) translateZ(0);
+        transform: translateY(-25%) scale(1.2);
       }
       100% {
-        transform: translateY(-25%) scale(0) translateZ(0);
+        transform: translateY(-25%) scale(0);
       }
     }
 
@@ -4905,17 +5037,18 @@ AmLyrics$1.styles = i$3 `
        reflow in between) to reliably restart the animation each time */
     @keyframes lyrics-scroll {
       from {
-        transform: translateY(var(--scroll-delta)) translateZ(1px);
+        transform: translate3d(0, var(--scroll-delta), 0);
       }
       to {
-        transform: translateY(0) translateZ(1px);
+        transform: translate3d(0, 0, 0);
       }
     }
 
-    /* Character grow animation - exact copy from YouLyPlus */
+    /* Character grow animation — translate3d+scale3d for smooth transform,
+       drop-shadow for glow (text-shadow doesn't work with background-clip:text) */
     @keyframes grow-dynamic {
       0% {
-        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+        transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
         filter: drop-shadow(
           0 0 0
             color-mix(in srgb, var(--lyplus-lyrics-palette), transparent 100%)
@@ -4923,27 +5056,12 @@ AmLyrics$1.styles = i$3 `
       }
       25%,
       30% {
-        transform: matrix3d(
-          calc(var(--max-scale) * calc(var(--lyplus-font-size-base-grow) / 25)),
-          0,
-          0,
-          0,
-          0,
-          calc(var(--max-scale) * calc(var(--lyplus-font-size-base-grow) / 25)),
-          0,
-          0,
-          0,
-          0,
-          1,
-          0,
-          calc(
-            var(--char-offset-x, 0) *
-              calc(var(--lyplus-font-size-base-grow) / 25)
-          ),
-          var(--translate-y-peak, -2),
-          0,
-          1
-        );
+        transform: translate3d(
+            var(--char-offset-x, 0px),
+            var(--translate-y-peak, -2px),
+            0
+          )
+          scale3d(var(--matrix-scale, 1.1), var(--matrix-scale, 1.1), 1);
         filter: drop-shadow(
           0 0 0.1em
             color-mix(
@@ -4953,8 +5071,10 @@ AmLyrics$1.styles = i$3 `
             )
         );
       }
+      75%,
       100% {
-        transform: translateY(-3.5%) translateZ(1px);
+        transform: translate3d(0, var(--char-rise-y, -1.12px), 0)
+          scale3d(1, 1, 1);
         filter: drop-shadow(
           0 0 0
             color-mix(in srgb, var(--lyplus-lyrics-palette), transparent 100%)
@@ -5086,15 +5206,15 @@ __decorate([
 __decorate([
     n({ type: String, attribute: 'song-album' })
 ], AmLyrics$1.prototype, "songAlbum", void 0);
+__decorate([
+    n({ type: String, attribute: 'songwriters' })
+], AmLyrics$1.prototype, "songwriters", void 0);
 __decorate([
     n({ type: Number, attribute: 'song-duration' })
 ], AmLyrics$1.prototype, "songDurationMs", void 0);
 __decorate([
     n({ type: String, attribute: 'highlight-color' })
 ], AmLyrics$1.prototype, "highlightColor", void 0);
-__decorate([
-    n({ type: String, attribute: 'hover-background-color' })
-], AmLyrics$1.prototype, "hoverBackgroundColor", void 0);
 __decorate([
     n({ type: String, attribute: 'font-family' })
 ], AmLyrics$1.prototype, "fontFamily", void 0);