/**
 * Background Effects Styles
 * Based on FM-NEXUS design
 */


/* ============================================
   UTILITY CLASSES
   ============================================ */
.fixed { position: fixed; }
.absolute { position: absolute; }
.relative { position: relative; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.-z-10 { z-index: -10; }
.z-10 { z-index: 10; }
.overflow-hidden { overflow: hidden; }
.pointer-events-none { pointer-events: none; }


/* ============================================
   MESH GRADIENT BACKGROUND
   ============================================ */
.bg-mesh {
  background-image: 
    radial-gradient(at 40% 20%, hsla(302, 99%, 45%, 0.15) 0px, transparent 50%),
    radial-gradient(at 80% 0%, hsla(180, 87%, 57%, 0.15) 0px, transparent 50%),
    radial-gradient(at 0% 50%, hsla(302, 99%, 45%, 0.1) 0px, transparent 50%),
    radial-gradient(at 80% 50%, hsla(180, 87%, 57%, 0.1) 0px, transparent 50%),
    radial-gradient(at 0% 100%, hsla(302, 99%, 45%, 0.15) 0px, transparent 50%);
  background-size: 100% 100%;
  background-attachment: fixed;
}

/* Dark theme mesh */
.dark .bg-mesh,
[data-theme="dark"] .bg-mesh {
  background-image: 
    radial-gradient(at 40% 20%, hsla(302, 99%, 50%, 0.2) 0px, transparent 50%),
    radial-gradient(at 80% 0%, hsla(180, 87%, 50%, 0.2) 0px, transparent 50%),
    radial-gradient(at 0% 50%, hsla(302, 99%, 50%, 0.15) 0px, transparent 50%),
    radial-gradient(at 80% 50%, hsla(180, 87%, 50%, 0.15) 0px, transparent 50%),
    radial-gradient(at 0% 100%, hsla(302, 99%, 50%, 0.2) 0px, transparent 50%);
}


/* ============================================
   GRADIENT ORBS
   ============================================ */
.gradient-orb {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
  animation: float 12s ease-in-out infinite;
  transition: transform 0.3s ease-out;
}

/* Light theme orbs */
.gradient-orb.orb-1 {
  background: radial-gradient(circle, hsla(302, 99%, 45%, 0.12) 0%, transparent 70%);
  filter: blur(60px);
  animation-delay: 0s;
}

.gradient-orb.orb-2 {
  background: radial-gradient(circle, hsla(180, 87%, 57%, 0.12) 0%, transparent 70%);
  filter: blur(60px);
  animation-delay: 4s;
}

.gradient-orb.orb-3 {
  background: radial-gradient(circle, hsla(302, 99%, 45%, 0.1) 0%, transparent 70%);
  filter: blur(80px);
  animation-delay: 8s;
}

/* Dark theme orbs - более яркие */
.dark .gradient-orb.orb-1,
[data-theme="dark"] .gradient-orb.orb-1 {
  background: radial-gradient(circle, hsla(302, 99%, 50%, 0.18) 0%, transparent 70%);
}

.dark .gradient-orb.orb-2,
[data-theme="dark"] .gradient-orb.orb-2 {
  background: radial-gradient(circle, hsla(180, 87%, 50%, 0.18) 0%, transparent 70%);
}

.dark .gradient-orb.orb-3,
[data-theme="dark"] .gradient-orb.orb-3 {
  background: radial-gradient(circle, hsla(302, 99%, 50%, 0.15) 0%, transparent 70%);
}


/* ============================================
   NOISE OVERLAY
   ============================================ */
.noise-overlay {
  position: absolute;
  inset: 0;
  opacity: 0.02;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  pointer-events: none;
}

/* Dark theme - более заметный шум */
.dark .noise-overlay,
[data-theme="dark"] .noise-overlay {
  opacity: 0.03;
}


/* ============================================
   ANIMATION
   ============================================ */
@keyframes float {
  0% {
    transform: translateY(0px) translateX(0px);
  }
  25% {
    transform: translateY(-30px) translateX(20px);
  }
  50% {
    transform: translateY(-10px) translateX(-15px);
  }
  75% {
    transform: translateY(20px) translateX(10px);
  }
  100% {
    transform: translateY(0px) translateX(0px);
  }
}

/* Отключаем анимацию для тех, кто предпочитает меньше движения */
@media (prefers-reduced-motion: reduce) {
  .gradient-orb {
    animation: none !important;
  }
}


/* ============================================
   PERFORMANCE OPTIMIZATIONS
   ============================================ */
.gradient-orb {
  /* GPU acceleration */
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}


/* ============================================
   FLEX UTILITIES
   ============================================ */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-1 { flex: 1; }
.min-h-screen { min-height: 100vh; }