diff --git a/DeepDrftPublic.Client/Controls/DeepDrftHero.razor.css b/DeepDrftPublic.Client/Controls/DeepDrftHero.razor.css
index c15575a..9f3f0a4 100644
--- a/DeepDrftPublic.Client/Controls/DeepDrftHero.razor.css
+++ b/DeepDrftPublic.Client/Controls/DeepDrftHero.razor.css
@@ -4,6 +4,11 @@
     to { opacity: 1; transform: none; }
 }
 
+.fade-up {
+    opacity: 0;
+    animation: fade-up 0.8s ease forwards;
+}
+
 .hero-eyebrow {
     font-family: var(--deepdrft-font-mono);
     font-size: 0.65rem;
diff --git a/DeepDrftPublic.Client/Controls/NowPlaying.razor.css b/DeepDrftPublic.Client/Controls/NowPlaying.razor.css
index 403d4fc..7c3d150 100644
--- a/DeepDrftPublic.Client/Controls/NowPlaying.razor.css
+++ b/DeepDrftPublic.Client/Controls/NowPlaying.razor.css
@@ -1,3 +1,8 @@
+@keyframes pulse-ring {
+    0%, 100% { opacity: 0.15; transform: translate(-50%, -50%) scale(1); }
+    50% { opacity: 0.4; transform: translate(-50%, -50%) scale(1.03); }
+}
+
 .now-playing-content {
     position: relative;
     z-index: 2;
diff --git a/DeepDrftPublic.Client/Controls/NowPlayingCard.razor.css b/DeepDrftPublic.Client/Controls/NowPlayingCard.razor.css
index f8c122c..666032f 100644
--- a/DeepDrftPublic.Client/Controls/NowPlayingCard.razor.css
+++ b/DeepDrftPublic.Client/Controls/NowPlayingCard.razor.css
@@ -1,3 +1,13 @@
+@keyframes wave-dance {
+    from { height: var(--h-lo, 4px); }
+    to { height: var(--h-hi, 20px); }
+}
+
+@keyframes blink {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.3; }
+}
+
 .now-playing {
     background: rgba(250, 250, 248, 0.06);
     border: 1px solid rgba(250, 250, 248, 0.12);
diff --git a/DeepDrftPublic.Client/Pages/Home.razor.css b/DeepDrftPublic.Client/Pages/Home.razor.css
index 4d38607..3124603 100644
--- a/DeepDrftPublic.Client/Pages/Home.razor.css
+++ b/DeepDrftPublic.Client/Pages/Home.razor.css
@@ -1,30 +1,7 @@
 /* Home.razor scoped styles - wireframe-faithful marketing page. */
 
 /* ── Animations ── */
-@keyframes fade-up {
-    from { opacity: 0; transform: translateY(24px); }
-    to { opacity: 1; transform: none; }
-}
 
-@keyframes pulse-ring {
-    0%, 100% { opacity: 0.15; transform: translate(-50%, -50%) scale(1); }
-    50% { opacity: 0.4; transform: translate(-50%, -50%) scale(1.03); }
-}
-
-@keyframes blink {
-    0%, 100% { opacity: 1; }
-    50% { opacity: 0.3; }
-}
-
-@keyframes wave-dance {
-    from { height: var(--h-lo, 4px); }
-    to { height: var(--h-hi, 20px); }
-}
-
-.fade-up {
-    opacity: 0;
-    animation: fade-up 0.8s ease forwards;
-}
 
 /* ── HERO ── */
 .hero {