/* Universal Hover Effects for Video and Gallery Previews */

/* Base transition for all preview elements */
.preview-container, 
.video-item, 
.gallery-item,
.post-thumbnail,
.thumbnail-container,
[style*="240px"][style*="160px"],
[style*="200px"][style*="100%"] {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateZ(0); /* Enable hardware acceleration */
}

/* Hover effects for all preview containers */
.preview-container:hover,
.video-item:hover,
.gallery-item:hover,
.post-thumbnail:hover,
.thumbnail-container:hover,
a:hover [style*="240px"][style*="160px"],
a:hover [style*="200px"][style*="100%"] {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6), 
                0 0 30px rgba(124, 58, 237, 0.3);
    z-index: 10;
}

/* Specific hover effects for video previews */
.video-item:hover,
a:hover [style*="200px"][style*="100%"] {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6), 
                0 0 30px rgba(239, 68, 68, 0.4);
}

/* Specific hover effects for gallery previews */
.gallery-item:hover {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6), 
                0 0 30px rgba(34, 197, 94, 0.4);
}

/* Play button hover effects */
.play-button {
    transition: all 0.3s ease;
}

.video-item:hover .play-button,
a:hover .play-button {
    transform: scale(1.1);
    background-color: rgba(239, 68, 68, 0.9);
}

/* Gallery icon hover effects */
.gallery-icon {
    transition: all 0.3s ease;
}

.gallery-item:hover .gallery-icon,
a:hover .gallery-icon {
    transform: scale(1.1);
    background-color: rgba(34, 197, 94, 0.9);
}

/* Image scaling within containers */
.preview-container img,
.video-item img,
.gallery-item img,
.post-thumbnail img,
.thumbnail-container img {
    transition: transform 0.3s ease;
}

.preview-container:hover img,
.video-item:hover img,
.gallery-item:hover img,
.post-thumbnail:hover img,
.thumbnail-container:hover img,
a:hover img {
    transform: scale(1.05);
}

/* Smooth transitions for overlays */
.overlay {
    transition: all 0.3s ease;
}

/* Featured content hover effects */
.featured-item:hover {
    transform: translateY(-12px) scale(1.03);
    box-shadow: 0 35px 70px -12px rgba(0, 0, 0, 0.7), 
                0 0 40px rgba(124, 58, 237, 0.5);
}

/* Profile content hover effects */
.profile-post:hover {
    transform: translateY(-6px) scale(1.01);
    box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.5), 
                0 0 25px rgba(124, 58, 237, 0.2);
}

/* Enhanced animation for larger previews */
.large-preview:hover {
    transform: translateY(-10px) scale(1.025);
    box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.6), 
                0 0 35px rgba(124, 58, 237, 0.4);
}

/* Subtle animation for mobile devices */
@media (max-width: 768px) {
    .preview-container:hover,
    .video-item:hover,
    .gallery-item:hover,
    .post-thumbnail:hover,
    .thumbnail-container:hover,
    a:hover [style*="240px"][style*="160px"],
    a:hover [style*="200px"][style*="100%"] {
        transform: translateY(-4px) scale(1.01);
        box-shadow: 0 15px 30px -12px rgba(0, 0, 0, 0.5), 
                    0 0 20px rgba(124, 58, 237, 0.2);
    }
}

/* Accessibility: Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    .preview-container,
    .video-item,
    .gallery-item,
    .post-thumbnail,
    .thumbnail-container,
    [style*="240px"][style*="160px"],
    [style*="200px"][style*="100%"] {
        transition: none;
    }
    
    .preview-container:hover,
    .video-item:hover,
    .gallery-item:hover,
    .post-thumbnail:hover,
    .thumbnail-container:hover,
    a:hover [style*="240px"][style*="160px"],
    a:hover [style*="200px"][style*="100%"] {
        transform: none;
        box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.5);
    }
}

/* Focus styles for keyboard navigation */
.preview-container:focus,
.video-item:focus,
.gallery-item:focus,
.post-thumbnail:focus,
.thumbnail-container:focus,
a:focus [style*="240px"][style*="160px"],
a:focus [style*="200px"][style*="100%"] {
    outline: 2px solid rgba(124, 58, 237, 0.8);
    outline-offset: 2px;
}

/* Performance optimization */
.preview-container,
.video-item,
.gallery-item,
.post-thumbnail,
.thumbnail-container {
    will-change: transform;
    backface-visibility: hidden;
}