/* 
 * 銀河系イメージ - 渦巻銀河スタイル
 * 特徴：渦巻き軌道、星団クラスター、光のオーラ効果
 */

.orbital-system {
 position:relative;
 width:100%;
 max-width:800px;
 height:600px;
 margin:0 auto;
 display:flex;
 justify-content:center;
 align-items:center;
 transform-style:preserve-3d;
 perspective:1000px;
 transform:perspective(1000px) rotateX(20deg);
 background:radial-gradient(circle at center, rgba(0,0,50,0.8) 0%, rgba(0,0,20,0.9) 100%);
}


.orbital-center {
 position:absolute;
 width:250px;
 height:auto;
 z-index:10;
 border-radius:50%;
 box-shadow:0 0 40px rgba(255, 180, 50, 0.4);
 animation:float 6s ease-in-out infinite;
}

.orbital-center::after {
 content:'';
 position:absolute;
 top:-20px;
 left:-20px;
 right:-20px;
 bottom:-20px;
 background:radial-gradient(circle, rgba(255,255,255,0.3) 0%, rgba(70,120,255,0.2) 30%, rgba(0,0,150,0.1) 60%, transparent 80%);
 z-index:-1;
 border-radius:50%;
 filter:blur(10px);
}


.orbit {
 position:absolute;
 top:50%;
 left:50%;
 transform-origin:center;
 border:none;
 background:conic-gradient(from 0deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.4) 25%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 75%, rgba(255,255,255,0.1) 100%);
 border-radius:50%;
 
 opacity:0.3;
}

.orbit-1 {
 width:500px;
 height:500px;
 margin-left:-250px;
 margin-top:-250px;
 transform:rotate(0deg) scale(1);
}

.orbit-2 {
 width:600px;
 height:600px;
 margin-left:-300px;
 margin-top:-300px;
 transform:rotate(60deg) scale(0.9);
 opacity:0.8;
}

.orbit-3 {
 width:700px;
 height:700px;
 margin-left:-350px;
 margin-top:-350px;
 transform:rotate(120deg) scale(0.8);
 opacity:0.6;
}


.planet {
 position:absolute;
 background:radial-gradient(circle, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.6) 20%, rgba(255,255,255,0.3) 40%, transparent 70%);
 border-radius:50%;
 filter:blur(3px);
 animation-timing-function:linear;
 animation-iteration-count:infinite;
}


.planet-mercury {
 width:40px;
 height:40px;
 animation:orbit-mercury 4s ease-in-out infinite, twinkle 4s ease-in-out infinite;
 position:absolute;
 top:20%;
 left:20%;
}

.planet-venus {
 width:25px;
 height:25px;
 animation:orbit-venus 5s ease-in-out infinite 0.5s, twinkle 6s ease-in-out infinite;
 position:absolute;
 top:30%;
 right:25%;
}

.planet-earth {
 width:35px;
 height:35px;
 animation:orbit-earth 4.5s ease-in-out infinite 1s, twinkle 5s ease-in-out infinite;
 position:absolute;
 bottom:30%;
 left:15%;
}

.planet-mars {
 width:20px;
 height:20px;
 animation:orbit-mars 5.5s ease-in-out infinite 1.5s, twinkle 7s ease-in-out infinite;
 position:absolute;
 bottom:20%;
 right:20%;
}


@keyframes spiral-rotation {
 0% { transform:rotate(0deg) scale(1);}
 100% { transform:rotate(360deg) scale(1);}
}


@keyframes twinkle {
 0%, 100% { opacity:0.3;}
 50% { opacity:1;}
}


@keyframes float {
 0%, 100% { transform:translateY(0);}
 50% { transform:translateY(-20px);}
}

@keyframes float-small {
 0%, 100% { transform:translateY(0);}
 50% { transform:translateY(-10px);}
}


@keyframes orbit-mercury {
 0%, 100% { transform:translateY(0);}
 50% { transform:translateY(-15px);}
}

@keyframes orbit-venus {
 0%, 100% { transform:translateY(0);}
 50% { transform:translateY(-12px);}
}

@keyframes orbit-earth {
 0%, 100% { transform:translateY(0);}
 50% { transform:translateY(-18px);}
}

@keyframes orbit-mars {
 0%, 100% { transform:translateY(0);}
 50% { transform:translateY(-10px);}
}