/* ==================================================
   RADIANT CENTER BACKGROUNDS + BREATHING LIGHT
   ================================================== */

/* ---------- BREATHING ANIMATION ---------- */

@keyframes breathe-light {
  0% {
    background-size: 135% 135%;
  }
  50% {
    background-size: 155% 155%;
  }
  100% {
    background-size: 135% 135%;
  }
}

/* Respect accessibility */
@media (prefers-reduced-motion: reduce) {
  .bg-breathe {
    animation: none !important;
  }
}

/* ---------- BASE BEHAVIOR ---------- */

.bg-breathe {
  background-size: 140% 140%;
  animation: breathe-light 18s ease-in-out infinite;
}

/* ==================================================
   COLOR VARIANTS (IDENTICAL LUMINOSITY CURVE)
   ================================================== */

/* ===== 1. LIGHT BLUE ===== */
.bg-blue {
  background:
    radial-gradient(
      circle at center,
      #ffffff 0%,
      #fafdff 12%,
      #f1f7ff 28%,
      #e6f1ff 45%,
      #ffffff 75%
    );
}

/* ===== 2. SOFT PINK ===== */
.bg-pink {
  background:
    radial-gradient(
      circle at center,
      #ffffff 0%,
      #fffafb 12%,
      #fff3f6 28%,
      #fde9ef 45%,
      #ffffff 75%
    );
}

/* ===== 3. GENTLE GOLDEN ===== */
.bg-golden {
  background:
    radial-gradient(
      circle at center,
      #ffffff 0%,
      #fffdf6 12%,
      #fff6dc 28%,
      #ffedc4 45%,
      #ffffff 75%
    );
}

/* ===== 4. SOFT LAVENDER ===== */
.bg-lavender {
  background:
    radial-gradient(
      circle at center,
      #ffffff 0%,
      #fbfaff 12%,
      #f3f0ff 28%,
      #e8e3ff 45%,
      #ffffff 75%
    );
}

/* ==================================================
   SAFETY LAYERS (RECOMMENDED)
   ================================================== */

/* Keep navigation neutral */
.nav-wrapper {
  background: #ffffff;
}

/* Improve text readability on glow */
.main-content {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 6px;
  padding: 1.25rem;
}