/* ==========================================================================
   GLOBAL BACKGROUND — digitalinhalt.de
   Particle Canvas, Aurora Blobs, Mouse-Glow, Grid Pattern, Grain Overlay
   Wird auf ALLEN Seiten geladen.
   ========================================================================== */

/* ---- Wrapper fuer alle Background-Elemente ---- */
.di-global-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* ---- Neural Network Canvas ---- */
#di-neural-canvas {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* ---- Aurora Blobs ---- */
.di-aurora-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.4;
  will-change: transform;
}

.di-aurora-blob-1 {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, #7c3aed 0%, transparent 70%);
  top: -10%;
  left: -5%;
  animation: di-aurora1 18s ease-in-out infinite;
}

.di-aurora-blob-2 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, #06b6d4 0%, transparent 70%);
  bottom: -15%;
  right: -5%;
  animation: di-aurora2 22s ease-in-out infinite;
}

.di-aurora-blob-3 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, #f43f5e 0%, transparent 70%);
  top: 40%;
  left: 50%;
  opacity: 0.2;
  animation: di-aurora3 25s ease-in-out infinite;
}

.di-aurora-blob-4 {
  width: 350px;
  height: 350px;
  background: radial-gradient(circle, #7c3aed 0%, transparent 70%);
  top: 20%;
  right: 20%;
  opacity: 0.25;
  animation: di-aurora4 20s ease-in-out infinite;
}

@keyframes di-aurora1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(80px, 60px) scale(1.1); }
  66% { transform: translate(-40px, 30px) scale(0.95); }
}

@keyframes di-aurora2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(-60px, -40px) scale(1.15); }
  66% { transform: translate(50px, -20px) scale(0.9); }
}

@keyframes di-aurora3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(100px, -60px) scale(1.2); }
  50% { transform: translate(-80px, 40px) scale(0.85); }
  75% { transform: translate(40px, 80px) scale(1.1); }
}

@keyframes di-aurora4 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-120px, 60px) scale(1.15); }
}

/* ---- Grid Pattern Overlay ---- */
.di-grid-pattern {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(124, 58, 237, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124, 58, 237, 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
}

/* ---- Mouse-Follow Glow ---- */
.di-mouse-glow {
  position: fixed;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.12) 0%, transparent 70%);
  pointer-events: none;
  z-index: 2;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s;
  will-change: left, top;
  opacity: 0;
}

.di-mouse-glow.visible {
  opacity: 1;
}

/* ---- SVG Grain Overlay ---- */
.di-grain-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  opacity: 0.03;
  pointer-events: none;
}

/* ---- Alle Seiten brauchen dunklen Hintergrund ---- */
body {
  background: #06060f !important;
}

/* Aller Seiteninhalt muss ueber dem Background liegen */
.site-container,
.site,
.content-wrap,
.site-main,
.entry-content,
.site-header,
.site-footer,
header,
main,
footer,
section,
aside,
nav {
  position: relative;
  z-index: 5;
}

/* ---- Responsive: kleinere Blobs auf Mobile ---- */
@media (max-width: 768px) {
  .di-aurora-blob-1 { width: 300px; height: 300px; }
  .di-aurora-blob-2 { width: 250px; height: 250px; }
  .di-aurora-blob-3 { width: 200px; height: 200px; }
  .di-aurora-blob-4 { display: none; }
  .di-mouse-glow { display: none; }
}