fix: blur via visibility (no opacity), raise to 84px, enlarge center icons 50%

Co-authored-by: Cursor <cursoragent@cursor.com>

src/lib/components/PlayerControls.svelte

@@ -164,6 +164,7 @@
   aria-label="Player controls"
 >
   <div class="player-controls-panel">
+    <div class="panel-content">
       <!-- Controls row (top) -->
       <div class="controls-row">
         <!-- Left group: volume -->
@@ -194,19 +195,19 @@
             onclick={() => seekBy(-10)}
             title="Skip back 10s"
             type="button"
-        ><Rewind size={16} /></button>
+          ><Rewind size={24} /></button>
           <button
             class="ctrl-btn play-btn"
             onclick={togglePlayPause}
             title={session.isPlaying ? 'Pause' : 'Play'}
             type="button"
-        >{#if session.isPlaying}<Pause size={18} />{:else}<Play size={18} />{/if}</button>
+          >{#if session.isPlaying}<Pause size={27} />{:else}<Play size={27} />{/if}</button>
           <button
             class="ctrl-btn"
             onclick={() => seekBy(10)}
             title="Skip forward 10s"
             type="button"
-        ><FastForward size={16} /></button>
+          ><FastForward size={24} /></button>
         </div>
 
         <!-- Right group: settings -->
@@ -296,35 +297,32 @@
         <span class="time-display">{formatTime(session.duration)}</span>
       </div>
     </div>
+  </div>
 </div>
 
 <style>
+  /* --- Overlay: positioning + pointer-events only, NO opacity --- */
   .player-controls-overlay {
     position: absolute;
-    bottom: 64px;
+    bottom: 84px;
     left: 15%;
     right: 15%;
     pointer-events: none;
-    opacity: 0;
-    transition: opacity 0.2s ease 0.1s;
     z-index: 20;
   }
 
   .player-controls-overlay.visible {
-    opacity: 1;
+    pointer-events: auto;
-    transition-delay: 0.1s;
   }
 
+  /* --- Panel: layout shell --- */
   .player-controls-panel {
-    pointer-events: auto;
     position: relative;
     border-radius: 12px;
     padding: 12px 16px;
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
   }
 
+  /* Blur background — visibility toggle, never opacity-transition */
   .player-controls-panel::before {
     content: '';
     position: absolute;
@@ -334,12 +332,27 @@
     -webkit-backdrop-filter: blur(20px);
     border-radius: 12px;
     z-index: -1;
-    opacity: 0;
+    visibility: hidden;
-    transition: opacity 0.25s ease;
   }
 
   .player-controls-overlay.visible .player-controls-panel::before {
+    visibility: visible;
+  }
+
+  /* Content wrapper — fade + slide animation */
+  .panel-content {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    opacity: 0;
+    transform: translateY(6px);
+    transition: opacity 0.2s ease, transform 0.2s ease;
+  }
+
+  .player-controls-overlay.visible .panel-content {
     opacity: 1;
+    transform: translateY(0);
   }
 
   /* --- Seek bar --- */
@@ -457,8 +470,7 @@
   }
 
   .ctrl-btn.play-btn {
-    font-size: 20px;
+    min-width: 48px;
-    min-width: 40px;
   }
 
   /* --- Volume --- */