feat(vibe): visualize the listening profile

frontend/src/index.css

@@ -183,6 +183,68 @@ html { scroll-behavior: smooth; }
   border-radius: 4px;
 }
 
+/* Vibe's profile aura: a small, old-player-inspired creature whose color and
+   movement come from the active recommendation state. */
+@keyframes vibe-aura-pulse {
+  0%, 100% { transform: scale(var(--vibe-scale)) rotate(-7deg); filter: brightness(.9); }
+  50% { transform: scale(calc(var(--vibe-scale) * 1.12)) rotate(8deg); filter: brightness(1.28); }
+}
+@keyframes vibe-aura-orbit {
+  to { transform: rotate(360deg); }
+}
+@keyframes vibe-aura-spark {
+  0%, 100% { transform: translateY(0) scale(.75); opacity: .38; }
+  50% { transform: translateY(-5px) scale(1.15); opacity: 1; }
+}
+.vibe-aura-halo {
+  position: absolute;
+  inset: 7px;
+  border-radius: 9999px;
+  background: hsl(var(--vibe-hue) 88% 62% / .22);
+  filter: blur(12px);
+  animation: vibe-aura-pulse var(--vibe-pulse) ease-in-out infinite;
+}
+.vibe-aura-core {
+  position: relative;
+  width: 30px;
+  height: 36px;
+  border: 1px solid hsl(var(--vibe-hue) 95% 86% / .72);
+  border-radius: 46% 54% 58% 42% / 43% 45% 55% 57%;
+  background: radial-gradient(circle at 36% 28%, hsl(var(--vibe-hue) 100% 93%), hsl(var(--vibe-hue) 88% 61%) 38%, hsl(calc(var(--vibe-hue) + 35) 68% 31%) 100%);
+  box-shadow: inset 3px 2px 8px hsl(0 0% 100% / .34), 0 0 17px hsl(var(--vibe-hue) 92% 59% / .78);
+  animation: vibe-aura-pulse var(--vibe-pulse) ease-in-out infinite;
+}
+.vibe-aura-orbit {
+  position: absolute;
+  width: 47px;
+  height: 47px;
+  border: 1px solid hsl(var(--vibe-hue) 90% 76% / .36);
+  border-radius: 47% 53% 43% 57%;
+  animation: vibe-aura-orbit var(--vibe-orbit) linear infinite;
+}
+.vibe-aura-orbit-two {
+  width: 56px;
+  height: 37px;
+  border-color: hsl(calc(var(--vibe-hue) + 55) 90% 76% / .24);
+  animation-direction: reverse;
+  animation-duration: calc(var(--vibe-orbit) * 1.45);
+}
+.vibe-aura-heart,
+.vibe-aura-spark {
+  position: absolute;
+  display: block;
+  border-radius: 9999px;
+  background: hsl(0 0% 100% / .9);
+  box-shadow: 0 0 8px hsl(0 0% 100% / .92);
+}
+.vibe-aura-heart { width: 7px; height: 7px; left: 11px; top: 15px; }
+.vibe-aura-spark { width: 4px; height: 4px; animation: vibe-aura-spark 2.1s ease-in-out infinite; }
+.vibe-aura-spark-one { left: -4px; top: 5px; }
+.vibe-aura-spark-two { right: -3px; bottom: 7px; animation-delay: -1s; }
+@media (prefers-reduced-motion: reduce) {
+  .vibe-aura-halo, .vibe-aura-core, .vibe-aura-orbit, .vibe-aura-spark { animation: none; }
+}
+
 /* ── Component base classes ────────────────────────────────────────────────── */
 
 /* Card surface — standard container */