/* ============================================
   MODERN BACKGROUNDS - BookSwapper
   Shared animated gradients and decorative blobs
   ============================================ */

/* -----------------------------------------
   Base animated gradient background
   ----------------------------------------- */
.modern-bg {
  background-size: 400% 400%;
  animation: gradientShift 20s ease infinite;
  position: relative;
  min-height: 100vh;
}

@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .modern-bg {
    animation: none;
    background-size: 100% 100%;
    background-position: center;
  }
}

/* -----------------------------------------
   Decorative floating blobs (CSS-only)
   ----------------------------------------- */
.modern-bg::before,
.modern-bg::after {
  content: '';
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.4;
  z-index: 0;
}

/* Top-right blob */
.modern-bg::before {
  top: -20%;
  right: -15%;
  width: 50vw;
  height: 50vw;
  max-width: 600px;
  max-height: 600px;
  background: radial-gradient(circle, var(--blob-color-1, rgba(255,255,255,0.15)) 0%, transparent 70%);
  animation: floatBlob1 25s ease-in-out infinite;
}

/* Bottom-left blob */
.modern-bg::after {
  bottom: -15%;
  left: -10%;
  width: 45vw;
  height: 45vw;
  max-width: 500px;
  max-height: 500px;
  background: radial-gradient(circle, var(--blob-color-2, rgba(255,255,255,0.12)) 0%, transparent 65%);
  animation: floatBlob2 30s ease-in-out infinite;
}

@keyframes floatBlob1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(-5%, 8%) scale(1.05); }
  66% { transform: translate(3%, -5%) scale(0.98); }
}

@keyframes floatBlob2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(8%, -6%) scale(1.03); }
}

@media (prefers-reduced-motion: reduce) {
  .modern-bg::before,
  .modern-bg::after {
    animation: none;
  }
}

/* -----------------------------------------
   Page-specific gradient themes
   ----------------------------------------- */

/* Borrow - Blue tones */
.modern-bg-borrow {
  background: linear-gradient(-45deg, #81a4b9, #5a8a9f, #2e4153, #3d5a6e, #6b94a8);
  --blob-color-1: rgba(129, 164, 185, 0.2);
  --blob-color-2: rgba(91, 138, 159, 0.18);
}

/* Buy - Brown/Tan tones */
.modern-bg-buy {
  background: linear-gradient(-45deg, #d2a679, #c4956a, #614a31, #8b6b47, #bf9060);
  --blob-color-1: rgba(210, 166, 121, 0.2);
  --blob-color-2: rgba(191, 144, 96, 0.18);
}

/* Free - Green tones */
.modern-bg-free {
  background: linear-gradient(-45deg, #83b692, #6da47e, #337357, #4d8a6a, #71a888);
  --blob-color-1: rgba(131, 182, 146, 0.2);
  --blob-color-2: rgba(77, 138, 106, 0.18);
}

/* Private - Purple tones */
.modern-bg-private {
  background: linear-gradient(-45deg, #bfadd1, #a896bb, #876f9e, #9d88b0, #b3a0c5);
  --blob-color-1: rgba(191, 173, 209, 0.2);
  --blob-color-2: rgba(157, 136, 176, 0.18);
}

/* Search - Minimalist Off-White & Pale Sage tones */
.modern-bg-search {
  background: linear-gradient(-45deg, #f8f9f5, #f4f6f0, #eef1e6, #e8ecdc, #f1f3eb);
  --blob-color-1: rgba(181, 192, 169, 0.15);
  --blob-color-2: rgba(158, 172, 142, 0.12);
}

/* My Books - Grey/Silver tones */
.modern-bg-mybooks {
  background: linear-gradient(-45deg, #f5f7fa, #d4dbe5, #b8c6db, #c9d4e4, #e2e8f0);
  --blob-color-1: rgba(184, 198, 219, 0.25);
  --blob-color-2: rgba(201, 212, 228, 0.2);
}

/* Home - Warm cream tones */
.modern-bg-home {
  background: linear-gradient(-45deg, #faf8f3, #f5f0e6, #ebe5d5, #f0ebe0, #f8f5ed);
  --blob-color-1: rgba(212, 165, 116, 0.15);
  --blob-color-2: rgba(160, 130, 109, 0.12);
}

/* Ensure main content containers stay above decorative elements */
.cozy-page-container,
.main-container,
main,
.hero-section,
footer {
  position: relative;
  z-index: 1;
}

/* -----------------------------------------
   Additional center blob (optional, via JS class)
   ----------------------------------------- */
.modern-bg.has-center-blob .cozy-page-container::before {
  content: '';
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60vw;
  height: 60vw;
  max-width: 700px;
  max-height: 700px;
  background: radial-gradient(circle, var(--blob-color-1, rgba(255,255,255,0.08)) 0%, transparent 60%);
  pointer-events: none;
  opacity: 0.3;
  z-index: 0;
  animation: pulseBlob 20s ease-in-out infinite;
}

@keyframes pulseBlob {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.3; }
  50% { transform: translate(-50%, -50%) scale(1.1); opacity: 0.2; }
}