/* Rainbow glow button: a dark pill with blurred coloured orbs drifting behind a glass face; the glow sharpens on hover.
   Written from scratch after the look of SpaceUI's rainbow glow button. Use on key calls to action: <a|button class="btn btn-rainbow"> */
.btn-rainbow { position: relative; isolation: isolate; overflow: hidden; color: #fff !important; background: #0b0b0d !important; border: 1px solid rgba(255, 255, 255, 0.18) !important; }
.btn-rainbow::before { content: ""; position: absolute; z-index: -2; inset: -60% -20%; background:
    radial-gradient(circle at 20% 50%, #ff4d8d 0 14%, transparent 15%), radial-gradient(circle at 40% 30%, #ffb347 0 12%, transparent 13%), radial-gradient(circle at 60% 70%, #4dff9d 0 12%, transparent 13%),
    radial-gradient(circle at 80% 40%, #4dc3ff 0 14%, transparent 15%), radial-gradient(circle at 50% 50%, #b04dff 0 13%, transparent 14%), radial-gradient(circle at 30% 80%, #ff4d4d 0 11%, transparent 12%);
  filter: blur(18px); opacity: 0.9; animation: rg-orbit 7s linear infinite; transition: filter 0.5s, opacity 0.5s; }
.btn-rainbow::after { content: ""; position: absolute; z-index: -1; inset: 2px; border-radius: inherit; background: rgba(8, 8, 12, 0.82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background 0.5s; }
@media (hover: hover) { .btn-rainbow:hover::before { filter: blur(9px); opacity: 1; } .btn-rainbow:hover::after { background: rgba(8, 8, 12, 0.6); } }
.btn-rainbow:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@keyframes rg-orbit { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn-rainbow::before { animation: none; } }