/* background.css Background styles for the glowing pyramid effect */

/* Main background container */
.background-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 110%;
    height: 100%;
    z-index: -1;
    background-color: var(--dark-bg);
    opacity: 0.85; /* Adjust this to control overall background opacity */
    
  }
  
  /* Container for your pyramid SVGs */
  .pyramid-container {
    position: absolute;
    width: 20%; /* Adjust this value to change overall size */
    right: 30%; /* Position from the right edge */
    top: 25%;
    transform: translateY(-50%);

  }
  
  /* Base SVG styles */
  .dark-pyramid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
  }
  
  .glow-pyramid {
    position: absolute;
    top: 0;
    left: 0;
    width: 120%;
    height: 120%;
    overflow: visible;
  }
  
  /* Make sure images fill their containers */
  .dark-pyramid img, .glow-pyramid img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  
  /* Dark pyramid is always visible */
  .dark-pyramid {
    z-index: 1;
  }
  
  /* Glowing pyramid will animate */
  .glow-pyramid {
    z-index: 2;
    opacity: 0;
    filter: drop-shadow(0 0 8px var(--neon-blue)) 
           drop-shadow(0 0 16px rgba(0, 240, 255, 0.7));
    animation: glowPulse 8s infinite ease-in-out;
  }
  
  /* Glow animation */
  @keyframes glowPulse {
    0% { 
      opacity: 0; 
    }
    50% { 
      opacity: 0.9; 
    }
    100% { 
      opacity: 0; 
    }
  }