/* 
 * =====================================================================
 * | VALLEYTAINMENT PRODUCTIONS - PLACEHOLDER IMAGE STYLES             |
 * | ================================================================= |
 * | FILE: valleytainment_final_working_v2/css/placeholder-image.css  |
 * | PURPOSE: CSS-based placeholder image for image generator         |
 * | AUTHOR: Valleytainment Development Team                           |
 * | VERSION: 2.0.0 - Production Ready                                |
 * | LAST UPDATED: 2025-12-08                                         |
 * | ================================================================= |
 * |                                                                   |
 * | 📋 DESCRIPTION:                                                   |
 * | This file contains CSS styles for placeholder images used in     |
 * | the AI image generator. Provides a visually appealing placeholder |
 * | while images are loading or being generated.                     |
 * |                                                                   |
 * | 🎯 KEY FEATURES:                                                  |
 * | ✅ CSS-based placeholder (no external images needed)             |
 * | ✅ Gradient background with neon effects                         |
 * | ✅ Animated loading indicator                                     |
 * | ✅ Responsive design                                             |
 * | ✅ Accessible fallback text                                      |
 * |                                                                   |
 * | 🛠️ TECHNICAL DETAILS:                                            |
 * | - Pure CSS3 (no JavaScript required)                              |
 * | - CSS gradients for background                                    |
 * | - Pseudo-elements (::before, ::after) for effects                |
 * | - CSS animations for loading states                               |
 * |                                                                   |
 * | 📚 DEPENDENCIES:                                                  |
 * | - No external dependencies required                                |
 * | - Works standalone                                                |
 * |                                                                   |
 * | 🎨 CUSTOMIZATION:                                                 |
 * | To customize placeholder:                                         |
 * | 1. Modify gradient colors in background property                  |
 * | 2. Adjust animation duration and easing                           |
 * | 3. Change text color and font size                                |
 * | 4. Customize border radius and shadows                             |
 * |                                                                   |
 * | 🐛 DEBUGGING:                                                     |
 * | - Use browser DevTools to inspect styles                          |
 * | - Verify pseudo-elements are rendering                            |
 * | - Check animation is playing                                      |
 * |                                                                   |
 * | 📖 FOR BEGINNERS:                                                 |
 * | This CSS creates a placeholder by:                                 |
 * | 1. Using gradient background for visual appeal                    |
 * | 2. Adding pseudo-elements for glow effects                        |
 * | 3. Animating the placeholder for loading state                    |
 * |                                                                   |
 * | 🔒 SECURITY:                                                      |
 * | - No external resources                                           |
 * | - No JavaScript execution                                         |
 * | - Content Security Policy compatible                              |
 * |                                                                   |
 * | ⚡ PERFORMANCE:                                                   |
 * | - Pure CSS (no JavaScript overhead)                                |
 * | - Hardware-accelerated animations                                 |
 * | - Minimal file size                                               |
 * |                                                                   |
 * | ================================================================= |
 */
.placeholder-image {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #0a0a0a 0%, #1a0a1a 50%, #0a0a0a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ff00aa;
  font-size: 24px;
  text-align: center;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(255, 0, 170, 0.3);
}

.placeholder-image::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at center, rgba(255, 0, 170, 0.2) 0%, rgba(10, 10, 10, 0) 70%);
  z-index: 0;
  border-radius: 10px;
}

.placeholder-image::after {
  content: 'Valleytainment Productions';
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
}