/* =============================================
   ENIGMA — IMAGE PLACEHOLDERS CSS
   This creates beautiful gradient placeholders
   when real images haven't been added yet.
   
   TO REPLACE AN IMAGE:
   Simply change the background-image URL in:
   - HTML: style="background-image: url('your-image.jpg')"
   - Or replace the image file in /images/ folder
============================================= */

/* Hero section placeholder */
.hero-bg {
  background-image: radial-gradient(ellipse at 20% 50%, rgba(0,119,255,0.3) 0%, transparent 50%),
                    radial-gradient(ellipse at 80% 30%, rgba(255,0,60,0.2) 0%, transparent 50%),
                    radial-gradient(ellipse at 50% 80%, rgba(0,212,255,0.15) 0%, transparent 50%),
                    linear-gradient(135deg, #06060d 0%, #0a0a1f 50%, #06060d 100%);
}

/* Quest card image placeholders */
.quest-placeholder--red {
  background: linear-gradient(135deg, #070d1a, #0a1535, #070d1a) !important;
  position: relative;
}

.quest-placeholder--gold {
  background: linear-gradient(135deg, #141007, #1f1804, #141007) !important;
}

.quest-placeholder--blue {
  background: linear-gradient(135deg, #140709, #1f040a, #140709) !important;
}

/* Gallery items — styled placeholders while no image */
.gallery-item img {
  background: linear-gradient(135deg, #0a0a1a, #141428) !important;
}

/* About visual placeholder */
.about-img {
  background: linear-gradient(135deg, #0a0a1f, #141428, #0a0a1f) !important;
}

/* Quest other card */
.qoc-img {
  position: relative;
  overflow: hidden;
}
.qoc-img::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 40%, rgba(6,6,13,0.8) 100%);
}

/* Add visual icon overlay for empty images (before real images added) */
.quest-img-wrap::after {
  content: '\f13d';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2rem;
  color: rgba(0,170,255,0.15);
  pointer-events: none;
  z-index: 1;
}

/* Neon scan line effect on placeholders */
@keyframes scanline {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100vh); }
}