Enhance lyrics display: add transition effects, manage opacity, and improve styling for empty state

src/assets/styles/player.css

@@ -239,11 +239,14 @@ body {
 }
 
 .lrc-text {
+  opacity: 1;
+  pointer-events: auto;
+  transition: opacity 0.3s ease;
   max-height: 125px;           /* limit block height */
   max-width: 100%;
   overflow-y: auto;            /* scroll if lyrics exceed height */
   margin-top: 1rem;
-  padding: 0 1rem;
+  padding: 0 1rem 1rem;
   text-align: center;
   font-family: "Mukta", sans-serif;
   font-size: 0.85rem;
@@ -256,6 +259,12 @@ body {
   box-sizing: border-box;
   scrollbar-width: thin;       /* Firefox thinner scrollbar */
   scrollbar-color: #999 transparent;
+  scroll-padding-bottom: 1rem;
+}
+
+.lrc-text.empty {
+  opacity: 0;          /* fully transparent */
+  pointer-events: none; /* disable interaction */
 }
 
 .lrc-text::-webkit-scrollbar {
@@ -296,3 +305,7 @@ body {
   color: #4fa2ff;
   text-decoration: dotted underline;
 }
+
+.lrc-line:last-child {
+  margin-bottom: 0.5rem; /* or 0.75rem */
+}

src/components/AudioPlayer.jsx

@@ -273,7 +273,7 @@ export function Player() {
                 style={{ width: `${(elapsedTime / trackDuration) * 100}%` }}
               />
             </div>
-            <div className="lrc-text">
+            <div className={`lrc-text ${lyrics.length === 0 ? 'empty' : ''}`}>
               {lyrics.map((lyricObj, index) => (
                 <p
                   key={index}
@@ -283,6 +283,7 @@ export function Player() {
                 </p>
               ))}
             </div>
+
             <div className="music-control">
               <div
                 className="music-control__play"