/*
 * QuickMonster Background Design
 * Dark fantasy dungeon aesthetic
 */

/* ========================================
   MAIN BACKGROUND LAYER
   ======================================== */

body {
  background-color: var(--qm-void);
  position: relative;
}

/* Dark gradient base layer */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -3;

  /* Dark gradient with visible depth */
  background:
    /* Soft vignette */
    radial-gradient(ellipse at center, transparent 0%, rgba(0, 0, 0, 0.3) 100%),

    /* Lighter areas for visible depth */
    radial-gradient(ellipse 100% 60% at 50% 0%, rgba(60, 55, 70, 0.6) 0%, transparent 50%),
    radial-gradient(ellipse 80% 70% at 0% 40%, rgba(50, 45, 60, 0.5) 0%, transparent 50%),
    radial-gradient(ellipse 80% 70% at 100% 60%, rgba(50, 45, 60, 0.45) 0%, transparent 50%),

    /* Base gradient - dark with visible variation */
    linear-gradient(180deg,
      #252530 0%,
      #1e1e28 25%,
      #181820 50%,
      #141418 75%,
      #101014 100%
    );
}

/* Subtle depth overlay */
body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -2;

  /* Subtle lighter patches for texture */
  background:
    radial-gradient(ellipse 60% 40% at 25% 30%, rgba(255, 255, 255, 0.03) 0%, transparent 50%),
    radial-gradient(ellipse 50% 50% at 75% 70%, rgba(255, 255, 255, 0.025) 0%, transparent 50%),
    radial-gradient(ellipse 40% 35% at 50% 90%, rgba(255, 255, 255, 0.02) 0%, transparent 45%);
}

/* ========================================
   AMBIENT LIGHTING EFFECTS
   ======================================== */

.bg-ambient {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}

/* Crimson glow from top */
.bg-ambient::before {
  content: '';
  position: absolute;
  top: -20%;
  left: 50%;
  transform: translateX(-50%);
  width: 120%;
  height: 60%;
  background: radial-gradient(
    ellipse at center,
    rgba(196, 30, 58, 0.08) 0%,
    rgba(139, 0, 0, 0.04) 40%,
    transparent 70%
  );
  animation: pulseGlow 8s ease-in-out infinite;
}

/* Secondary glow accent */
.bg-ambient::after {
  content: '';
  position: absolute;
  bottom: -10%;
  right: -10%;
  width: 50%;
  height: 50%;
  background: radial-gradient(
    ellipse at center,
    rgba(139, 0, 0, 0.06) 0%,
    transparent 60%
  );
  animation: pulseGlow 12s ease-in-out infinite reverse;
}

@keyframes pulseGlow {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* ========================================
   PAGE WRAPPER WITH BORDER DESIGN
   ======================================== */

.page-wrapper {
  position: relative;
  min-height: 100vh;
}

/* Decorative side borders */
.page-wrapper::before,
.page-wrapper::after {
  content: '';
  position: fixed;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg,
    transparent 0%,
    var(--qm-crimson-dark) 10%,
    var(--qm-crimson) 30%,
    var(--qm-blood) 50%,
    var(--qm-crimson) 70%,
    var(--qm-crimson-dark) 90%,
    transparent 100%
  );
  z-index: 100;
  pointer-events: none;
}

.page-wrapper::before {
  left: 0;
}

.page-wrapper::after {
  right: 0;
}

/* ========================================
   SECTION BACKGROUNDS
   ======================================== */

/* Hero section with dramatic lighting */
.bg-hero {
  position: relative;
  overflow: hidden;
}

.bg-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(ellipse at center top, rgba(196, 30, 58, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 30% 80%, rgba(139, 0, 0, 0.08) 0%, transparent 40%),
    radial-gradient(ellipse at 70% 80%, rgba(139, 0, 0, 0.08) 0%, transparent 40%);
  pointer-events: none;
  z-index: 0;
}

/* Darker section background */
.bg-darker {
  background: linear-gradient(180deg,
    rgba(0, 0, 0, 0.3) 0%,
    rgba(0, 0, 0, 0.5) 50%,
    rgba(0, 0, 0, 0.3) 100%
  );
}

/* Lighter section with subtle pattern */
.bg-section {
  position: relative;
  background: rgba(20, 20, 25, 0.6);
}

.bg-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--qm-crimson-dark) 20%,
    var(--qm-crimson) 50%,
    var(--qm-crimson-dark) 80%,
    transparent 100%
  );
}

/* ========================================
   CARD BACKGROUNDS
   ======================================== */

/* Dark card with inner shadow */
.bg-card {
  background: linear-gradient(145deg, var(--qm-slate) 0%, var(--qm-charcoal) 100%);
  box-shadow:
    var(--qm-shadow-md),
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3);
}

/* Elevated card */
.bg-card-elevated {
  background: linear-gradient(145deg, var(--qm-stone) 0%, var(--qm-slate) 100%);
  box-shadow:
    var(--qm-shadow-lg),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* ========================================
   PARCHMENT TEXTURES
   ======================================== */

.bg-parchment {
  background:
    /* Aged paper staining with soft gradients */
    radial-gradient(ellipse 120% 80% at 15% 10%, rgba(139, 90, 43, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse 100% 90% at 85% 85%, rgba(120, 80, 40, 0.1) 0%, transparent 45%),
    radial-gradient(ellipse 80% 60% at 50% 50%, rgba(160, 120, 80, 0.06) 0%, transparent 55%),
    radial-gradient(ellipse 70% 50% at 30% 70%, rgba(139, 90, 43, 0.08) 0%, transparent 40%),
    radial-gradient(ellipse 60% 70% at 75% 25%, rgba(150, 110, 60, 0.07) 0%, transparent 45%),
    /* Base parchment gradient */
    linear-gradient(155deg,
      var(--qm-parchment-light) 0%,
      var(--qm-parchment) 25%,
      var(--qm-parchment-dark) 60%,
      var(--qm-parchment-aged) 100%
    );
  position: relative;
}

.bg-parchment::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* Soft organic texture using overlapping gradients */
  background:
    radial-gradient(ellipse 30% 20% at 20% 30%, rgba(100, 70, 40, 0.04) 0%, transparent 70%),
    radial-gradient(ellipse 25% 30% at 70% 60%, rgba(90, 60, 35, 0.035) 0%, transparent 70%),
    radial-gradient(ellipse 35% 25% at 45% 80%, rgba(110, 75, 45, 0.03) 0%, transparent 70%),
    radial-gradient(ellipse 20% 35% at 85% 20%, rgba(95, 65, 38, 0.025) 0%, transparent 70%);
  pointer-events: none;
  border-radius: inherit;
}

/* ========================================
   GRADIENT OVERLAYS
   ======================================== */

.overlay-dark {
  position: relative;
}

.overlay-dark::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.6) 100%);
  pointer-events: none;
}

.overlay-crimson {
  position: relative;
}

.overlay-crimson::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(196, 30, 58, 0.1) 0%, transparent 100%);
  pointer-events: none;
}

/* ========================================
   DECORATIVE CORNERS
   ======================================== */

.corner-ornaments {
  position: relative;
}

.corner-ornaments::before,
.corner-ornaments::after {
  content: '\2726';
  position: absolute;
  font-size: 1.5rem;
  color: var(--qm-gold-muted);
  opacity: 0.6;
}

.corner-ornaments::before {
  top: var(--qm-space-md);
  left: var(--qm-space-md);
}

.corner-ornaments::after {
  bottom: var(--qm-space-md);
  right: var(--qm-space-md);
}

/* ========================================
   ANIMATED TORCH GLOW (Optional)
   ======================================== */

.torch-glow {
  position: fixed;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 150, 50, 0.08) 0%,
    rgba(255, 100, 30, 0.04) 30%,
    transparent 70%
  );
  pointer-events: none;
  z-index: -1;
  animation: torchFlicker 4s ease-in-out infinite;
}

.torch-glow-left {
  top: 20%;
  left: -100px;
}

.torch-glow-right {
  top: 40%;
  right: -100px;
  animation-delay: -2s;
}

@keyframes torchFlicker {
  0%, 100% {
    opacity: 0.8;
    transform: scale(1);
  }
  25% {
    opacity: 1;
    transform: scale(1.05);
  }
  50% {
    opacity: 0.7;
    transform: scale(0.95);
  }
  75% {
    opacity: 0.9;
    transform: scale(1.02);
  }
}