/* ==========================================
   ELEGANT PUBLISHING HOUSE BACKGROUND
   Royal Bronze Theme - Literary & Sophisticated
   ========================================== */

/* Base body styles */
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  transition: background 0.3s ease;
}

/* ==========================================
   LIGHT MODE BACKGROUND - Warm Bronze & Cream
   ========================================== */
body {
  /* Warme Bronze-Textur mit subtilen Schatten */
  background: 
    /* Subtle bronze stains */
    radial-gradient(circle at 15% 20%, rgba(176, 141, 87, 0.04), transparent 35%),
    radial-gradient(circle at 85% 80%, rgba(176, 141, 87, 0.05), transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(176, 141, 87, 0.03), transparent 50%),
    /* Warm cream gradient */
    linear-gradient(180deg, 
      #faf8f5 0%,    /* Helles Creme */
      #f5f2ed 40%,   /* Warmes Beige */
      #f0ece5 100%   /* Sanftes Beige */
    );
}

/* ==========================================
   DARK MODE BACKGROUND - Deep Blue Library Atmosphere
   ========================================== */
html[data-theme="dim"] body {
  /* Dunkle Bibliothek mit Bronze-Akzenten */
  background:
    /* Warm bronze glows */
    radial-gradient(1000px 600px at 20% 15%, rgba(176, 141, 87, 0.12), transparent 55%),
    radial-gradient(800px 500px at 80% 85%, rgba(176, 141, 87, 0.08), transparent 60%),
    radial-gradient(700px 450px at 50% 50%, rgba(176, 141, 87, 0.06), transparent 65%),
    /* Deep blue-grey atmosphere */
    linear-gradient(180deg, 
      #2C3E50 0%,    /* Royal Blue */
      #243442 50%,   /* Deep Blue-Grey */
      #1a2631 100%   /* Almost black with blue tint */
    );
}

/* ==========================================
   FLOATING BOOK PAGES CANVAS
   ========================================== */
#particle-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  opacity: 0.4; /* 🎯 STELLSCHRAUBE 1: Sichtbarkeit der Pages (0.2-0.6) */
}

html[data-theme="dim"] #particle-canvas {
  opacity: 0.3; /* Etwas subtiler im Dark Mode */
}

/* ==========================================
   PAPER TEXTURE OVERLAY
   ========================================== */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* Subtile Papier-Textur */
  background-image: 
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(44, 62, 80, 0.01) 2px,
      rgba(44, 62, 80, 0.01) 4px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 2px,
      rgba(44, 62, 80, 0.01) 2px,
      rgba(44, 62, 80, 0.01) 4px
    );
  pointer-events: none;
  z-index: 2;
  opacity: 0.3; /* 🎯 STELLSCHRAUBE 2: Papier-Textur Intensität (0.1-0.5) */
}

html[data-theme="dim"] body::before {
  background-image: 
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(176, 141, 87, 0.015) 2px,
      rgba(176, 141, 87, 0.015) 4px
    );
  opacity: 0.15;
}

/* ==========================================
   SUBTLE BRONZE DIFFUSION EFFECT
   ========================================== */
body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 30% 40%, rgba(176, 141, 87, 0.025), transparent 45%),
    radial-gradient(circle at 70% 60%, rgba(176, 141, 87, 0.035), transparent 50%);
  animation: bronze-diffusion 12s ease-in-out infinite; /* 🎯 STELLSCHRAUBE 3: Animation Speed (8s-20s) */
  pointer-events: none;
  z-index: 2;
  opacity: 0.6; /* 🎯 STELLSCHRAUBE 4: Effect Intensität (0.3-0.8) */
}

html[data-theme="dim"] body::after {
  background: 
    radial-gradient(circle at 30% 40%, rgba(176, 141, 87, 0.08), transparent 45%),
    radial-gradient(circle at 70% 60%, rgba(176, 141, 87, 0.06), transparent 50%);
  opacity: 0.5;
}

@keyframes bronze-diffusion {
  0%, 100% {
    opacity: 0.4;
    transform: scale(1) translate(0, 0);
  }
  25% {
    opacity: 0.5;
    transform: scale(1.02) translate(1%, -1%);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.05) translate(-1%, 1%);
  }
  75% {
    opacity: 0.5;
    transform: scale(1.03) translate(0.5%, -0.5%);
  }
}

/* ==========================================
   VIGNETTE EFFECT - Library Feeling
   ========================================== */
.site-header::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 0%,
    transparent 60%,
    rgba(44, 62, 80, 0.04) 100%
  );
  pointer-events: none;
  z-index: 1;
}

html[data-theme="dim"] .site-header::before {
  background: radial-gradient(
    ellipse at center,
    transparent 0%,
    transparent 50%,
    rgba(0, 0, 0, 0.4) 100%
  );
}

/* Ensure content is above effects */
.site-header,
.social-bar,
main,
.dv-footer {
  position: relative;
  z-index: 10;
}

/* ==========================================
   ALTERNATIVE: Falling Letters Animation
   Aktiviere dies für fallende Buchstaben statt Pages
   ========================================== */

/* 
#particle-canvas.letters-mode {
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Ctext x='50' y='50' font-size='20' fill='rgba(176,141,87,0.1)' text-anchor='middle'%3EA%3C/text%3E%3C/svg%3E");
  animation: falling-letters 20s linear infinite;
}

@keyframes falling-letters {
  from { background-position: 0 0; }
  to { background-position: 0 100vh; }
}
*/

/* ==========================================
   RESPONSIVE - Performance Optimization
   ========================================== */
@media (max-width: 768px) {
  /* Reduziere Effekte auf Mobile */
  body::after {
    animation: bronze-diffusion 15s ease-in-out infinite;
    opacity: 0.3;
  }
  
  #particle-canvas {
    opacity: 0.25;
  }
  
  html[data-theme="dim"] #particle-canvas {
    opacity: 0.2;
  }
}

/* ==========================================
   STELLSCHRAUBEN ÜBERSICHT
   ========================================== 
   
   🎯 1. Floating Pages Sichtbarkeit:
      #particle-canvas { opacity: 0.4; }
      Werte: 0.2 = sehr subtil, 0.6 = deutlich sichtbar
   
   🎯 2. Papier-Textur Intensität:
      body::before { opacity: 0.3; }
      Werte: 0.1 = kaum sichtbar, 0.5 = stark sichtbar
   
   🎯 3. Animation Geschwindigkeit:
      animation: bronze-diffusion 12s ease-in-out infinite;
      Werte: 8s = schnell, 20s = sehr langsam
   
   🎯 4. Bronze Effect Intensität:
      body::after { opacity: 0.6; }
      Werte: 0.3 = subtil, 0.8 = stark
   
   🎨 FARBEN ÄNDERN:
   
   Light Mode Cream Color:
   linear-gradient(180deg, #faf8f5, #f5f2ed, #f0ece5)
   
   Dark Mode Deep Blue:
   linear-gradient(180deg, #2C3E50, #243442, #1a2631)
   
   Bronze Accents:
   rgba(176, 141, 87, 0.04) - Helleres Bronze
   rgba(176, 141, 87, 0.08) - Dunkleres Bronze
   
   ========================================== */