style: make silk animation longer and more erratic

Increased duration to 25s with 7 irregularly spaced keyframe stops
to make the loop less predictable. WeeklyQ offset at -11s for
desync. Same CPU cost — still just background-position interpolation.

src/lib/components/views/DynamicSuggestView.svelte

@@ -409,13 +409,17 @@
       radial-gradient(ellipse at 20% 80%, rgba(255, 140, 0, 0.5) 0%, transparent 60%),
       linear-gradient(135deg, #e8a020 0%, #d4781a 30%, #c45e18 60%, #a04010 100%);
     background-size: 200% 200%;
-    animation: silk-shift 10s ease-in-out infinite alternate;
+    animation: silk-shift 25s ease-in-out infinite alternate;
   }
 
   @keyframes silk-shift {
     0%   { background-position: 0% 0%; }
-    50%  { background-position: 100% 50%; }
+    14%  { background-position: 80% 25%; }
-    100% { background-position: 30% 100%; }
+    31%  { background-position: 20% 70%; }
+    47%  { background-position: 95% 40%; }
+    62%  { background-position: 10% 90%; }
+    78%  { background-position: 65% 15%; }
+    100% { background-position: 35% 60%; }
   }
 
   .metadata {

src/lib/components/views/HomeView.svelte

@@ -1886,7 +1886,7 @@
       radial-gradient(ellipse at 20% 80%, rgba(255, 140, 0, 0.5) 0%, transparent 60%),
       linear-gradient(135deg, #e8a020 0%, #d4781a 30%, #c45e18 60%, #a04010 100%);
     background-size: 200% 200%;
-    animation: silk-shift 10s ease-in-out infinite alternate;
+    animation: silk-shift 25s ease-in-out infinite alternate;
   }
 
   .mix-gradient-weekly {
@@ -1898,14 +1898,18 @@
       radial-gradient(ellipse at 20% 70%, rgba(130, 80, 200, 0.5) 0%, transparent 60%),
       linear-gradient(135deg, #b060d0 0%, #8040b0 30%, #6030a0 60%, #402080 100%);
     background-size: 200% 200%;
-    animation: silk-shift 10s ease-in-out infinite alternate;
+    animation: silk-shift 25s ease-in-out infinite alternate;
-    animation-delay: -5s;
+    animation-delay: -11s;
   }
 
   @keyframes silk-shift {
     0%   { background-position: 0% 0%; }
-    50%  { background-position: 100% 50%; }
+    14%  { background-position: 80% 25%; }
-    100% { background-position: 30% 100%; }
+    31%  { background-position: 20% 70%; }
+    47%  { background-position: 95% 40%; }
+    62%  { background-position: 10% 90%; }
+    78%  { background-position: 65% 15%; }
+    100% { background-position: 35% 60%; }
   }
 
   .mix-card-badge {

src/lib/components/views/WeeklySuggestView.svelte

@@ -409,13 +409,17 @@
       radial-gradient(ellipse at 20% 70%, rgba(130, 80, 200, 0.5) 0%, transparent 60%),
       linear-gradient(135deg, #b060d0 0%, #8040b0 30%, #6030a0 60%, #402080 100%);
     background-size: 200% 200%;
-    animation: silk-shift 10s ease-in-out infinite alternate;
+    animation: silk-shift 25s ease-in-out infinite alternate;
   }
 
   @keyframes silk-shift {
     0%   { background-position: 0% 0%; }
-    50%  { background-position: 100% 50%; }
+    14%  { background-position: 80% 25%; }
-    100% { background-position: 30% 100%; }
+    31%  { background-position: 20% 70%; }
+    47%  { background-position: 95% 40%; }
+    62%  { background-position: 10% 90%; }
+    78%  { background-position: 65% 15%; }
+    100% { background-position: 35% 60%; }
   }
 
   .metadata {