/* 
  BACKGROUND STYLES - Seub Germain Portfolio
  Optimized for speed and compatibility
  Design Philosophy: Cyberpunk + Neon + Dynamic Energy
*/

/* Flame Gradient Background - Pure CSS, no images needed for fallback */
.flame-bg {
  background: linear-gradient(135deg, #0a0e27 0%, #1a0033 25%, #330011 50%, #1a0033 75%, #0a0e27 100%);
  position: relative;
  overflow: hidden;
}

.flame-bg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 20% 50%, rgba(255, 100, 0, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 80% 50%, rgba(100, 50, 255, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 50% 0%, rgba(255, 150, 0, 0.2) 0%, transparent 60%),
    radial-gradient(circle at 50% 100%, rgba(100, 150, 255, 0.2) 0%, transparent 60%);
  animation: flameShift 8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes flameShift {
  0%, 100% {
    opacity: 0.8;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
}

/* Main Hero Background */
.hero-bg {
  background: linear-gradient(180deg, #0f0f1e 0%, #1a0033 50%, #0f0f1e 100%);
  position: relative;
  overflow: hidden;
}

.hero-bg::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('/images/flame-bg.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  opacity: 0.7;
  mix-blend-mode: screen;
  pointer-events: none;
}

/* Cyberpunk Grid Background */
.grid-bg {
  background-color: #0a0e27;
  background-image: 
    linear-gradient(0deg, transparent 24%, rgba(100, 200, 255, 0.05) 25%, rgba(100, 200, 255, 0.05) 26%, transparent 27%, transparent 74%, rgba(100, 200, 255, 0.05) 75%, rgba(100, 200, 255, 0.05) 76%, transparent 77%, transparent),
    linear-gradient(90deg, transparent 24%, rgba(100, 200, 255, 0.05) 25%, rgba(100, 200, 255, 0.05) 26%, transparent 27%, transparent 74%, rgba(100, 200, 255, 0.05) 75%, rgba(100, 200, 255, 0.05) 76%, transparent 77%, transparent);
  background-size: 50px 50px;
  position: relative;
}

/* Neon Accent Overlays */
.neon-accent {
  position: relative;
}

.neon-accent::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, 
    rgba(0, 255, 200, 0.1) 0%, 
    rgba(255, 0, 150, 0.1) 50%, 
    rgba(0, 255, 200, 0.1) 100%);
  animation: neonPulse 3s ease-in-out infinite;
  pointer-events: none;
}

@keyframes neonPulse {
  0%, 100% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.6;
  }
}

/* Dark overlay for text readability */
.dark-overlay {
  background: rgba(10, 14, 39, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Gradient Text for Headlines */
.gradient-text {
  background: linear-gradient(90deg, 
    #00ffcc 0%, 
    #ff00ff 25%, 
    #ff6600 50%, 
    #00ffcc 75%, 
    #ff00ff 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 4s linear infinite;
}

@keyframes gradientShift {
  0% {
    background-position: 0% center;
  }
  100% {
    background-position: 200% center;
  }
}

/* Teal-Cyan Primary Gradient */
.primary-gradient {
  background: linear-gradient(135deg, #4a9fb5 0%, #00d4ff 100%);
}

/* Vibrant Secondary Color Gradients */
.secondary-pink {
  background: linear-gradient(135deg, #ff69b4 0%, #ff1493 100%);
}

.secondary-purple {
  background: linear-gradient(135deg, #9d4edd 0%, #c77dff 100%);
}

.secondary-turquoise {
  background: linear-gradient(135deg, #00d4aa 0%, #00ffff 100%);
}

.secondary-coral {
  background: linear-gradient(135deg, #ff6b6b 0%, #ff8c42 100%);
}

/* Glow Effects */
.glow-cyan {
  box-shadow: 0 0 20px rgba(0, 255, 204, 0.5), 
              0 0 40px rgba(0, 255, 204, 0.3);
}

.glow-magenta {
  box-shadow: 0 0 20px rgba(255, 0, 150, 0.5), 
              0 0 40px rgba(255, 0, 150, 0.3);
}

.glow-orange {
  box-shadow: 0 0 20px rgba(255, 102, 0, 0.5), 
              0 0 40px rgba(255, 102, 0, 0.3);
}

/* Smooth transitions */
* {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Mobile optimization */
@media (max-width: 768px) {
  .flame-bg::before {
    animation: flameShift 6s ease-in-out infinite;
  }
  
  .grid-bg {
    background-size: 30px 30px;
  }
}