.hero-section{
    position: fixed;
    overflow: hidden;
    top: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
    background: #02030a;
    display:flex;
    align-items:center;
  }

  /* canvas sits behind everything */
  #cosmic-canvas{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    display: block;
  }

  /* Nebula gradients via pseudo-element for GPU-friendly blur */
  .hero-section::before{
    content: "";
    position: fixed;
    inset: -20%;
    padding-top: 10vh;
    pointer-events: none;
    background:
      radial-gradient(circle at 20% 30%, rgba(255, 123, 0, 0.23), transparent 30%),
      radial-gradient(circle at 80% 20%, rgba(0, 234, 255, 0.444), transparent 30%),
      radial-gradient(circle at 50% 80%, rgba(121, 0, 235, 0.36), transparent 30%),
      radial-gradient(circle at 30% 70%, rgba(248, 0, 103, 0.341), transparent 30%);
    filter: blur(80px) saturate(120%);
    animation: nebulaShift 60s linear infinite alternate;
    transform-origin: center;
  }

  @keyframes nebulaShift{
    from{ transform: translate3d(-2%, -1%, 0) scale(1); }
    to{   transform: translate3d(2%, 1%, 0) scale(1.05); }
  }

  /* Content container stays above canvas */
  .hero-section .container{
    position: relative;
    z-index: 2;
  }

  /* small safety: reduce pointer interference */
  #cosmic-canvas { pointer-events: none; }
/* PLANET BASE */

.planet{
    position:absolute;
    border-radius:50%;
    animation:float 20s infinite linear;
}

/* NATURAL GLOW */

.planet::before{
    content:"";
    position:absolute;
    inset:-20px;
    border-radius:50%;
    filter:blur(25px);
    opacity:.7;
}

/* PLANETS */

.planet1{
    width:90px;
    height:90px;
    top:30px;
    left:30px;
    background:radial-gradient(circle at 30% 30%, #ffd27f, #ff6b00);
}

.planet1::before{
    background:#ff7a00;
}

.planet2{
    width:80px;
    height:80px;
    top:40px;
    right:40px;
    background:radial-gradient(circle at 30% 30%, #6be3ff, #0066ff);
}

.planet2::before{
    background:#00aaff;
}

.planet3{
    width:100px;
    height:100px;
    bottom:40px;
    left:40px;
    background:radial-gradient(circle at 30% 30%, #ff7bd5, #7a00ff);
}

.planet3::before{
    background:#a000ff;
}

.planet4{
    width:70px;
    height:70px;
    bottom:30px;
    right:30px;
    background:radial-gradient(circle at 30% 30%, #6bffb0, #00a86b);
}

.planet4::before{
    background:#00ff9c;
}

/* FLOAT MOTION */

@keyframes float{
    from{transform:rotate(0deg) translateY(0px)}
    to{transform:rotate(360deg) translateY(8px)}
}

/* STAR FIELD */

.stars{
    position:absolute;
    width:100%;
    height:100%;
}

.star{
    position:absolute;
    width:2px;
    height:2px;
    background:white;
    border-radius:50%;
    opacity:.7;
    animation:twinkle 3s infinite alternate;
}

@keyframes twinkle{
    from{opacity:.2}
    to{opacity:1}
}