@import '/StationeersServerUI/static/css/variables.css';

header {
    width: 100%;
    background-color: var(--bg-panel);
    text-align: center;
    padding: 20px 0;
    border-bottom: 2px solid var(--primary);
    box-shadow: 0 4px 20px var(--primary-glow);
    position: relative;
    isolation: isolate; /* Better stacking context */
  }
  
  header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: 
      linear-gradient(rgba(0, 255, 171, 0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0, 255, 171, 0.05) 1px, transparent 1px);
    background-size: 20px 20px;
    background-position: center center;
    z-index: 0;
  }
  
  #space-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at bottom, #1b2735 0%, var(--bg-dark) 100%);
    z-index: -2;
    will-change: transform;
    overflow: hidden;
  }
  
  /* Stars Layer 1 - smaller and more scattered stars */
  #space-background::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 1;
    pointer-events: none;
    background-image: 
      radial-gradient(1px 1px at 17px 43px, var(--text-bright), transparent),
      radial-gradient(1px 1px at 39px 157px, var(--text-header), transparent),
      radial-gradient(1px 1px at 73px 91px, var(--text-header), transparent),
      radial-gradient(1px 1px at 109px 134px, var(--text-bright), transparent),
      radial-gradient(1px 1px at 143px 27px, var(--text-bright), transparent),
      radial-gradient(1px 1px at 53px 79px, var(--text-header), transparent),
      radial-gradient(1px 1px at 85px 123px, var(--text-bright), transparent),
      radial-gradient(1px 1px at 174px 36px, var(--text-header), transparent),
      radial-gradient(1px 1px at 102px 64px, var(--text-bright), transparent),
      radial-gradient(1px 1px at 127px 187px, var(--text-header), transparent);
    background-size: 250px 250px;
    opacity: 0.4;
  }
  
  /* Stars Layer 2 - larger and brighter stars with different pattern */
  #space-background::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 2;
    pointer-events: none;
    background-image: 
      radial-gradient(2px 2px at 43px 267px, var(--text-header), transparent),
      radial-gradient(2px 2px at 167px 312px, var(--text-bright), transparent),
      radial-gradient(2px 2px at 213px 117px, var(--text-header), transparent),
      radial-gradient(2px 2px at 81px 209px, var(--text-bright), transparent),
      radial-gradient(2px 2px at 239px 349px, var(--text-header), transparent),
      radial-gradient(2px 2px at 124px 281px, var(--text-bright), transparent),
      radial-gradient(2px 2px at 198px 153px, var(--text-header), transparent),
      radial-gradient(2px 2px at 56px 379px, var(--text-bright), transparent),
      radial-gradient(1.5px 1.5px at 297px 246px, var(--text-header), transparent),
      radial-gradient(1.5px 1.5px at 147px 133px, var(--text-bright), transparent);
    background-size: 400px 400px;
    opacity: 0.5;
    animation: stars 120s linear infinite;
  }
  
  /* Nebula Element - overlaid on the stars layer */
  #space-background::before {
    background: 
      radial-gradient(1px 1px at 17px 43px, var(--text-bright), transparent),
      radial-gradient(1px 1px at 39px 157px, var(--text-header), transparent),
      radial-gradient(1px 1px at 73px 91px, var(--text-header), transparent),
      radial-gradient(1px 1px at 109px 134px, var(--text-bright), transparent),
      radial-gradient(1px 1px at 143px 27px, var(--text-bright), transparent),
      radial-gradient(1px 1px at 53px 79px, var(--text-header), transparent),
      radial-gradient(1px 1px at 85px 123px, var(--text-bright), transparent),
      radial-gradient(1px 1px at 174px 36px, var(--text-header), transparent),
      radial-gradient(1px 1px at 102px 64px, var(--text-bright), transparent),
      radial-gradient(1px 1px at 127px 187px, var(--text-header), transparent),
      radial-gradient(700px 500px at 65% 75%, var(--primary-glow), transparent),
      radial-gradient(500px 400px at 20% 25%, rgba(0, 132, 255, 0.15), transparent);
    background-size: 250px 250px, 250px 250px, 250px 250px, 250px 250px, 250px 250px, 
                     250px 250px, 250px 250px, 250px 250px, 250px 250px, 250px 250px, 
                     100% 100%, 100% 100%;
    
  }
  
  /* Animation for stars */
  @keyframes stars {
    0% {
      background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
    }
    100% {
      background-position: 250px 250px, 250px 250px, 250px 250px, 250px 250px, 250px 250px, 
                           250px 250px, 250px 250px, 250px 250px, 250px 250px, 250px 250px, 
                           0 0, 0 0;
    }
  }
  
  /* Animation for nebula */
  @keyframes nebulaPulse {
    0% {
      opacity: 0.3;
      background-size: 250px 250px, 250px 250px, 250px 250px, 250px 250px, 250px 250px, 
                       250px 250px, 250px 250px, 250px 250px, 250px 250px, 250px 250px, 
                       100% 100%, 100% 100%;
    }
    50% {
      opacity: 0.4;
      background-size: 250px 250px, 250px 250px, 250px 250px, 250px 250px, 250px 250px, 
                       250px 250px, 250px 250px, 250px 250px, 250px 250px, 250px 250px, 
                       110% 110%, 105% 105%;
    }
    100% {
      opacity: 0.5;
      background-size: 250px 250px, 250px 250px, 250px 250px, 250px 250px, 250px 250px, 
                       250px 250px, 250px 250px, 250px 250px, 250px 250px, 250px 250px, 
                       100% 100%, 100% 100%;
    }
  }
  
  
  #planet-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
    overflow: hidden; /* Prevents any overflow issues */
  }
  
  @keyframes orbit {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
  }
  
  @keyframes stars {
    0% { transform: translateY(0px); }
    100% { transform: translateY(-2000px); }
  }
  
  .orbit {
    transform-origin: center center;
  }
  
  .planet {
    transform: translateY(-50%);
    will-change: transform; /* Improves animation performance */
  }
  
  #banner {
    width: 60%;
    max-width: 500px;
    border-radius: 12px;
    position: relative;
    z-index: 1;
    box-shadow: 0 0 30px rgba(0, 255, 171, 0.4);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
    will-change: transform, box-shadow; /* Optimize performance */
  }
  
  #banner:hover {
    transform: scale(1.02);
    box-shadow: 0 0 40px rgba(0, 255, 171, 0.6);
  }