Stop re-triggering interface fade-ins

components/sidebar.html

@@ -1,6 +1,6 @@
 <aside
   id="sidebar"
-  class="bg-gray-900 text-white transition-transform duration-300 ease-in-out fixed top-0 left-0 w-64 h-screen overflow-y-auto"
+  class="bg-gray-900 text-white transition-transform duration-300 ease-in-out fixed top-0 left-0 w-64 h-screen overflow-y-auto fade-in fade-in-delay-100"
 >
   <div class="flex flex-col h-full">
     <!-- Top Navigation Links -->

css/style.css

@@ -103,8 +103,41 @@ header img {
   }
 }
 
+/* Generic fade-in utility for interface elements */
+.fade-in {
+  opacity: 0;
+  animation: interface-fade-in 280ms ease-out forwards;
+  animation-delay: var(--fade-in-delay, 0ms);
+}
+
+.fade-in-delay-100 {
+  --fade-in-delay: 100ms;
+}
+
+.fade-in-delay-200 {
+  --fade-in-delay: 200ms;
+}
+
+.fade-in-delay-300 {
+  --fade-in-delay: 300ms;
+}
+
+.fade-in-delay-400 {
+  --fade-in-delay: 400ms;
+}
+
+@keyframes interface-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
-  .video-card--enter {
+  .video-card--enter,
+  .fade-in {
     opacity: 1;
     animation: none;
   }

index.html

@@ -59,14 +59,14 @@
       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">
+    <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 -->
         <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"
@@ -78,11 +78,11 @@
         <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">
+        <div class="ml-auto flex items-center space-x-4 fade-in fade-in-delay-200">
           <!-- Login Button -->
           <button
             id="loginButton"
@@ -141,7 +141,7 @@
       <div id="modalContainer"></div>
 
       <!-- Tagline / Slogan -->
-      <div class="text-center mb-8">
+      <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>

js/index.js

@@ -2,6 +2,33 @@
 
 import { trackPageView } from "./analytics.js";
 
+const INTERFACE_FADE_IN_ANIMATION = "interface-fade-in";
+
+const handleInterfaceFadeInComplete = (event) => {
+  const { animationName, target } = event;
+  if (animationName !== INTERFACE_FADE_IN_ANIMATION) {
+    return;
+  }
+
+  if (!(target instanceof HTMLElement)) {
+    return;
+  }
+
+  if (!target.classList.contains("fade-in")) {
+    return;
+  }
+
+  target.classList.remove("fade-in");
+  Array.from(target.classList).forEach((className) => {
+    if (className.startsWith("fade-in-delay-")) {
+      target.classList.remove(className);
+    }
+  });
+};
+
+document.addEventListener("animationend", handleInterfaceFadeInComplete, true);
+document.addEventListener("animationcancel", handleInterfaceFadeInComplete, true);
+
 // 1) Load modals (login, application, etc.)
 async function loadModal(url) {
   try {