More to pulsing music player

src/styles.css

@@ -386,6 +386,10 @@ audio.hidden-audio {
   overflow: hidden;
 }
 
+.custom-player.idle {
+  background: radial-gradient(circle at top, rgba(20, 20, 20, 0.5), rgba(5, 6, 12, 0.95) 70%);
+}
+
 .custom-player::after {
   content: '';
   position: absolute;
@@ -400,39 +404,72 @@ audio.hidden-audio {
   height: 96px;
   border-radius: 50%;
   background: radial-gradient(circle at 30% 30%, #fbd72b, #f58b2b 60%, #1d3b8b);
-  transform: scale(calc(1 + var(--pulse, 0) * 0.22));
-  box-shadow: 0 0 calc(20px + var(--pulse, 0) * 60px) rgba(251, 215, 43, 0.35);
-  transition: transform 0.08s ease-out;
+  transform: scale(calc(1 + var(--pulse, 0) * 0.45));
+  box-shadow:
+    0 0 calc(18px + var(--pulse, 0) * 90px) rgba(251, 215, 43, 0.5),
+    0 0 calc(40px + var(--pulse, 0) * 160px) rgba(61, 214, 255, 0.35);
+  transition: transform 0.06s ease-out;
+  position: relative;
+  z-index: 2;
+}
+
+.pulse-orb.idle {
+  background: radial-gradient(circle at 40% 40%, #1a1a1a, #000 65%);
+  box-shadow: 0 0 12px rgba(0, 0, 0, 0.6);
+  transform: scale(1);
+}
+
+.pulse-orb.playing {
+  background: linear-gradient(
+    135deg,
+    #7df9ff,
+    #6c63ff,
+    #ff7ad9,
+    #ffd36a,
+    #7df9ff
+  );
+  background-size: 240% 240%;
+  animation: gradientShift 6s ease-in-out infinite;
+}
+
+.pulse-orb.answer {
+  background: radial-gradient(circle at 30% 30%, #6bff9f, #1ecb5a 65%, #0b5c2b);
+  box-shadow:
+    0 0 calc(18px + var(--pulse, 0) * 90px) rgba(43, 220, 123, 0.6),
+    0 0 calc(40px + var(--pulse, 0) * 160px) rgba(43, 220, 123, 0.3);
 }
 
 .pulse-orb.active {
   animation: pulseGlow 1.6s ease-in-out infinite;
 }
 
-.player-controls {
-  display: grid;
-  gap: 12px;
-  place-items: center;
+.pulse-rays {
+  position: absolute;
+  inset: -20%;
+  border-radius: 50%;
+  background:
+    conic-gradient(
+      from 0deg,
+      hsla(var(--ray-hue, 200), 90%, 70%, 0.3) 0deg,
+      transparent 30deg,
+      hsla(var(--ray-hue, 200), 90%, 70%, 0.45) 60deg,
+      transparent 95deg,
+      hsla(var(--ray-hue, 200), 90%, 70%, 0.25) 130deg,
+      transparent 170deg,
+      hsla(var(--ray-hue, 200), 90%, 70%, 0.35) 210deg,
+      transparent 250deg,
+      hsla(var(--ray-hue, 200), 90%, 70%, 0.4) 300deg,
+      transparent 340deg
+    );
+  opacity: calc(0.1 + var(--ray, 0) * 0.9);
+  filter: blur(6px);
+  transform: scale(calc(0.9 + var(--ray, 0) * 0.6));
+  transition: opacity 0.1s ease-out, transform 0.1s ease-out;
+  z-index: 1;
 }
 
-.player-meta {
-  text-align: center;
-  font-size: 0.85rem;
-  color: rgba(255, 255, 255, 0.7);
-}
-
-.player-meta .label {
-  text-transform: uppercase;
-  letter-spacing: 0.2em;
-  font-size: 0.65rem;
-  display: block;
-}
-
-.player-meta .value {
-  display: block;
-  color: #f6f4ef;
-  font-weight: 600;
-  margin-top: 4px;
+.pulse-rays.active {
+  animation: raySpin 6s linear infinite;
 }
 
 @keyframes pulseGlow {
@@ -445,6 +482,27 @@ audio.hidden-audio {
   }
 }
 
+@keyframes gradientShift {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+@keyframes raySpin {
+  from {
+    transform: scale(calc(0.9 + var(--ray, 0) * 0.6)) rotate(0deg);
+  }
+  to {
+    transform: scale(calc(0.9 + var(--ray, 0) * 0.6)) rotate(360deg);
+  }
+}
+
 .player-empty {
   color: rgba(255, 255, 255, 0.6);
 }