/* ---------- Blob background (improved) ---------- */

/* Variablen: leicht anpassbar */
:root {
  --blob-1-a: #ff000059; /* start color blob 1 (dark default) */
  --blob-1-b: #00ff004d; /* end color blob 1 */
  --blob-2-a: #0004ff4e; /* start color blob 2 */
  --blob-2-b: #ff00d456; /* end color blob 2 */

  --blob-opacity: 0.14; /* grundopazität */
  --blob-blur: 36px; /* unschärfe */
  --blob-size-mult: 1; /* skaliert blob-Größe global */
}

/* page-bg base: ganz hinten */
.page-bg {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

/* blobs container */
.bg-blobs {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  will-change: transform, opacity;
}

/* common blob rules */
.bg-blobs .blob {
  position: absolute;
  width: 60vmax;
  height: 60vmax;
  opacity: var(--blob-opacity);
  filter: blur(var(--blob-blur));
  transform-origin: center;
  mix-blend-mode: screen; /* weicher Farb-Mix */
  will-change: transform, opacity;
  transition: opacity 320ms ease;
}

/* specific positions & animations */
.bg-blobs .blob-1 {
  left: -10%;
  top: -18%;
  transform: translateZ(0) scale(calc(1 * var(--blob-size-mult)));
  animation: blobFloatA 20s ease-in-out infinite;
  opacity: calc(var(--blob-opacity) * 1.05);
}
.bg-blobs .blob-2 {
  right: -12%;
  bottom: -12%;
  transform: translateZ(0) scale(calc(0.92 * var(--blob-size-mult)));
  animation: blobFloatB 26s ease-in-out infinite;
  opacity: calc(var(--blob-opacity) * 0.98);
}

/* subtle variations so the shapes don't look robotic */
@keyframes blobFloatA {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(0.98);
  }
  25% {
    transform: translate3d(2%, -3%, 0) rotate(4deg) scale(1.03);
  }
  50% {
    transform: translate3d(0%, 4%, 0) rotate(-3deg) scale(1);
  }
  75% {
    transform: translate3d(-2%, -2%, 0) rotate(2deg) scale(0.99);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(0.98);
  }
}
@keyframes blobFloatB {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(0.92);
  }
  25% {
    transform: translate3d(-3%, 2%, 0) rotate(-5deg) scale(0.95);
  }
  50% {
    transform: translate3d(2%, -3%, 0) rotate(3deg) scale(0.94);
  }
  75% {
    transform: translate3d(1%, 2%, 0) rotate(-2deg) scale(0.93);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(0.92);
  }
}

/* Noise overlay (subtil) */
.bg-noise {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64"><filter id="t"><feTurbulence baseFrequency="0.9" stitchTiles="stitch" numOctaves="2"/></filter><rect width="100%" height="100%" filter="url(%23t)" opacity="0.03"/></svg>');
  mix-blend-mode: overlay;
  opacity: 0.9;
  z-index: 2;
}

/* ---- Blob speed control (ergänzung/ersatz) ---- */
/* Definiere Dauer in Sekunden (kürzer = schneller) */
:root{
  --blob-duration-a: 7s;  /* früher 20s */
  --blob-duration-b: 9s;  /* früher 26s */
}

/* Verwende die Variablen in den Blob-Klassen */
.bg-blobs .blob-1 {
  left: -10%;
  top: -18%;
  transform: translateZ(0) scale(calc(1 * var(--blob-size-mult)));
  animation: blobFloatA var(--blob-duration-a) ease-in-out infinite;
  opacity: calc(var(--blob-opacity) * 1.05);
}
.bg-blobs .blob-2 {
  right: -12%;
  bottom: -12%;
  transform: translateZ(0) scale(calc(0.92 * var(--blob-size-mult)));
  animation: blobFloatB var(--blob-duration-b) ease-in-out infinite;
  opacity: calc(var(--blob-opacity) * 0.98);
}

/* Optional: wenn du beide synchron schneller willst, reduziere die Werte, z. B. 8s / 10s */


/* ensure UI content sits above background */
main,
.center-fixed,
#sidePanel,
.top-controls {
  position: relative;
  z-index: 100;
}

/* Respect user motion preferences -> disable animations */
@media (prefers-reduced-motion: reduce) {
  .bg-blobs .blob {
    animation: none !important;
    transition: none !important;
    filter: none !important;
  }
  .bg-noise {
    display: none;
  }
}

/* Responsive fine tuning */
@media (max-width: 920px) {
  .bg-blobs .blob {
    width: 70vmax;
    height: 70vmax;
    filter: blur(calc(var(--blob-blur) * 0.9));
  }
}
@media (max-width: 480px) {
  .bg-blobs .blob {
    width: 95vmax;
    height: 95vmax;
    filter: blur(calc(var(--blob-blur) * 0.7));
    opacity: calc(var(--blob-opacity) * 0.9);
  }
}