From 52553165d6743b23c60e3faa77ed80d6a3d62043 Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Thu, 25 Sep 2025 13:24:05 -0400
Subject: [PATCH] Speed up modal open animations

---
 components/upload-modal.html | 2 +-
 components/video-modal.html  | 2 +-
 css/style.css                | 9 ++++++++-
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/components/upload-modal.html b/components/upload-modal.html
index ea0eeb15..d361a352 100644
--- a/components/upload-modal.html
+++ b/components/upload-modal.html
@@ -24,7 +24,7 @@
     >
       <!-- Top Bar (similar to video-modal) -->
       <div
-        class="sticky top-0 bg-gradient-to-b from-black/80 to-transparent transition-transform duration-300 p-4 flex items-center justify-between"
+        class="sticky top-0 bg-gradient-to-b from-black/80 to-transparent transition-transform duration-150 p-4 flex items-center justify-between"
       >
         <h2 class="text-xl font-bold text-white">Share a Video</h2>
         <button
diff --git a/components/video-modal.html b/components/video-modal.html
index 13202077..5b08e61a 100644
--- a/components/video-modal.html
+++ b/components/video-modal.html
@@ -9,7 +9,7 @@
       <!-- Navigation bar - sliding at top -->
       <div
         id="modalNav"
-        class="sticky top-0 z-60 bg-gradient-to-b from-black/80 to-transparent transition-transform duration-300"
+        class="sticky top-0 z-60 bg-gradient-to-b from-black/80 to-transparent transition-transform duration-150"
       >
         <div class="flex items-center px-6 py-4">
           <button
diff --git a/css/style.css b/css/style.css
index 839ecf2e..21e19f30 100644
--- a/css/style.css
+++ b/css/style.css
@@ -8,6 +8,7 @@
   --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
   --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
   --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+  --modal-motion-duration: 160ms;
 }
 
 /* Core Styles */
@@ -137,7 +138,7 @@ header img {
   display: flex;
   flex-direction: column;
   background-color: #0f172a;
-  animation: fadeIn 0.3s ease-in-out;
+  animation: fadeIn var(--modal-motion-duration) ease-out;
 }
 
 @keyframes fadeIn {
@@ -151,6 +152,12 @@ header img {
   }
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .modal-content {
+    animation-duration: 1ms;
+  }
+}
+
 /* Video Container */
 .video-container {
   width: 100%;