#planet-bg-section {
    position: relative; /* 子要素のabsoluteの基準点 */
    overflow: hidden;   /* 惑星がセクション外にはみ出さないように */
    min-height: 500px; /* セクションの最小の高さ (例) */
}

.planet-animation-wrapper { /* 背景アニメーションをセクションいっぱいに広げる */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1; /* コンテンツよりは後ろ、セクション背景よりは前 (必要なら調整) */
  /* perspective と transform-style はここに設定するのも良い */
  /* perspective: 700px; */
  /* transform-style: preserve-3d; */
  pointer-events: none; /* アニメーションがクリックなどを邪魔しないように */
}

.orbiting-element {
  position: absolute; /* ラッパー基準で動かすため */
  width: 16px;
  /* height: 20px; */
  will-change: transform, opacity;
}

.comet-visualizer {
    position: absolute;
    width: 32px; /* SVGのサイズに合わせて調整 */
    /* height: 15px; /* SVGのサイズに合わせて調整 */
    /* background: red; border-radius: 50%; は不要に */
    will-change: transform;
    pointer-events: none;
    /* SVGによっては filter: drop-shadow(...) などで光彩をつけても良いかも */
}

.section-content {
    position: relative; /* 背景アニメーションの上に表示されるように */
    z-index: 2;         /* .planet-animation-wrapper より大きい値 */
}