From 646f2e511b36a049f25b1c1e4ed83b3f30b09ba8 Mon Sep 17 00:00:00 2001
From: cottongin <cottongin@users.noreply.github.com>
Date: Wed, 23 Sep 2026 02:21:56 -0400
Subject: [PATCH] fix: raise controls to 64px, smooth blur via ::before
 pseudo-element

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 src/lib/components/PlayerControls.svelte | 22 +++++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/PlayerControls.svelte b/src/lib/components/PlayerControls.svelte
index 6d1c3e3..9d1ddf8 100644
--- a/src/lib/components/PlayerControls.svelte
+++ b/src/lib/components/PlayerControls.svelte
@@ -277,7 +277,7 @@
 <style>
   .player-controls-overlay {
     position: absolute;
-    bottom: 48px;
+    bottom: 64px;
     left: 15%;
     right: 15%;
     pointer-events: none;
@@ -293,8 +293,7 @@
 
   .player-controls-panel {
     pointer-events: auto;
-    background: rgba(0, 0, 0, 0.75);
-    backdrop-filter: blur(8px);
+    position: relative;
     border-radius: 12px;
     padding: 12px 16px;
     display: flex;
@@ -302,6 +301,23 @@
     gap: 8px;
   }
 
+  .player-controls-panel::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.75);
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
+    border-radius: 12px;
+    z-index: -1;
+    opacity: 0;
+    transition: opacity 0.25s ease;
+  }
+
+  .player-controls-overlay.visible .player-controls-panel::before {
+    opacity: 1;
+  }
+
   /* --- Seek bar --- */
   .seek-bar {
     width: 100%;