fix inactive lyric color and slow down transitions

src/renderer/features/lyrics/karaoke-lyric-line.module.css

@@ -10,8 +10,10 @@
     opacity: var(--lyric-opacity);
     transform: scale(var(--lyric-scale));
     transform-origin: var(--lyric-scale-origin) center;
-    transition: transform 0.166s var(--karaoke-anim-delay, 0s);
-    will-change: transform;
+    transition:
+        opacity 0.4s ease-in-out,
+        transform 0.4s ease-in-out;
+    will-change: opacity, transform;
 }
 
 .karaoke-line:global(.lyrics-line-active),

src/renderer/features/lyrics/lyric-line.module.css

@@ -7,8 +7,10 @@
     opacity: var(--lyric-opacity);
     transform: scale(var(--lyric-scale));
     transform-origin: var(--lyric-scale-origin) center;
-    transition: transform 0.166s var(--karaoke-anim-delay, 0s);
-    will-change: transform;
+    transition:
+        opacity 0.4s ease-in-out,
+        transform 0.4s ease-in-out;
+    will-change: opacity, transform;
 }
 
 .lyric-line:global(.lyrics-line-active),

src/renderer/features/lyrics/styles/karaoke-animation.css

@@ -11,23 +11,12 @@
     initial-value: 0;
 }
 
-/* Past (sung) lines stay fully visible */
-.synchronized-karaoke-lyrics:has(.lyrics-line-active)
-    :is(.karaoke-line, .lyric-line):not(
-        .lyrics-line-active,
-        .lyrics-line-active ~ :is(.karaoke-line, .lyric-line)
-    ) {
-    opacity: 1;
-    filter: none;
-}
-
 .synchronized-karaoke-lyrics :is(.karaoke-line, .lyric-line).lyrics-line-active {
     opacity: 1 !important;
 }
 
 .synchronized-karaoke-lyrics:has(.lyrics-line-active)
-    :is(.karaoke-line, .lyric-line).lyrics-line-active
-    ~ :is(.karaoke-line, .lyric-line) {
+    :is(.karaoke-line, .lyric-line):not(.lyrics-line-active) {
     opacity: var(--lyric-opacity, 0.3);
 }
 
@@ -54,7 +43,7 @@
     vertical-align: baseline;
 }
 
-.karaoke-word.sung {
+:is(.karaoke-line, .lyric-line).lyrics-line-active .karaoke-word.sung {
     color: var(--theme-colors-foreground);
 }
 
@@ -143,7 +132,7 @@
     );
 }
 
-.karaoke-word.sung .karaoke-word-highlight {
+:is(.karaoke-line, .lyric-line).lyrics-line-active .karaoke-word.sung .karaoke-word-highlight {
     opacity: 1;
     transition: none;
 

src/renderer/features/lyrics/styles/synchronized-lyrics-animation.css

@@ -1,15 +1,8 @@
-/* Past (sung) lines stay fully visible */
-.synchronized-lyrics:has(.lyrics-line-active)
-    .lyric-line:not(.lyrics-line-active, .lyrics-line-active ~ .lyric-line) {
-    opacity: 1;
-    filter: none;
-}
-
 .synchronized-lyrics .lyric-line.lyrics-line-active {
     opacity: 1 !important;
 }
 
-.synchronized-lyrics:has(.lyrics-line-active) .lyric-line.lyrics-line-active ~ .lyric-line {
+.synchronized-lyrics:has(.lyrics-line-active) .lyric-line:not(.lyrics-line-active) {
     opacity: var(--lyric-opacity, 0.3);
 }