/* =============================================
   PORTFOLIO - INTERACTIVE BACKGROUND
   File: css/background.css
   Purpose: Animated mesh gradient background
   ============================================= */

#interactive-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -20;
  pointer-events: none;
  overflow: hidden;
  background: #051424;
}

.bg-mesh {
  position: absolute;
  width: 150%;
  height: 150%;
  top: -25%;
  left: -25%;
  background:
    radial-gradient(
      circle at var(--mx, 50%) var(--my, 50%),
      rgba(75, 226, 119, 0.05) 0%,
      transparent 40%
    ),
    radial-gradient(
      circle at calc(100% - var(--mx, 50%)) calc(100% - var(--my, 50%)),
      rgba(124, 208, 255, 0.05) 0%,
      transparent 40%
    );
  transition: transform 0.2s ease-out;
}