Add page transition animations and background wallpapers

Wrap page views in {#key} blocks with a fade-in animation for smooth
transitions. Add Demon Slayer wallpapers as fixed pseudo-element
backgrounds on main (Tanjiro for dashboard, Rengoku for accelerator)
with CSS crossfade. Fix section spacing lost by the page-enter wrapper
div. Minor tooltip text fixes.

ui/src/App.svelte

@@ -20,7 +20,7 @@
   });
 </script>
 
-<main>
+<main class:no-bg={selection.page === "accelerator"}>
   <Header />
 
   {#if snap.data}
@@ -28,7 +28,7 @@
   {/if}
 
   {#if !snap.data}
-    <div class="card placeholder">
+    <div class="card placeholder page-enter">
       <div class="stat-label">Status</div>
       <div class="stat-value">Connecting to kamado-api…</div>
       {#if snap.error}
@@ -36,18 +36,34 @@
       {/if}
     </div>
   {:else if selection.page === "accelerator"}
-    <AcceleratorPage />
+    {#key 'accelerator'}
+      <div class="page-enter">
+        <AcceleratorPage />
+      </div>
+    {/key}
   {:else if selection.worker}
-    <WorkerDetailPage />
+    {#key selection.worker}
+      <div class="page-enter">
+        <WorkerDetailPage />
+      </div>
+    {/key}
   {:else if selection.user}
-    <UserDetailPage />
+    {#key selection.user}
+      <div class="page-enter">
+        <UserDetailPage />
+      </div>
+    {/key}
   {:else}
-    <PoolOverview />
-    <SharesBar />
-    <HashrateChart />
-    <BlocksTable />
-    <BestShares />
-    <MinersTable />
+    {#key 'dashboard'}
+      <div class="page-enter">
+        <PoolOverview />
+        <SharesBar />
+        <HashrateChart />
+        <BlocksTable />
+        <BestShares />
+        <MinersTable />
+      </div>
+    {/key}
   {/if}
 </main>
 
@@ -55,6 +71,7 @@
 
 <style>
   main {
+    position: relative;
     max-width: 1280px;
     margin: 0 auto;
     padding: 1.5rem 1.25rem 4rem;
@@ -62,10 +79,52 @@
     flex-direction: column;
     gap: 1.25rem;
   }
+  main::before {
+    content: '';
+    position: fixed;
+    inset: 0;
+    z-index: -1;
+    background: url('/tanjiro2.jpg') center center / cover no-repeat;
+    opacity: 0.12;
+    pointer-events: none;
+    transition: opacity 0.4s ease;
+  }
+  main.no-bg::before {
+    opacity: 0;
+  }
+  main::after {
+    content: '';
+    position: fixed;
+    inset: 0;
+    z-index: -1;
+    background: url('/rengoku1.jpg') center center / cover no-repeat;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.4s ease;
+  }
+  main.no-bg::after {
+    opacity: 0.30;
+  }
   .placeholder {
     text-align: center;
   }
   .bad {
     color: var(--bad);
   }
+  .page-enter {
+    display: flex;
+    flex-direction: column;
+    gap: 1.25rem;
+    animation: page-fade-in 0.3s ease-out;
+  }
+  @keyframes page-fade-in {
+    from {
+      opacity: 0;
+      transform: translateY(8px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
 </style>