Document fade-in safeguards

index.html

@@ -59,14 +59,24 @@
       md:ml-64 ensures content is shifted on desktop so the pinned sidebar doesn't overlap.
       On mobile, we also toggle .sidebar-open to shift the entire content.
     -->
-    <div id="app" class="md:ml-64 px-4 py-8 min-h-screen flex flex-col">
+    <!--
+      `fade-in` is scrubbed by js/index.js after the first animation so that
+      re-rendering views does not cause the shell to flicker. Only apply it to
+      elements that should animate exactly once on initial paint.
+    -->
+    <div id="app" class="md:ml-64 px-4 py-8 min-h-screen flex flex-col fade-in">
       <!-- Header -->
       <header class="mb-8 flex items-center w-full">
         <!-- Mobile hamburger button (hidden on md+) -->
         <!-- New button -->
+        <!--
+          Mobile menu button: uses `fade-in` to match the rest of the chrome.
+          The JS animation cleanup removes the helper classes once the entrance
+          finishes to prevent flashes on future sidebar toggles.
+        -->
         <button
           id="mobileMenuBtn"
-          class="md:hidden ml-2 mr-4 flex items-center justify-center w-10 h-10 rounded-full bg-transparent hover:bg-transparent focus:outline-none focus:ring-2 focus:ring-[#0f172a] z-[60]"
+          class="md:hidden ml-2 mr-4 flex items-center justify-center w-10 h-10 rounded-full bg-transparent hover:bg-transparent focus:outline-none focus:ring-2 focus:ring-[#0f172a] z-[60] fade-in"
         >
           <img
             src="assets/svg/mobile-sidebar-menu-icon.svg"
@@ -75,14 +85,16 @@
           />
         </button>
         <!-- Logo -->
+        <!-- Logo fades in once on initial load. -->
         <img
           src="assets/svg/bitvid-logo-light-mode.svg"
           alt="BitVid Logo"
-          class="h-16"
+          class="h-16 fade-in fade-in-delay-100"
         />
 
         <!-- Buttons on the far right -->
-        <div class="ml-auto flex items-center space-x-4">
+        <!-- Header action buttons share the fade-in treatment for consistency. -->
+        <div class="ml-auto flex items-center space-x-4 fade-in fade-in-delay-200">
           <!-- Login Button -->
           <button
             id="loginButton"
@@ -141,7 +153,8 @@
       <div id="modalContainer"></div>
 
       <!-- Tagline / Slogan -->
-      <div class="text-center mb-8">
+      <!-- Tagline fade matches the cards. -->
+      <div class="text-center mb-8 fade-in fade-in-delay-300">
         <h2 class="text-2xl font-bold text-gray-500 tracking-wide">
           seed. zap. subscribe.
         </h2>