* { box-sizing: border-box; }

.space-root { position: relative; width: 100%; height: 100vh; overflow: hidden; background: #000; }
.space-root ::after {content: ''; display: block; width: 100%; height: 100%; position: absolute; inset: 0; z-index: 0; background-color: rgba(0,0,0,0.2)}

/* Layer 1: 固定背景グラデーション */
.space-gradient-layer { position: absolute; inset: 0; z-index: 0; background: radial-gradient(circle at center, #16204a 0%, #070b19 45%, #000000 100%); opacity: 0.5 }

/* Layer 2: 今後、画像・動画を差し込むための中間レイヤー */
.space-media-layer { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

.space-media { width: 100%; height: 100%; object-fit: cover; }

.sample-media-placeholder { position: absolute; inset: 0; opacity: 0; }

/* Layer 3: 固定の星雲レイヤー */
.space-nebula-layer { position: absolute; inset: 0; z-index: 0; pointer-events: none;  }

.nebula-blue { position: absolute; top: 25%; left: 25%; width: 20rem; height: 20rem; border-radius: 9999px; background: rgba(59, 130, 246, 0.10); filter: blur(64px); }

.nebula-purple { position: absolute; right: 25%; bottom: 25%; width: 24rem; height: 24rem; border-radius: 9999px; background: rgba(168, 85, 247, 0.10); filter: blur(64px); }

/* Layer 4: 星だけがゆっくり回転するレイヤー */
.rotating-star-layer { position: absolute; left: 50%; top: 50%; width: 140vmax; height: 140vmax; z-index: 0; transform-origin: center center; animation: rotateStars 360s linear infinite; pointer-events: none; opacity: 1}

.star { position: absolute; border-radius: 9999px; background: #fff; opacity: 0.3; box-shadow: 0 0 8px rgba(180, 220, 255, 0.45); animation: twinkle var(--duration) ease-in-out infinite; animation-delay: var(--delay); }

@keyframes twinkle { 0%, 100% {   opacity: 0.2;   scale: 1; } 50% {   opacity: 1;   scale: 1.5; } }

@keyframes rotateStars { from {   transform: translate(-50%, -50%) rotate(0deg); } to {   transform: translate(-50%, -50%) rotate(360deg); } }