.ccm-bh { position: relative; width: 200px; height: 200px; display: flex; align-items: center; justify-content: center; }

.ccm-bh-disk { position: absolute; top: 50%; left: 50%; width: 110px; height: 110px; margin: -55px; border-radius: 50%; background: conic-gradient(from 0deg, #d4af37, #ff6c8a, #7c6cff, #d4af37); filter: blur(6px); animation: ccm-bh-spin 8s linear infinite; transition: filter 0.4s; z-index: 1; }

.ccm-bh:hover .ccm-bh-disk { filter: blur(4px) brightness(1.3); }

.ccm-bh-core { position: absolute; top: 50%; left: 50%; width: 56px; height: 56px; margin: -28px; border-radius: 50%; background: #000; box-shadow: 0 0 30px 8px rgba(0,0,0,0.7); z-index: 2; }

.ccm-bh-i { position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; margin: -15px; border-radius: 50%; background: #1f1f2e; color: #ffd479; display: inline-flex; align-items: center; justify-content: center; font: 700 12px/1 ui-monospace, monospace; text-decoration: none; border: 1px solid rgba(212,175,55,0.5); transform: rotate(var(--a)) translate(80px) rotate(calc(var(--a) * -1)); transition: transform 0.5s cubic-bezier(0.34,1.56,0.64,1), background 0.2s, color 0.2s, box-shadow 0.3s; z-index: 3; }

.ccm-bh:hover .ccm-bh-i { transform: rotate(var(--a)) translate(92px) rotate(calc(var(--a) * -1)); box-shadow: 0 0 12px rgba(212,175,55,0.45); }

.ccm-bh-i:hover, .ccm-bh-i:focus-visible { background: #ffd479; color: #0a0a14; transform: rotate(var(--a)) translate(96px) rotate(calc(var(--a) * -1)) scale(1.2); z-index: 4; }

@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; }
}