/* ==========================================================
   Basis
   ========================================================== */
:root {
  --bg-base: #05060f;
  --c1: #7c3aed;  /* Violett */
  --c2: #06b6d4;  /* Cyan */
  --c3: #ec4899;  /* Pink */
  --c4: #3b82f6;  /* Blau */
  --text: #e8e9f3;

  --mx: 50%;      /* Mausposition, per JS gesetzt */
  --my: 50%;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

body {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  background: var(--bg-base);
  color: var(--text);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

.content {
  position: relative;
  z-index: 1;
  min-height: 100vh;
}

/* ==========================================================
   Hintergrund
   ========================================================== */
.bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(ellipse 120% 80% at 50% -10%, #12133a 0%, transparent 60%),
    radial-gradient(ellipse 100% 60% at 50% 110%, #0b1a2e 0%, transparent 60%),
    var(--bg-base);
}

/* --- Aurora-Blobs --- */
.bg__aurora {
  position: absolute;
  inset: -20%;
  filter: blur(90px) saturate(140%);
  opacity: 0.55;
}

.blob {
  position: absolute;
  width: 45vmax;
  height: 45vmax;
  border-radius: 50%;
  mix-blend-mode: screen;
  will-change: transform;
}

.blob--1 {
  background: radial-gradient(circle, var(--c1) 0%, transparent 65%);
  top: 5%;
  left: 10%;
  animation: drift1 22s ease-in-out infinite alternate;
}

.blob--2 {
  background: radial-gradient(circle, var(--c2) 0%, transparent 65%);
  top: 30%;
  right: 5%;
  animation: drift2 26s ease-in-out infinite alternate;
}

.blob--3 {
  background: radial-gradient(circle, var(--c3) 0%, transparent 65%);
  bottom: 0;
  left: 30%;
  width: 38vmax;
  height: 38vmax;
  animation: drift3 30s ease-in-out infinite alternate;
}

.blob--4 {
  background: radial-gradient(circle, var(--c4) 0%, transparent 65%);
  top: 50%;
  left: 0;
  width: 32vmax;
  height: 32vmax;
  animation: drift4 18s ease-in-out infinite alternate;
}

@keyframes drift1 {
  0%   { transform: translate(0, 0) scale(1) rotate(0deg); }
  50%  { transform: translate(15vw, 10vh) scale(1.2) rotate(40deg); }
  100% { transform: translate(5vw, 25vh) scale(0.9) rotate(80deg); }
}

@keyframes drift2 {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(-20vw, -10vh) scale(1.15); }
  100% { transform: translate(-8vw, 15vh) scale(0.85); }
}

@keyframes drift3 {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(18vw, -18vh) scale(1.25); }
  100% { transform: translate(-12vw, -6vh) scale(1); }
}

@keyframes drift4 {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(25vw, -20vh) scale(1.3); }
}

/* --- Perspektiv-Grid --- */
.bg__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 20%, transparent 75%);
          mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 20%, transparent 75%);
  animation: gridPan 40s linear infinite;
}

@keyframes gridPan {
  to { background-position: 64px 64px, 64px 64px; }
}

/* --- Partikel-Canvas --- */
.bg__particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* --- Maus-Spotlight --- */
.bg__spotlight {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    600px circle at var(--mx) var(--my),
    rgba(124, 58, 237, 0.16),
    rgba(6, 182, 212, 0.06) 40%,
    transparent 70%
  );
  transition: opacity 0.4s ease;
}

/* --- Film-Grain --- */
.bg__noise {
  position: absolute;
  inset: -50%;
  opacity: 0.07;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 1.2s steps(6) infinite;
}

@keyframes grain {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-5%, 3%); }
  40%  { transform: translate(4%, -6%); }
  60%  { transform: translate(-3%, 7%); }
  80%  { transform: translate(6%, -2%); }
  100% { transform: translate(0, 0); }
}

/* --- Vignette --- */
.bg__vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0, 0, 0, 0.65) 100%);
}

/* ==========================================================
   Reduzierte Bewegung
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
  .blob,
  .bg__grid,
  .bg__noise {
    animation: none;
  }
}