/* ============================================================
   Animated Background Gradient — GPU-Accelerated
   ============================================================ */

#bg-container {
  overflow: hidden;
}

/* Base gradient layer */
#bg-gradient {
  background: radial-gradient(
      ellipse 80% 60% at 20% 40%,
      rgba(99, 58, 234, 0.12) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse 60% 80% at 80% 60%,
      rgba(29, 78, 216, 0.10) 0%,
      transparent 55%
    ),
    radial-gradient(
      ellipse 70% 50% at 50% 80%,
      rgba(139, 92, 246, 0.08) 0%,
      transparent 50%
    ),
    #000000;
  will-change: transform;
}

/* Animated overlay orb 1 — slow drift top-left to center */
#bg-gradient::before {
  content: '';
  position: absolute;
  top: -20%;
  left: -10%;
  width: 70%;
  height: 70%;
  background: radial-gradient(
    circle,
    rgba(99, 58, 234, 0.10) 0%,
    rgba(59, 130, 246, 0.05) 40%,
    transparent 70%
  );
  border-radius: 50%;
  animation: drift-1 25s ease-in-out infinite alternate;
  will-change: transform;
  pointer-events: none;
}

/* Animated overlay orb 2 — slow drift bottom-right */
#bg-gradient::after {
  content: '';
  position: absolute;
  bottom: -30%;
  right: -15%;
  width: 60%;
  height: 60%;
  background: radial-gradient(
    circle,
    rgba(29, 78, 216, 0.08) 0%,
    rgba(139, 92, 246, 0.04) 40%,
    transparent 65%
  );
  border-radius: 50%;
  animation: drift-2 30s ease-in-out infinite alternate;
  will-change: transform;
  pointer-events: none;
}

@keyframes drift-1 {
  0% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(30%, 25%) scale(1.15);
  }
  100% {
    transform: translate(15%, 10%) scale(1.05);
  }
}

@keyframes drift-2 {
  0% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(-25%, -20%) scale(1.1);
  }
  100% {
    transform: translate(-10%, -15%) scale(1.05);
  }
}

/* ----- Light mode adjustments ----- */
html:not(.dark) #bg-gradient {
  background: radial-gradient(
      ellipse 80% 60% at 20% 40%,
      rgba(99, 58, 234, 0.04) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse 60% 80% at 80% 60%,
      rgba(29, 78, 216, 0.03) 0%,
      transparent 55%
    ),
    #FAFAFA;
}

html:not(.dark) #bg-gradient::before {
  background: radial-gradient(
    circle,
    rgba(99, 58, 234, 0.03) 0%,
    transparent 60%
  );
}

html:not(.dark) #bg-gradient::after {
  background: radial-gradient(
    circle,
    rgba(29, 78, 216, 0.02) 0%,
    transparent 60%
  );
}