/* Hermes Workbench — Animated Background */
/* Integriere diese Datei im Dashboard-HTML via <link rel="stylesheet" href="background-animation.css"> */

/* ===== Background layer ===== */
.workbench-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  background-color: #0a2528;
  overflow: hidden;
  pointer-events: none;
}

.workbench-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("background-animation.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  opacity: 0.25;
  animation: bgFloat 12s ease-in-out infinite;
}

/* Alternative: inline SVG via data-URI (falls keine externe SVG-Datei geladen werden kann) */
/* Kommentiere ::before aus und nutze stattdessen das inline-SVG im HTML mit der .workbench-bg Klasse */

/* ===== Subtle animated overlay for extra depth ===== */
.workbench-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 80%, rgba(88, 166, 255, 0.04) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(88, 166, 255, 0.03) 0%, transparent 50%);
  animation: overlayPulse 10s ease-in-out infinite alternate;
}

/* ===== Animations ===== */
@keyframes bgFloat {
  0%, 100% { transform: translateY(0px) scale(1); }
  50%      { transform: translateY(-10px) scale(1.01); }
}

@keyframes overlayPulse {
  0%   { opacity: 0.6; }
  100% { opacity: 1; }
}

/* ===== Responsive behaviour ===== */
@media (max-width: 768px) {
  .workbench-bg::before {
    background-position: 55% center;
    opacity: 0.18;
  }
}

@media (max-width: 480px) {
  .workbench-bg::before {
    background-position: 60% center;
    opacity: 0.15;
  }
}

/* ===== Optional: CSS-only fallback if SVG is unavailable ===== */
/* Uncomment below to use a pure-CSS generated scene instead of the SVG */
/*
.workbench-bg.fallback::before {
  background: none;
  opacity: 1;
}

.workbench-bg.fallback {
  background:
    radial-gradient(circle at 50% 50%, #0f2e32 0%, #0a2528 70%),
    linear-gradient(180deg, #0a2528 0%, #07191c 100%);
}
*/