/* Circular Nav Visualizer — styles.css
   Works inside the MELT theme's gradient background.
   Bubbles fade at edges via radial-gradient (no hard borders).
   Gradients are driven by CSS variables set by browser.js so debug
   sliders can update them live.
*/

.circular-nav-visualizer {
  display: flex;
  justify-content: center;
  width: 100%;
  overflow: visible;
}

.cnav__wrapper {
  position: relative;
  flex-shrink: 0;
}

/* --- Base bubble --- */
.cnav__bubble {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  animation: cnav-float 3.6s ease-in-out infinite;
}

/* Orbit bubbles — use CSS vars set by JS (fallback for no-JS) */
.cnav__bubble--orbit {
  background: var(--cnav-orbit-bg, radial-gradient(circle,
    rgba(90, 25, 185, 0.95) 0%,
    rgba(70, 15, 155, 0.55) 35%,
    rgba(50, 8, 120, 0.15) 55%,
    rgba(50, 8, 120, 0) 65%
  ));
}

.cnav__bubble--orbit:hover {
  background: var(--cnav-orbit-hover-bg, radial-gradient(circle,
    rgba(115, 45, 220, 1) 0%,
    rgba(90, 28, 185, 0.65) 35%,
    rgba(65, 12, 145, 0.18) 55%,
    rgba(65, 12, 145, 0) 65%
  ));
}

/* Center CTA — deep saturated violet core, warm pink-purple outer glow */
.cnav__bubble--cta {
  background: var(--cnav-cta-bg, radial-gradient(circle,
    hsla(268, 90%, 28%, 1) 0%,
    hsla(268, 88%, 44%, 1) 22%,
    hsla(280, 76%, 52%, 0.78) 42%,
    hsla(290, 65%, 56%, 0.3) 58%,
    hsla(290, 65%, 56%, 0) 70%
  ));
  animation-duration: 4.2s;
  animation-delay: 0.6s !important;
  z-index: 2;
}

.cnav__bubble--cta:hover {
  background: var(--cnav-cta-hover-bg, radial-gradient(circle,
    hsla(268, 92%, 36%, 1) 0%,
    hsla(268, 90%, 50%, 1) 22%,
    hsla(280, 78%, 57%, 0.82) 42%,
    hsla(290, 68%, 61%, 0.36) 58%,
    hsla(290, 68%, 61%, 0) 70%
  ));
}

/* Labels */
.cnav__label {
  color: white;
  font-family: var(--font-body, 'Quicksand', sans-serif);
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.35;
  padding: 0 12px;
  pointer-events: none;
  -webkit-mask-image: none;
  mask-image: none;
}

.cnav__bubble--cta .cnav__label {
  font-size: 1.1rem;
  font-weight: 600;
}

/* --- Float animation --- */
@keyframes cnav-float {
  0%, 100% { transform: translateY(0px);  }
  50%       { transform: translateY(-9px); }
}

/* --- Debug panel --- */
.cnav-debug {
  margin-top: 16px;
  background: rgba(10, 4, 28, 0.72);
  border: 1px solid rgba(180, 140, 255, 0.2);
  border-radius: 10px;
  padding: 16px 20px 18px;
  font-family: var(--font-body, monospace);
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.8);
  width: 100%;
  max-width: 440px;
  box-sizing: border-box;
}

.cnav-debug__row {
  display: grid;
  grid-template-columns: 106px 1fr 38px;
  align-items: center;
  gap: 10px;
  margin-bottom: 9px;
}

.cnav-debug__label {
  text-align: right;
  opacity: 0.65;
  white-space: nowrap;
}

.cnav-debug__slider {
  width: 100%;
  accent-color: #a060f0;
  cursor: pointer;
}

.cnav-debug__val {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: #c090ff;
  font-size: 0.74rem;
}

.cnav-debug__copy {
  display: block;
  margin: 14px auto 0;
  padding: 8px 22px;
  background: rgba(120, 50, 210, 0.45);
  border: 1px solid rgba(180, 120, 255, 0.4);
  border-radius: 6px;
  color: white;
  font-family: var(--font-body, sans-serif);
  font-size: 0.76rem;
  cursor: pointer;
  transition: background 0.15s;
}

.cnav-debug__copy:hover {
  background: rgba(150, 70, 240, 0.65);
}