:root {
    --color-bg1: #000000;
    --color-bg2: #021204;
    --color1: 0, 255, 0;
    --color2: 0, 255, 0;
    --color3: 0, 255, 0;
    --color4: 0, 255, 0;
    --color5: 0, 255, 0;
    --color-interactive: 0, 255, 0;
    --circle-size: 100%;
    --blending: hard-light;
  }
  
  html, body {
    font-family: 'Courier New', monospace;
    margin: 0;
    padding: 0;
    background-color: #000;
  }
  
  .gradient-bg {
    width: 100vw;
    height: 100dvh;
    position: relative;
    overflow: hidden;
    background: linear-gradient(120deg, var(--color-bg1), var(--color-bg2));
    top: 0;
    left: 0;
  }
  
  .gradient-bg svg {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
  }
  
  .gradients-container {
    filter: url(#goo) blur(30px);
    width: 100%;
    height: 100%;
  }
  
  .g1, .g2, .g3, .g4, .g5, .g6, .g7, .g8, .g9, .g10 {
    position: absolute;
    mix-blend-mode: var(--blending);
    background: radial-gradient(circle at center, rgba(0, 255, 0, 0.4) 0, rgba(0, 255, 0, 0) 50%);
    width: var(--circle-size);
    height: var(--circle-size);
    top: calc(50% - var(--circle-size) / 2);
    left: calc(50% - var(--circle-size) / 2);
    opacity: 0.5;
  }
  
  .g1 { animation: moveVertical 15s ease infinite; }
  .g2 {
    transform-origin: calc(50% - 400px);
    animation: moveInCircle 10s reverse infinite;
  }
  .g3 {
    top: calc(50% - var(--circle-size) / 2 + 200px);
    left: calc(50% - var(--circle-size) / 2 - 500px);
    transform-origin: calc(50% + 400px);
    animation: moveInCircle 20s linear infinite;
  }
  .g4 {
    transform-origin: calc(50% - 200px);
    animation: moveHorizontal 20s ease infinite;
    opacity: 0.25;
  }
  .g5 {
    width: calc(var(--circle-size) * 2);
    height: calc(var(--circle-size) * 2);
    top: calc(50% - var(--circle-size));
    left: calc(50% - var(--circle-size));
    transform-origin: calc(50% - 800px) calc(50% + 200px);
    animation: moveInCircle 10s ease infinite;
  }
  
  /* Extra glowing orbs */
  .g6 {
    top: 10%;
    left: 20%;
    animation: moveInCircle 15s ease-in-out infinite;
  }
  .g7 {
    top: 60%;
    left: 70%;
    animation: moveInCircle 18s reverse infinite;
  }
  .g8 {
    top: 30%;
    left: 80%;
    animation: moveVertical 12s ease-in-out infinite;
  }
  .g9 {
    top: 80%;
    left: 10%;
    animation: moveHorizontal 14s ease-in-out infinite;
  }
  .g10 {
    top: 15%;
    left: 50%;
    animation: moveInCircle 25s linear infinite;
  }
  
  

  
  .interactive {
    position: absolute;
    background: radial-gradient(circle at center, rgba(0, 255, 0, 0.8) 0, rgba(0, 255, 0, 0) 50%);
    mix-blend-mode: var(--blending);
    width: 100%;
    height: 100%;
    top: -50%;
    left: -50%;
    opacity: 0.9;
  }
  
  @keyframes moveInCircle {
    0% { transform: rotate(0deg); }
    50% { transform: rotate(180deg); }
    100% { transform: rotate(360deg); }
  }
  
  @keyframes moveVertical {
    0% { transform: translateY(-50%); }
    50% { transform: translateY(50%); }
    100% { transform: translateY(-50%); }
  }
  
  @keyframes moveHorizontal {
    0% { transform: translateX(-50%) translateY(-10%); }
    50% { transform: translateX(50%) translateY(10%); }
    100% { transform: translateX(-50%) translateY(-10%); }
  }
  
  /* Music + Home buttons */
  .ui-controls {
    position: fixed;
    top: 20px;
    right: 20px;
    display: flex;
    gap: 12px;
    z-index: 999;
  }
  
  #musicToggle,
  .home-btn {
    background: rgba(0, 0, 0, 0.4);
    border: none;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
    cursor: pointer;
    transition: background 0.2s ease;
  }
  
  #musicToggle:hover,
  .home-btn:hover {
    background: rgba(0, 255, 0);
  }
  
  ion-icon {
    font-size: 24px;
    color: rgb(0, 255, 0);
  }
  
/* Fade-out text styling */
.fade-text {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 4rem;
  font-weight: bold;
  color: rgb(0, 255, 0); /* Bright green color */
  animation: fadeOut 3s forwards;
  z-index: 1000;
}

/* Animation for fading out the text */
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}