/* ================================
   Background Texture - Gradient Mesh
   Organic, flowing gradients for visual interest
   ================================ */

body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  opacity: 1;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(91, 159, 215, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(123, 104, 238, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 40% 80%, rgba(78, 205, 196, 0.05) 0%, transparent 50%),
    radial-gradient(ellipse at 90% 70%, rgba(157, 78, 221, 0.04) 0%, transparent 50%);
  animation: gradientShift 20s ease infinite;
  transition: opacity 0.5s ease;
}

/* Darker/more visible in dark mode */
[data-theme="dark"] body::before {
  background:
    radial-gradient(ellipse at 20% 30%, rgba(91, 159, 215, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(123, 104, 238, 0.1) 0%, transparent 50%),
    radial-gradient(ellipse at 40% 80%, rgba(78, 205, 196, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 90% 70%, rgba(157, 78, 221, 0.06) 0%, transparent 50%);
}

/* Gentle animation for organic feel */
@keyframes gradientShift {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(2%, -2%) scale(1.02);
  }
  66% {
    transform: translate(-2%, 2%) scale(0.98);
  }
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  body::before {
    animation: none;
  }
}