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 />
+    {#key 'dashboard'}
-    <SharesBar />
+      <div class="page-enter">
-    <HashrateChart />
+        <PoolOverview />
-    <BlocksTable />
+        <SharesBar />
-    <BestShares />
+        <HashrateChart />
-    <MinersTable />
+        <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>

ui/src/lib/AcceleratorPage.svelte

@@ -21,6 +21,7 @@
   let boostedList = $state<BoostedTx[]>([]);
   let loadingMax = $state(false);
 
+
   const feerate = $derived(parseFloat(feerateInput) || 0);
   const validTxid = $derived(/^[0-9a-fA-F]{64}$/.test(txid.trim()));
   const overCap = $derived(feerate > 2000);
@@ -310,8 +311,10 @@
   </section>
 </section>
 
+
 <style>
   .page {
+    position: relative;
     display: flex;
     flex-direction: column;
     gap: 1.5rem;
@@ -406,13 +409,18 @@
 
   /* ── Boost form ── */
   .boost-form {
+    position: relative;
+    overflow: hidden;
     padding: 2rem;
   }
   .boost-form h3 {
+    position: relative;
+    z-index: 1;
     margin: 0 0 1.5rem;
     font-size: 1.3rem;
     font-weight: 700;
   }
+
   .field {
     margin-bottom: 1.5rem;
   }

ui/src/lib/MinersTable.svelte

@@ -133,7 +133,7 @@
                     title="View per-worker stats"
                   >{r.workerName}</button>
                   {#if r.tls}
-                    <span class="badge tls" title="Connected via TLS">
+                    <span class="badge tls" title="Encrypted connection via TLS">
                       <svg viewBox="0 0 16 16" aria-hidden="true">
                         <path d="M8 1a3.5 3.5 0 0 0-3.5 3.5V7H4a1.5 1.5 0 0 0-1.5 1.5v5A1.5 1.5 0 0 0 4 15h8a1.5 1.5 0 0 0 1.5-1.5v-5A1.5 1.5 0 0 0 12 7h-.5V4.5A3.5 3.5 0 0 0 8 1Zm2 6H6V4.5a2 2 0 1 1 4 0V7Z"/>
                       </svg>
@@ -154,7 +154,7 @@
               <td>
                 {r.hardware}
                 {#if r.openSource}
-                  <span class="oss" title="Open source hardware or firmware">★</span>
+                  <span class="oss" title="Open source hardware and firmware">★</span>
                 {/if}
               </td>
               <td class="num">{formatHashrate(r.hashrate1m)}</td>

ui/src/lib/SharesBar.svelte

@@ -83,7 +83,7 @@
     position: relative;
     z-index: 1;
     display: flex;
-    align-items: center;
+    align-items: baseline;
     justify-content: center;
     gap: 2rem;
   }

ui/src/lib/UserDetailPage.svelte

@@ -232,7 +232,7 @@
                       title="View per-worker stats"
                     >{r.worker}</button>
                     {#if r.tls}
-                      <span class="badge tls" title="Connected via TLS">
+                      <span class="badge tls" title="Encrypted connection via TLS">
                         <svg viewBox="0 0 16 16" aria-hidden="true">
                           <path d="M8 1a3.5 3.5 0 0 0-3.5 3.5V7H4a1.5 1.5 0 0 0-1.5 1.5v5A1.5 1.5 0 0 0 4 15h8a1.5 1.5 0 0 0 1.5-1.5v-5A1.5 1.5 0 0 0 12 7h-.5V4.5A3.5 3.5 0 0 0 8 1Zm2 6H6V4.5a2 2 0 1 1 4 0V7Z"/>
                         </svg>
@@ -247,7 +247,7 @@
                 <td>
                   {r.hardware}
                   {#if r.openSource}
-                    <span class="oss" title="Open source hardware or firmware">★</span>
+                    <span class="oss" title="Open source hardware and firmware">★</span>
                   {/if}
                 </td>
                 <td>

ui/src/lib/WorkerDetailPage.svelte

@@ -88,7 +88,7 @@
         title="View per-user stats"
       >{btcAddress}</button>
       {#if tls}
-        <span class="badge tls" title="Connected via TLS">
+        <span class="badge tls" title="Encrypted connection via TLS">
           <svg viewBox="0 0 16 16" aria-hidden="true">
             <path d="M8 1a3.5 3.5 0 0 0-3.5 3.5V7H4a1.5 1.5 0 0 0-1.5 1.5v5A1.5 1.5 0 0 0 4 15h8a1.5 1.5 0 0 0 1.5-1.5v-5A1.5 1.5 0 0 0 12 7h-.5V4.5A3.5 3.5 0 0 0 8 1Zm2 6H6V4.5a2 2 0 1 1 4 0V7Z"/>
           </svg>
@@ -96,7 +96,7 @@
         </span>
       {/if}
       {#if openSource}
-        <span class="oss" title="Open source hardware or firmware">&#9733;</span>
+        <span class="oss" title="Open source hardware and firmware">&#9733;</span>
       {/if}
     </div>
   </header>