fix: Resolve z-index stacking context issues by removing contain property and enhance card hover effects with explicit z-index and shadow transitions.

app/styles/base.css

@@ -99,7 +99,6 @@ nav:where(.sticky, .fixed),
 [class*="grid"]>* {
     content-visibility: auto;
     contain-intrinsic-size: auto 400px;
-    contain: layout style paint;
 }
 
 [class*="grid"]>a {

components/adult/AdultContentGrid.tsx

@@ -42,7 +42,6 @@ export function AdultContentGrid({
                     <Link
                         key={`${video.source}-${video.vod_id}`}
                         href={`/secret?q=${encodeURIComponent(video.vod_name)}`}
-                        className="group cursor-pointer"
                         onClick={(e) => {
                             // Allow default behavior for modifier keys (new tab, etc.)
                             if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
@@ -50,13 +49,17 @@ export function AdultContentGrid({
                             e.preventDefault();
                             onVideoClick?.(video);
                         }}
+                        className="group cursor-pointer hover:translate-y-[-2px] transition-transform duration-200 ease-out"
                         style={{
-                            contain: 'layout style paint',
+                            position: 'relative',
+                            zIndex: 1,
                             contentVisibility: 'auto'
                         }}
+                        onMouseEnter={(e) => (e.currentTarget.style.zIndex = '100')}
+                        onMouseLeave={(e) => (e.currentTarget.style.zIndex = '1')}
                     >
-                        <Card hover className="overflow-hidden p-0 h-full" blur={false}>
-                            <div className="relative aspect-[2/3] overflow-hidden bg-[var(--glass-bg)] rounded-[var(--radius-2xl)]">
+                        <Card hover={false} className="p-0 h-full shadow-[0_2px_8px_var(--shadow-color)] hover:shadow-[0_8px_24px_var(--shadow-color)] transition-shadow duration-200 ease-out" blur={false}>
+                            <div className="relative aspect-[2/3] bg-[var(--glass-bg)] rounded-[var(--radius-2xl)]">
                                 {video.vod_pic ? (
                                     <Image
                                         src={video.vod_pic}

components/home/MovieCard.tsx

@@ -33,14 +33,17 @@ export const MovieCard = memo(function MovieCard({ movie, onMovieClick }: MovieC
         e.preventDefault();
         onMovieClick(movie);
       }}
-      className="group cursor-pointer"
+      className="group cursor-pointer hover:translate-y-[-2px] transition-transform duration-200 ease-out"
       style={{
-        contain: 'layout style paint',
+        position: 'relative',
+        zIndex: 1,
         contentVisibility: 'auto'
       }}
+      onMouseEnter={(e) => (e.currentTarget.style.zIndex = '100')}
+      onMouseLeave={(e) => (e.currentTarget.style.zIndex = '1')}
     >
-      <Card hover className="overflow-hidden p-0 h-full" blur={false}>
-        <div className="relative aspect-[2/3] overflow-hidden bg-[var(--glass-bg)] rounded-[var(--radius-2xl)]">
+      <Card hover={false} className="p-0 h-full shadow-[0_2px_8px_var(--shadow-color)] hover:shadow-[0_8px_24px_var(--shadow-color)] transition-shadow duration-200 ease-out" blur={false}>
+        <div className="relative aspect-[2/3] bg-[var(--glass-bg)] rounded-[var(--radius-2xl)]">
           <Image
             src={movie.cover}
             alt={movie.title}

components/search/VideoCard.tsx

@@ -28,7 +28,7 @@ export const VideoCard = memo<VideoCardProps>(({
     return (
         <div
             style={{
-                contain: 'layout style paint',
+                // contain: 'layout style paint', // Removed to fix z-index stacking context
                 contentVisibility: 'auto',
             }}
         >
@@ -39,19 +39,24 @@ export const VideoCard = memo<VideoCardProps>(({
                 role="listitem"
                 aria-label={`${video.vod_name}${video.vod_remarks ? ` - ${video.vod_remarks}` : ''}`}
                 prefetch={false}
+                className="group cursor-pointer hover:translate-y-[-2px] transition-transform duration-200 ease-out block h-full"
+                style={{
+                    position: 'relative',
+                    zIndex: 1,
+                }}
+                onMouseEnter={(e) => (e.currentTarget.style.zIndex = '100')}
+                onMouseLeave={(e) => (e.currentTarget.style.zIndex = '1')}
             >
                 <Card
-                    className="p-0 overflow-hidden group cursor-pointer flex flex-col h-full bg-[var(--bg-color)]/50 backdrop-blur-none saturate-100 shadow-sm border-[var(--glass-border)] hover:shadow-lg transition-shadow"
+                    className="p-0 flex flex-col h-full bg-[var(--bg-color)]/50 backdrop-blur-none saturate-100 shadow-sm border-[var(--glass-border)] hover:shadow-lg transition-shadow"
                     hover={false}
                     blur={false}
                     style={{
-                        willChange: 'transform',
-                        transform: 'translate3d(0,0,0)',
                         backfaceVisibility: 'hidden',
                     }}
                 >
                     {/* Poster */}
-                    <div className="relative aspect-[2/3] bg-[color-mix(in_srgb,var(--glass-bg)_50%,transparent)] overflow-hidden rounded-[var(--radius-2xl)]">
+                    <div className="relative aspect-[2/3] bg-[color-mix(in_srgb,var(--glass-bg)_50%,transparent)] rounded-[var(--radius-2xl)]">
                         {video.vod_pic ? (
                             <Image
                                 src={video.vod_pic}

components/search/VideoGrid.tsx

@@ -85,7 +85,7 @@ export const VideoGrid = memo(function VideoGrid({ videos, className = '' }: Vid
         style={{
           // Optimize rendering performance
           // willChange: 'auto', // Removed to let browser decide
-          contain: 'layout style paint',
+          // contain: 'layout style paint', // Removed to fix z-index stacking context
           contentVisibility: 'auto',
         }}
       >