Fix: Local Source & QOL Animations

src/shared/chrome/AuthGate.svelte

@@ -16,7 +16,7 @@
 
 {#if boot.unsupportedMode}
   <div class="auth-overlay">
-    <div class="auth-card">
+    <div class="auth-card anim-scale-in">
       <img src={logoUrl} alt="Moku" class="auth-logo" />
       <p class="auth-title">moku</p>
       <span class="auth-mode-badge auth-mode-badge--warn">{
@@ -35,7 +35,7 @@
   </div>
 {:else if boot.loginRequired}
   <div class="auth-overlay">
-    <div class="auth-card">
+    <div class="auth-card anim-scale-in">
       <img src={logoUrl} alt="Moku" class="auth-logo" />
       <p class="auth-title">moku</p>
       <span class="auth-mode-badge">Basic Auth</span>
@@ -62,8 +62,7 @@
 
 <style>
   .auth-overlay { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; pointer-events: none; }
-  .auth-card { pointer-events: auto; width: min(280px, calc(100vw - 48px)); background: var(--bg-surface); border: 1px solid var(--border-base); border-radius: var(--radius-xl); padding: var(--sp-6) var(--sp-5); display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); box-shadow: 0 32px 80px rgba(0,0,0,0.75); animation: authIn 0.28s cubic-bezier(0.16,1,0.3,1) both; text-align: center; }
-  @keyframes authIn { from { opacity: 0; transform: translateY(10px) scale(0.97); } to { opacity: 1; transform: none; } }
+  .auth-card { pointer-events: auto; width: min(280px, calc(100vw - 48px)); background: var(--bg-surface); border: 1px solid var(--border-base); border-radius: var(--radius-xl); padding: var(--sp-6) var(--sp-5); display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); box-shadow: 0 32px 80px rgba(0,0,0,0.75); text-align: center; }
 
   .auth-logo { width: 56px; height: 56px; border-radius: 14px; display: block; }
   .auth-title { font-family: var(--font-ui); font-size: 11px; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; color: var(--text-secondary); margin: -6px 0 0; user-select: none; }

src/shared/chrome/Layout.svelte

@@ -42,8 +42,6 @@
 </div>
 
 <style>
-  :global(*, *::before, *::after) { scrollbar-width: none; }
-  :global(*::-webkit-scrollbar) { display: none; }
   .frame { display: flex; padding: 6px 15px 15px; width: 100%; height: 100%; box-sizing: border-box; overflow: hidden; }
   .shell { display: flex; flex: 1; border-radius: 14px; overflow: hidden; border: 1px solid var(--border-dim); background: var(--bg-base); min-height: 0; min-width: 0; }
   .main { flex: 1; overflow: hidden; background: var(--bg-surface); transform: translateZ(0); contain: layout style; min-width: 0; }

src/shared/chrome/RecentActivity.svelte

@@ -87,7 +87,7 @@
   }
 </script>
 
-<div class="root">
+<div class="root anim-fade-in">
   <div class="header">
     <span class="heading">History</span>
     <div class="header-right">
@@ -197,7 +197,7 @@
 </div>
 
 <style>
-  .root { display: flex; flex-direction: column; height: 100%; overflow: hidden; animation: fadeIn 0.14s ease both; }
+  .root { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
 
   .header { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-4) var(--sp-6); border-bottom: 1px solid var(--border-dim); flex-shrink: 0; }
   .heading { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: var(--weight-normal); color: var(--text-faint); letter-spacing: var(--tracking-wider); text-transform: uppercase; }
@@ -256,5 +256,4 @@
   .empty-text { font-size: var(--text-base); color: var(--text-muted); }
   .empty-hint { font-size: var(--text-sm); color: var(--text-faint); }
 
-  @keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
 </style>

src/shared/chrome/SplashScreen.svelte

@@ -416,7 +416,7 @@
     <div class="bottom-area" style="z-index:1">
       <div class="status-slot" class:status-slot-hide={lockEnabled && pinVisible}>
         {#if failed || notConfigured}
-          <div class="error-box">
+          <div class="error-box anim-fade-up">
             <p class="error-label">{failed ? "Could not reach server" : "Server not configured"}</p>
             <div class="error-actions">
               <button class="err-btn" onclick={() => onRetry?.()}>Retry</button>
@@ -455,14 +455,13 @@
   @keyframes spOut       { from { opacity:1; transform:scale(1) }     to { opacity:0; transform:scale(0.96) } }
   @keyframes logoBreathe { 0%,100% { transform:scale(1); filter:drop-shadow(0 0 0px rgba(255,255,255,0)) } 50% { transform:scale(1.04); filter:drop-shadow(0 0 18px rgba(255,255,255,0.12)) } }
   @keyframes hintFade    { 0%,100% { opacity:0.35 } 50% { opacity:0.7 } }
-  @keyframes errIn       { from { opacity:0; transform:translateY(4px) } to { opacity:1; transform:translateY(0) } }
   @keyframes pinShake    { 0%,100% { transform:translateX(0) } 20%,60% { transform:translateX(-6px) } 40%,80% { transform:translateX(6px) } }
 
   .logo-glow    { position: absolute; inset: -20px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, transparent 70%); animation: logoBreathe 4s ease-in-out infinite; }
   .logo-breathe { animation: logoBreathe 4s ease-in-out infinite; }
   .hint         { font-family: var(--font-ui); font-size: 10px; color: var(--text-faint); letter-spacing: 0.22em; text-transform: uppercase; margin: 0; user-select: none; animation: hintFade 3.5s ease-in-out infinite; }
 
-  .error-box     { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 16px 20px; border-radius: var(--radius-lg); background: var(--bg-surface); border: 1px solid var(--border-base); min-width: 200px; text-align: center; animation: errIn 0.25s cubic-bezier(0,0,0.2,1) both; }
+  .error-box     { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 16px 20px; border-radius: var(--radius-lg); background: var(--bg-surface); border: 1px solid var(--border-base); min-width: 200px; text-align: center; }
   .error-label   { font-family: var(--font-ui); font-size: 11px; font-weight: 500; color: var(--text-muted); letter-spacing: 0.06em; margin: 0; }
   .error-actions { display: flex; gap: 6px; }
   .err-btn       { padding: 5px 14px; border-radius: var(--radius-md); border: 1px solid var(--border-base); background: transparent; color: var(--text-muted); cursor: pointer; font-family: var(--font-ui); font-size: 11px; letter-spacing: 0.04em; transition: border-color 0.15s, color 0.15s; }