feat: add FLIP transitions for Clipper/Player mode switching

Co-authored-by: Cursor <cursoragent@cursor.com>

src/App.svelte

@@ -23,6 +23,7 @@
   } from '$lib/transport/playback';
   import { session } from '$lib/stores/videoSession.svelte';
   import { listen } from '@tauri-apps/api/event';
+  import { fly, fade } from 'svelte/transition';
 
   let showSetupWizard = $state(true);
   let showPreferences = $state(false);
@@ -417,13 +418,15 @@
         />
         <PlayerTimeline visible={showPlayerTimeline || !session.isPlaying} />
       {:else}
-        <TransportControls bind:this={transportControls} />
+        <div transition:fade={{ duration: 200 }}>
+          <TransportControls bind:this={transportControls} />
+        </div>
       {/if}
     </div>
 
     {#if !isPlayerMode}
       <!-- Timeline section: always full width -->
-      <div class="lower-section">
+      <div class="lower-section" transition:fly={{ y: 50, duration: 250 }}>
         <div
           class="resize-handle"
           class:active={isResizing}
@@ -451,7 +454,7 @@
       </div>
 
       <!-- Bottom clip list: visible only in bottom mode -->
-      <div class="bottom-cliplist" class:hidden={isLeft}>
+      <div class="bottom-cliplist" class:hidden={isLeft} transition:fly={{ y: 30, duration: 250 }}>
         <ClipList onExport={() => (showExportDialog = true)} />
       </div>
     {/if}

src/app.css

@@ -37,6 +37,10 @@ body {
   height: 100vh;
 }
 
+.content {
+  transition: grid-template-rows 0.3s ease, grid-template-columns 0.3s ease;
+}
+
 /* Player mode: app shell becomes relative for overlay positioning */
 .app-shell.player-mode {
   position: relative;

src/lib/components/PlayerControls.svelte

@@ -283,12 +283,13 @@
     right: 0;
     pointer-events: none;
     opacity: 0;
-    transition: opacity 0.2s ease;
+    transition: opacity 0.2s ease 0.1s;
     z-index: 20;
   }
 
   .player-controls-overlay.visible {
     opacity: 1;
+    transition-delay: 0.1s;
   }
 
   .player-controls-panel {