/* ============================================
   MAISON DU PEPS — Marble Effect
   v2.0 — Enhanced contrast + sub-page variant
   ============================================ */

/* CSS-only marble texture — enhanced contrast */
.marble-bg {
  background-color: #F0F0E6;
  background-image:
    /* Primary veining — stronger */
    linear-gradient(
      125deg,
      transparent 0%,
      rgba(200, 195, 185, 0.25) 12%,
      transparent 18%,
      transparent 30%,
      rgba(210, 205, 195, 0.18) 36%,
      transparent 42%,
      transparent 58%,
      rgba(195, 190, 180, 0.22) 64%,
      transparent 70%
    ),
    /* Secondary veining */
    linear-gradient(
      55deg,
      transparent 0%,
      rgba(205, 200, 190, 0.15) 18%,
      transparent 26%,
      transparent 44%,
      rgba(215, 210, 200, 0.2) 50%,
      transparent 56%,
      transparent 74%,
      rgba(200, 195, 185, 0.12) 80%,
      transparent 86%
    ),
    /* Fine veins */
    linear-gradient(
      160deg,
      transparent 0%,
      rgba(180, 175, 165, 0.08) 25%,
      transparent 30%,
      transparent 50%,
      rgba(190, 185, 175, 0.1) 55%,
      transparent 60%
    ),
    /* Soft cloud spots */
    radial-gradient(
      ellipse at 20% 50%,
      rgba(215, 215, 205, 0.3) 0%,
      transparent 50%
    ),
    radial-gradient(
      ellipse at 80% 20%,
      rgba(225, 225, 215, 0.25) 0%,
      transparent 40%
    ),
    radial-gradient(
      ellipse at 60% 80%,
      rgba(205, 205, 195, 0.28) 0%,
      transparent 45%
    ),
    /* Warm center glow */
    radial-gradient(
      ellipse at 50% 50%,
      rgba(240, 238, 230, 0.2) 0%,
      transparent 60%
    );
  background-size: 100% 100%, 200% 200%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
}

/* Sub-page marble variant — slightly warmer, different vein pattern */
.marble-bg-sub {
  background-color: #F0F0E6;
  background-image:
    /* Diagonal veins */
    linear-gradient(
      145deg,
      transparent 0%,
      rgba(195, 190, 180, 0.2) 10%,
      transparent 16%,
      transparent 40%,
      rgba(205, 200, 190, 0.15) 46%,
      transparent 52%,
      transparent 78%,
      rgba(200, 195, 185, 0.18) 84%,
      transparent 90%
    ),
    /* Cross veins */
    linear-gradient(
      35deg,
      transparent 0%,
      rgba(210, 205, 195, 0.1) 22%,
      transparent 28%,
      transparent 55%,
      rgba(200, 195, 185, 0.12) 60%,
      transparent 66%
    ),
    /* Warm spots */
    radial-gradient(
      ellipse at 30% 40%,
      rgba(220, 215, 205, 0.25) 0%,
      transparent 45%
    ),
    radial-gradient(
      ellipse at 70% 70%,
      rgba(215, 210, 200, 0.22) 0%,
      transparent 40%
    );
  background-size: 100% 100%;
}

/* Enhanced marble with subtle veining using repeating gradients */
.marble-bg-enhanced {
  background-color: #F0F0E6;
  background-image:
    /* Main veining — stronger */
    linear-gradient(
      125deg,
      transparent 0%,
      rgba(190, 185, 175, 0.2) 15%,
      transparent 20%,
      transparent 35%,
      rgba(200, 195, 185, 0.15) 40%,
      transparent 45%,
      transparent 65%,
      rgba(185, 180, 170, 0.18) 70%,
      transparent 75%
    ),
    /* Secondary veining */
    linear-gradient(
      55deg,
      transparent 0%,
      rgba(195, 190, 180, 0.12) 20%,
      transparent 30%,
      transparent 50%,
      rgba(205, 200, 190, 0.14) 55%,
      transparent 60%,
      transparent 80%,
      rgba(190, 185, 175, 0.1) 85%,
      transparent 90%
    ),
    /* Soft cloud effect */
    radial-gradient(
      ellipse at 25% 35%,
      rgba(220, 218, 210, 0.25) 0%,
      transparent 50%
    ),
    radial-gradient(
      ellipse at 75% 65%,
      rgba(225, 223, 215, 0.2) 0%,
      transparent 45%
    ),
    /* Subtle warmth */
    radial-gradient(
      ellipse at 50% 50%,
      rgba(240, 238, 230, 0.3) 0%,
      transparent 70%
    );
  background-size: 100% 100%;
}

/* If marble texture image is available, use it with blend mode */
.marble-bg-image {
  background-color: #F0F0E6;
  background-image: url('../images/marble-texture.webp');
  background-blend-mode: soft-light;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* Fallback: if image fails to load, use CSS marble */
@supports (background-blend-mode: soft-light) {
  .marble-bg-image {
    background-image:
      url('../images/marble-texture.webp'),
      linear-gradient(
        135deg,
        rgba(220, 220, 210, 0.3) 0%,
        transparent 40%,
        transparent 60%,
        rgba(220, 220, 210, 0.2) 100%
      );
  }
}