From 411236717530d636c80b12fb9021fde75dd1714f Mon Sep 17 00:00:00 2001
From: "alexei.dolgolyov" <dolgolyov.alexei@gmail.com>
Date: Fri, 27 Feb 2026 21:52:27 +0300
Subject: [PATCH] Add 3D album art rotation and vinyl desaturation effect

- Subtle oscillating Y/X rotation with perspective for depth
- Enhanced vinyl mode filter: more desaturation + sepia warmth

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 media_server/static/css/styles.css | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/media_server/static/css/styles.css b/media_server/static/css/styles.css
index c442b09..68733c1 100644
--- a/media_server/static/css/styles.css
+++ b/media_server/static/css/styles.css
@@ -492,6 +492,7 @@ h1 {
 .player-layout {
     display: flex;
     flex-direction: column;
+    perspective: 800px;
 }
 
 .player-details {
@@ -504,6 +505,13 @@ h1 {
     justify-content: center;
     margin-bottom: 2rem;
     position: relative;
+    transform-style: preserve-3d;
+    animation: albumArt3D 8s ease-in-out infinite;
+}
+
+@keyframes albumArt3D {
+    0%, 100% { transform: rotateY(-8deg) rotateX(2deg); }
+    50% { transform: rotateY(8deg) rotateX(-2deg); }
 }
 
 .album-art-glow {
@@ -546,7 +554,7 @@ h1 {
     width: 210px;
     height: 210px;
     margin: 45px;
-    filter: saturate(0.8) brightness(0.92) contrast(1.05);
+    filter: saturate(0.55) sepia(0.12) brightness(0.92) contrast(1.08);
     box-shadow:
         0 0 0 3px var(--vinyl-groove),
         0 0 0 5px var(--vinyl-ring),