.ccm-neb { position: relative; width: 220px; height: 180px; display: flex; align-items: center; justify-content: center; }

.ccm-neb-cloud { position: absolute; inset: 0; background: radial-gradient(60% 50% at 30% 40%, rgba(124,108,255,0.45), transparent 70%), radial-gradient(50% 40% at 70% 60%, rgba(255,108,138,0.4), transparent 70%), radial-gradient(45% 35% at 50% 30%, rgba(46,184,138,0.3), transparent 70%); filter: blur(10px); animation: ccm-neb-drift 10s ease-in-out infinite alternate; }

.ccm-neb-i { position: absolute; top: 50%; left: 50%; width: 36px; height: 36px; margin: -18px; border-radius: 50%; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); color: #fff; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; transform: translate(var(--x), var(--y)); animation: ccm-neb-float 4s ease-in-out var(--d) infinite alternate; transition: transform 0.3s, background 0.2s, box-shadow 0.3s; z-index: 2; }

.ccm-neb-i:hover { background: rgba(255,255,255,0.25); box-shadow: 0 0 20px rgba(255,255,255,0.4); transform: translate(var(--x), var(--y)) scale(1.3); animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .ccm-holo-rim,
  .ccm-snow-flakes,
  .ccm-orbit-sat, .ccm-orbit-i,
  .ccm-solar-o, .ccm-solar-o a,
  .ccm-tri-grp,
  .ccm-vinyl-disc,
  .ccm-bh-disk,
  .ccm-neb-cloud, .ccm-neb-i { animation: none !important; }
}