feat: revise login screen with logo and smooth transition to splash

- Replace 'Login to Emby' heading with sofarr logo and subtitle
- Subtitle reads 'Login with your Emby credentials'
- Login form fades out smoothly before splash screen appears
- Form labels remain left-aligned within centered login box

public/app.js

@@ -64,6 +64,18 @@ function stopAutoRefresh() {
   }
 }
 
+function fadeOutLogin() {
+  return new Promise(resolve => {
+    const login = document.getElementById('login-container');
+    login.classList.add('fade-out');
+    login.addEventListener('transitionend', () => {
+      login.style.display = 'none';
+      login.classList.remove('fade-out');
+      resolve();
+    }, { once: true });
+  });
+}
+
 function showSplash() {
   const splash = document.getElementById('splash-screen');
   splash.style.display = 'flex';
@@ -130,6 +142,8 @@ async function handleLogin(e) {
     if (data.success) {
       currentUser = data.user;
       isAdmin = !!data.user.isAdmin;
+      // Fade out login, then show splash while loading data
+      await fadeOutLogin();
       showSplash();
       showDashboard();
       const splashStart = Date.now();

public/index.html

@@ -16,7 +16,8 @@
         <!-- Login Form -->
         <div id="login-container" class="login-container" style="display: none;">
             <div class="login-box">
-                <h2>Login to Emby</h2>
+                <img src="images/sofarr-flashscreen.png" alt="sofarr" class="login-logo">
+                <p class="login-subtitle">Login with your Emby credentials</p>
                 <form id="login-form">
                     <div class="form-group">
                         <label for="username">Username:</label>

public/style.css

@@ -545,6 +545,12 @@ body {
   align-items: center;
   min-height: 100vh;
   padding: 20px;
+  opacity: 1;
+  transition: opacity 0.3s ease-out;
+}
+
+.login-container.fade-out {
+  opacity: 0;
 }
 
 .login-box {
@@ -555,17 +561,24 @@ body {
   width: 100%;
   max-width: 380px;
   transition: background 0.3s;
+  text-align: center;
 }
 
-.login-box h2 {
+.login-logo {
-  color: var(--text-primary);
+  max-width: 180px;
+  width: 60%;
+  margin-bottom: 12px;
+}
+
+.login-subtitle {
+  color: var(--text-secondary);
   margin-bottom: 24px;
-  text-align: center;
+  font-size: 0.85rem;
-  font-size: 1.5rem;
 }
 
 .form-group {
   margin-bottom: 16px;
+  text-align: left;
 }
 
 .form-group label {