/* background.css — converted from src/components/BackgroundEffect.tsx
   (framer-motion animate={{x,y,scale}} loops replaced with CSS keyframes;
   geometry kept in plain CSS so it never depends on Tailwind's arbitrary-value JIT) */

.bg-fx-root {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background-color: #020617;
}

.bg-fx-blob {
  position: absolute;
  border-radius: 9999px;
  transform: translateZ(0);
  will-change: transform;
}

.bg-fx-blob-1 {
  top: -20%;
  left: -10%;
  width: 80vw;
  height: 80vh;
  background: rgba(79, 70, 229, 0.15); /* accent-600/15 */
  filter: blur(120px);
  animation: bgBlob1 25s ease-in-out infinite;
}

.bg-fx-blob-2 {
  bottom: -20%;
  right: -10%;
  width: 90vw;
  height: 90vh;
  background: rgba(147, 51, 234, 0.10); /* purple-600/10 */
  filter: blur(140px);
  animation: bgBlob2 30s ease-in-out infinite;
}

.bg-fx-pulse {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 100vh;
  background: radial-gradient(circle, rgba(6, 182, 212, 0.1) 0%, transparent 70%);
  animation: bgPulse 15s ease-in-out infinite;
}

.bg-fx-overlay-1 {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, #020617, transparent, #020617);
  opacity: 0.6;
}

.bg-fx-overlay-2 {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, transparent 30%, #020617 110%);
  opacity: 0.7;
}

@keyframes bgBlob1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(50px, 30px) scale(1.2); }
}
@keyframes bgBlob2 {
  0%, 100% { transform: translate(0, 0) scale(1.2); }
  50% { transform: translate(-60px, -40px) scale(1); }
}
@keyframes bgPulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.6; }
}

@media (prefers-reduced-motion: reduce) {
  .bg-fx-blob-1, .bg-fx-blob-2, .bg-fx-pulse { animation: none; }
}