diff --git a/client/src/components/video-card.tsx b/client/src/components/video-card.tsx
index 68f3641..75a252f 100644
--- a/client/src/components/video-card.tsx
+++ b/client/src/components/video-card.tsx
@@ -226,15 +226,23 @@ export default function VideoCard({ video, onClick, className = "" }: VideoCardP
)}
- {/* Title overlay at bottom */}
-
+ {/* Cinematic title overlay */}
+
onClick?.(video)}
data-testid={`text-title-${video.id}`}
>
{video.title}
+
+ {/* Subtle accent line */}
+
diff --git a/client/src/index.css b/client/src/index.css
index cd021d7..b6b484e 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -387,11 +387,21 @@ input[data-testid*="search"]::placeholder {
opacity: 0;
}
-/* Maximum possible z-index for video card hover */
+/* Maximum possible z-index for video card hover with cinematic effects */
.video-card:hover {
z-index: 2147483647 !important;
}
+/* Cinematic text animations */
+@keyframes titleGlow {
+ 0%, 100% { text-shadow: 2px 2px 8px rgba(0,0,0,0.9), 0 0 20px rgba(0,0,0,0.5); }
+ 50% { text-shadow: 2px 2px 12px rgba(0,0,0,0.9), 0 0 25px rgba(255,215,0,0.3), 0 0 35px rgba(255,165,0,0.2); }
+}
+
+.video-card:hover h3 {
+ animation: titleGlow 2s ease-in-out infinite;
+}
+
/* Hide picture-in-picture button on all video elements */
video::-webkit-media-controls-picture-in-picture-button {
display: none !important;