/**
 * Korg Circle Background Styles (Figma Node 1059:3258)
 */

.korg-circle-bg {
  border-radius: 50%;
  pointer-events: none;
  box-sizing: border-box;
  overflow: visible;
}

.korg-circle-bg.mode-absolute {
  position: absolute;
}

.korg-circle-bg.mode-inline {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}

.korg-circle-inner {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  transform-origin: center center;
}

.korg-circle-bg svg {
  width: 100%;
  height: 100%;
  display: block;
  transform-origin: center center;
}

/* Gentle Breathing / Glow Pulse Animation applied to inner element so position transform is preserved */
@keyframes korgCircleGlowPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.85;
  }
}

.korg-circle-bg.has-pulse .korg-circle-inner {
  animation: korgCircleGlowPulse var(--korg-pulse-speed, 6s) ease-in-out infinite;
  transform-origin: center center;
  will-change: transform, opacity;
}

/* Hide on narrow screens (<1000px) */
@media (max-width: 999px) {
  .korg-circle-bg.hide-on-mobile {
    display: none !important;
  }
}

/* Hide on desktop (1000px and up) */
@media (min-width: 1000px) {
  .korg-circle-bg.hide-on-desktop {
    display: none !important;
  }
}