/* ============================================
   ANIMATED GRADIENT BACKGROUND LAYERS
   Modular file (NON-video pages)
   ============================================ */

   .bg-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  
    /* ⬇️ IMPORTANT FIX:
       Previously -1, which put the gradient *under* the body background.
       z-index: 0 places it ABOVE the body background but BELOW your content,
       which uses z-index: 1, 2, and 10.
    */
    z-index: 0;
  
    pointer-events: none;
    background-size: 400% 400%;
    background-blend-mode: screen;
    filter: brightness(1.1) saturate(1.3) blur(8px);
    will-change: opacity, background-position;
    transition: opacity 2s ease;
  }
  
  /* Gradient Layers */
  
  /* 
     The commented gradients below are your alternate color themes.
     Leaving them intact for switching easily based on vibe.
  */
  
  .bg1 {
    background-image: linear-gradient(-45deg, #000000, #0a0d12, #0f1b26, #0a2e38); /* Techno Cyan Drift */
    /* background-image: linear-gradient(-45deg, #000000, #0b0f0c, #112417, #0e2e22); */ /* Acid-House Pulse (More energetic, still dark) */
    /* background-image: linear-gradient(-45deg, #000000, #0c0a12, #140f25, #0e1530); */ /* Dark Purple/Blue Warehouse (Moody, melodic-tech) */
  
    animation: gradientMotion 30s ease infinite, fadeToggle 60s ease-in-out infinite;
  }
  
  .bg2 {
    background-image: linear-gradient(-45deg, #000000, #0a0d12, #0f1b26, #0a2e38); /* Techno Cyan Drift */
    /* background-image: linear-gradient(-45deg, #000000, #0b0f0c, #112417, #0e2e22); */ /* Acid-House Pulse (More energetic, still dark) */
    /* background-image: linear-gradient(-45deg, #000000, #0c0a12, #140f25, #0e1530); */ /* Dark Purple/Blue Warehouse (Moody, melodic-tech) */
  
    animation: gradientMotion 30s ease infinite reverse, fadeToggleAlt 60s ease-in-out infinite;
    opacity: 0;
  }
  
  /* Smooth horizontal movement */
  @keyframes gradientMotion {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }
  
  /* Fade timing for .bg1 */
  @keyframes fadeToggle {
    0%, 25%, 100% { opacity: 1; }
    50%, 75%      { opacity: 0; }
  }
  
  /* Opposite fade for .bg2 */
  @keyframes fadeToggleAlt {
    0%, 25%, 100% { opacity: 0; }
    50%, 75%      { opacity: 1; }
  }
  
  /* Mobile & performance-friendly adjustments */
  @media (max-width: 768px) {
    .bg-layer {
      background-size: 200% 200%;
      filter: brightness(1.05) saturate(1.2) blur(5px);
    }
  
    .bg1,
    .bg2 {
      /* animation-duration: 45s, 90s; */ /* Reduced Speed Background Animation */
      animation-duration: 30s, 60s;  /* Full Speed Background Animation */
    }
  }
  
  /* Respect user accessibility preferences */
  @media (prefers-reduced-motion: reduce) {
    .bg-layer {
      display: none !important;
    }
  
    body {
      background-color: #f5f5f5;
      background-image: linear-gradient(-45deg, #e2ded2, #d4cabc, #c5b8a6, #f0ede7);
      background-size: cover;
      background-position: center;
    }
  }