feat(web): polish catalog motion, empty states, and mobile now-playing

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

apps/web/src/pages/catalog.module.css

@@ -60,12 +60,23 @@
 
 .heroBg {
   position: absolute;
-  inset: 0;
-  opacity: 0.35;
+  inset: -20%;
+  opacity: 0.4;
   filter: blur(60px);
   pointer-events: none;
 }
 
+.heroBg img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.heroCover {
+  position: relative;
+  z-index: 1;
+}
+
 .tint {
   position: absolute;
   inset: 0;
@@ -81,12 +92,40 @@
 
 .heroBody {
   position: relative;
+  z-index: 1;
   display: flex;
   flex-direction: column;
   gap: 8px;
   min-width: 0;
 }
 
+.listen {
+  display: grid;
+  gap: 28px;
+}
+
+.listenLyrics {
+  min-width: 0;
+}
+
+@media (min-width: 900px) {
+  .listen {
+    grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
+    align-items: start;
+  }
+
+  .listen .hero {
+    flex-direction: column;
+    align-items: stretch;
+    margin: 0;
+    padding: 0;
+  }
+
+  .listen .heroTitle {
+    font-size: clamp(28px, 3vw, 40px);
+  }
+}
+
 .kind {
   font-size: 12px;
   font-weight: 700;