update splash screen

src/routes/+layout.svelte

@@ -18,6 +18,7 @@
 
   let { children } = $props();
   let showSplash = $state(true);
+  let closingSplash = $state(false);
   let currentError = $state<AppError | null>(null);
   let showInstallPrompt = $state(false);
   let deferredPrompt: Event | undefined = $state(undefined);
@@ -45,7 +46,10 @@
 
   onMount(() => {
     setTimeout(() => {
-      showSplash = false;
+      closingSplash = true;
+      setTimeout(() => {
+        showSplash = false;
+      }, 1000);
     }, 3000);
 
     window.addEventListener("error", (event: ErrorEvent) => {
@@ -89,34 +93,141 @@
   <title>Portal BTC</title>
 </svelte:head>
 
-{#if showInstallPrompt && deferredPrompt}
-  <InstallPrompt onInstall={handleInstallClick} />
-{:else if showSplash}
-  <SplashScreen />
-{:else}
-  <main class="app-wrapper">
-    {#if showSettingsButton}
-      <div class="settings-button-container">
-        <button class="retro-btn settings-btn" onclick={goToSettings}>
-          <iconify-icon icon="mdi:cog" width="16" height="16"></iconify-icon>
-          Settings
-        </button>
-      </div>
-    {/if}
-
-    {#if isOnSetup || $walletState.open}
-      {@render children()}
-    {/if}
-  </main>
-
-  {#if !$walletState.open && !isOnSetup}
+<div class="retro-shader">
+  {#if showInstallPrompt && deferredPrompt}
+    <InstallPrompt onInstall={handleInstallClick} />
+  {:else if showSplash}
+    <SplashScreen closing={closingSplash} />
+  {:else if !$walletState.open && !isOnSetup}
     <PasswordDialog onunlock={() => startNwc()} />
-  {/if}
-{/if}
+  {:else}
+    <main class="app-wrapper">
+      {#if showSettingsButton}
+        <div class="settings-button-container">
+          <button class="retro-btn settings-btn" onclick={goToSettings}>
+            <iconify-icon icon="mdi:cog" width="16" height="16"></iconify-icon>
+            Settings
+          </button>
+        </div>
+      {/if}
 
-<ErrorDialog error={currentError} onclose={() => (currentError = null)} />
+      {@render children()}
+    </main>
+  {/if}
+
+  <ErrorDialog error={currentError} onclose={() => (currentError = null)} />
+</div>
 
 <style>
+  @keyframes flicker {
+    0% {
+      opacity: 0.27861;
+    }
+    5% {
+      opacity: 0.34769;
+    }
+    10% {
+      opacity: 0.23604;
+    }
+    15% {
+      opacity: 0.90626;
+    }
+    20% {
+      opacity: 0.18128;
+    }
+    25% {
+      opacity: 0.83891;
+    }
+    30% {
+      opacity: 0.65583;
+    }
+    35% {
+      opacity: 0.67807;
+    }
+    40% {
+      opacity: 0.26559;
+    }
+    45% {
+      opacity: 0.84693;
+    }
+    50% {
+      opacity: 0.96019;
+    }
+    55% {
+      opacity: 0.08594;
+    }
+    60% {
+      opacity: 0.20313;
+    }
+    65% {
+      opacity: 0.71988;
+    }
+    70% {
+      opacity: 0.53455;
+    }
+    75% {
+      opacity: 0.37288;
+    }
+    80% {
+      opacity: 0.71428;
+    }
+    85% {
+      opacity: 0.70428;
+    }
+    90% {
+      opacity: 0.7003;
+    }
+    95% {
+      opacity: 0.36108;
+    }
+    100% {
+      opacity: 0.24387;
+    }
+  }
+
+  .retro-shader {
+    position: relative;
+    height: 100vh;
+  }
+
+  .retro-shader::before {
+    content: " ";
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    background:
+      linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),
+      linear-gradient(
+        90deg,
+        rgba(255, 0, 0, 0.06),
+        rgba(0, 255, 0, 0.02),
+        rgba(0, 0, 255, 0.06)
+      );
+    z-index: 2000;
+    background-size:
+      100% 2px,
+      3px 100%;
+    pointer-events: none;
+  }
+
+  .retro-shader::after {
+    content: " ";
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    background: rgba(18, 16, 16, 0.1);
+    opacity: 0;
+    z-index: 2001;
+    pointer-events: none;
+    animation: flicker 0.15s infinite;
+  }
+
   .settings-button-container {
     position: absolute;
     top: 1rem;