feat: Integrate video.js for enhanced video playback and apply custom premium glass styling.

public/style.css

@@ -48,6 +48,7 @@ h1 {
   font-size: 2.5rem;
   margin-bottom: 0.5rem;
   background: linear-gradient(to right, #fff, var(--text-secondary));
+  background-clip: text;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
 }
@@ -178,18 +179,55 @@ video.active {
   overflow: hidden;
 }
 
-.viewer-container video {
+.video-wrapper {
   width: 100%;
   height: 100%;
-  object-fit: contain;
-  border-radius: 0;
-  border: none;
-  margin: 0;
   display: none;
 }
 
-.viewer-container video.active {
+.video-wrapper.active {
   display: block;
+  animation: fadeIn 0.5s ease forwards;
+}
+
+/* Custom Video.js Overrides for Premium Glass Look */
+.video-js {
+  width: 100% !important;
+  height: 100% !important;
+  background-color: transparent !important;
+}
+
+.video-js .vjs-tech {
+  object-fit: contain;
+}
+
+.vjs-theme-city .vjs-control-bar {
+  background: rgba(15, 23, 42, 0.85) !important;
+  backdrop-filter: blur(8px) !important;
+  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
+  height: 50px !important;
+  padding: 0 10px !important;
+}
+
+.vjs-theme-city .vjs-play-progress,
+.vjs-theme-city .vjs-volume-level {
+  background: var(--accent-color) !important;
+}
+
+.vjs-theme-city .vjs-big-play-button {
+  background: rgba(15, 23, 42, 0.85) !important;
+  backdrop-filter: blur(8px) !important;
+  border: 1px solid rgba(255, 255, 255, 0.1) !important;
+  border-radius: 50% !important;
+  width: 80px !important;
+  height: 80px !important;
+  line-height: 80px !important;
+  transition: all 0.3s ease !important;
+}
+
+.vjs-theme-city .vjs-big-play-button:hover {
+  background: var(--accent-color) !important;
+  transform: scale(1.1) !important;
 }
 
 .overlay {