/**
 * Skeleton Loader CSS for Missav Theme
 * 
 * Provides smooth loading animations for movie suggestion grids
 * Responsive design with Tailwind CSS compatibility
 */

/* Skeleton Animation Keyframes */
@keyframes skeleton-loading {
    0% {
        background-position: -200px 0;
    }
    100% {
        background-position: calc(200px + 100%) 0;
    }
}

@keyframes skeleton-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* Base Skeleton Styles */
.suggestion-skeleton-item {
    @apply animate-pulse;
}

.skeleton-image {
    @apply aspect-[2/3] bg-gray-300 rounded-lg mb-3;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
}

.skeleton-title {
    @apply h-4 bg-gray-300 rounded mb-2;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
}

.skeleton-subtitle {
    @apply h-3 bg-gray-200 rounded w-3/4;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .skeleton-image {
        @apply bg-gray-700;
        background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%);
        background-size: 200% 100%;
        animation: skeleton-loading 1.5s infinite;
    }
    
    .skeleton-title {
        @apply bg-gray-700;
        background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%);
        background-size: 200% 100%;
        animation: skeleton-loading 1.5s infinite;
    }
    
    .skeleton-subtitle {
        @apply bg-gray-600;
        background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%);
        background-size: 200% 100%;
        animation: skeleton-loading 1.5s infinite;
    }
}

/* Responsive Grid Adjustments */
@media (max-width: 768px) {
    .suggestion-skeleton-item {
        @apply mb-4;
    }
    
    .skeleton-image {
        @apply mb-2;
    }
    
    .skeleton-title {
        @apply h-3 mb-1;
    }
    
    .skeleton-subtitle {
        @apply h-2;
    }
}

@media (max-width: 640px) {
    .skeleton-image {
        @apply rounded;
    }
    
    .skeleton-title,
    .skeleton-subtitle {
        @apply rounded-sm;
    }
}

/* Loading State Enhancements */
.suggestion-skeleton-item:nth-child(odd) .skeleton-image {
    animation-delay: 0.1s;
}

.suggestion-skeleton-item:nth-child(even) .skeleton-image {
    animation-delay: 0.2s;
}

.suggestion-skeleton-item:nth-child(3n) .skeleton-image {
    animation-delay: 0.3s;
}

.suggestion-skeleton-item:nth-child(4n) .skeleton-image {
    animation-delay: 0.4s;
}

/* Error State Styles */
.suggestion-error {
    @apply text-center p-8 bg-gray-50 rounded-lg border border-gray-200;
}

.suggestion-error .error-icon {
    @apply mb-4;
}

.suggestion-error .error-icon i {
    @apply text-yellow-500;
    font-size: 48px;
}

.suggestion-error p {
    @apply text-gray-600 mb-4;
}

.suggestion-error .suggestion-retry-btn {
    @apply bg-red-600 hover:bg-red-700 text-white font-medium py-2 px-4 rounded transition-colors duration-200;
}

.suggestion-error .suggestion-retry-btn:hover {
    @apply bg-red-700;
}

.suggestion-error .suggestion-retry-btn i {
    @apply mr-2;
}

/* Dark mode error state */
@media (prefers-color-scheme: dark) {
    .suggestion-error {
        @apply bg-gray-800 border-gray-700;
    }
    
    .suggestion-error p {
        @apply text-gray-300;
    }
}

/* Load More Button States */
.load-more-suggestions {
    @apply transition-all duration-200;
}

.load-more-suggestions:disabled {
    @apply opacity-50 cursor-not-allowed;
}

.load-more-spinner {
    @apply animate-spin;
}

.load-more-text {
    @apply transition-opacity duration-200;
}

.load-more-suggestions.loading .load-more-text {
    @apply opacity-0;
}

.load-more-suggestions.loading .load-more-spinner {
    @apply opacity-100;
}

.load-more-suggestions:not(.loading) .load-more-spinner {
    @apply opacity-0;
}

/* Smooth Transitions */
.movie-suggestion-grid {
    @apply transition-opacity duration-300;
}

.movie-suggestion-grid.loading {
    @apply opacity-50;
}

/* Accessibility Improvements */
@media (prefers-reduced-motion: reduce) {
    .skeleton-image,
    .skeleton-title,
    .skeleton-subtitle {
        animation: skeleton-pulse 2s infinite;
    }
    
    .suggestion-skeleton-item {
        @apply animate-none;
    }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    .skeleton-image {
        @apply bg-gray-400;
        background: linear-gradient(90deg, #9ca3af 25%, #6b7280 50%, #9ca3af 75%);
    }
    
    .skeleton-title {
        @apply bg-gray-400;
        background: linear-gradient(90deg, #9ca3af 25%, #6b7280 50%, #9ca3af 75%);
    }
    
    .skeleton-subtitle {
        @apply bg-gray-300;
        background: linear-gradient(90deg, #9ca3af 25%, #6b7280 50%, #9ca3af 75%);
    }
}

/* Print Styles */
@media print {
    .suggestion-skeleton-item,
    .suggestion-error,
    .load-more-suggestions {
        @apply hidden;
    }
}

/* Focus States for Accessibility */
.suggestion-retry-btn:focus,
.load-more-suggestions:focus {
    @apply outline-none ring-2 ring-red-500 ring-offset-2;
}

/* RTL Support */
[dir="rtl"] .skeleton-subtitle {
    @apply mr-0 ml-auto;
}

/* Performance Optimizations */
.suggestion-skeleton-item {
    will-change: opacity;
    transform: translateZ(0);
}

.skeleton-image,
.skeleton-title,
.skeleton-subtitle {
    will-change: background-position;
    transform: translateZ(0);
}