/* =========================================================
   LUX CLOTH BACKGROUND PACK
   - Premium cloth weave + soft waves + gold stitch accents
   - Use: <section class="lux-bg lux-theme-rose lux-stitch"></section>
   ========================================================= */

/* ---------- Base / Tokens ---------- */
:root{
  --lux-main: #d10a5a;

  /* Luxury gold tones (use subtle alpha via gradients) */
  --lux-gold: 212,175,55;     /* #D4AF37 */
  --lux-gold2: 184,134,11;    /* #B8860B */

  /* Fabric controls */
  --lux-weave-opacity: 0.06;  /* weave visibility */
  --lux-grain-opacity: 0.06;  /* tiny grain */
  --lux-wave-opacity: 0.18;   /* fold lighting */
  --lux-depth-opacity: 0.22;  /* vignette/shadow */

  /* Stitch controls */
  --lux-stitch-opacity: 0.22;
  --lux-stitch-width: 2px;
  --lux-stitch-gap: 10px;
  --lux-stitch-angle: -18deg;

  /* Corner / shadow */
  --lux-radius: 0px;
}
/* 8) Soft White / Porcelain (premium whitish section) */
.lux-theme-porcelain{
  --lux-bg: linear-gradient(145deg, #ffffff 0%, #f6f2f7 45%, #ece6ee 100%);
  --lux-text:#2a0f1b;

  /* tune fabric for light backgrounds */
  --lux-weave-opacity: 0.10;
  --lux-grain-opacity: 0.055;
  --lux-wave-opacity: 0.14;
  --lux-depth-opacity: 0.10;

  /* stitches should be more subtle on white */
  --lux-stitch-opacity: 0.16;
}

/* 9) Blueish Silk (premium cool-tone section) */
.lux-theme-iceblue{
  --lux-bg: linear-gradient(145deg, #f6fbff 0%, #dfefff 45%, #bcd6f7 100%);
  --lux-text:#0f2233;

  /* slightly sharper weave fits blue silk feel */
  --lux-weave-opacity: 0.095;
  --lux-grain-opacity: 0.055;
  --lux-wave-opacity: 0.16;
  --lux-depth-opacity: 0.12;

  /* gold pops nicely on blue */
  --lux-stitch-opacity: 0.18;
}
/* ---------- Core background class ---------- */
.lux-bg{
  position: relative;
  overflow: hidden;
  border-radius: var(--lux-radius);

  /* Base color comes from theme variables below */
  background: var(--lux-bg, linear-gradient(140deg, #d10a5a, #9a0540));
  color: var(--lux-text, #fff);

  /* subtle depth */
  box-shadow:
    0 18px 40px rgba(0,0,0,0.22),
    inset 0 1px 0 rgba(255,255,255,0.06);
}

/* ---------- Fabric weave + folds layer ---------- */
.lux-bg::before{
  content:"";
  position:absolute; inset:-30%;
  pointer-events:none;

  background:
    /* soft cloth folds (highlight + shadow) */
    radial-gradient(1200px 420px at 18% 18%,
      rgba(255,255,255,var(--lux-wave-opacity)),
      transparent 58%),
    radial-gradient(980px 380px at 82% 86%,
      rgba(0,0,0,var(--lux-depth-opacity)),
      transparent 60%),

    /* weave: cross threads */
    repeating-linear-gradient( 0deg,
      rgba(255,255,255,var(--lux-weave-opacity)) 0px,
      rgba(255,255,255,var(--lux-weave-opacity)) 1px,
      transparent 1px,
      transparent 6px),
    repeating-linear-gradient( 90deg,
      rgba(0,0,0,calc(var(--lux-weave-opacity) * 0.9)) 0px,
      rgba(0,0,0,calc(var(--lux-weave-opacity) * 0.9)) 1px,
      transparent 1px,
      transparent 7px),

    /* slight diagonal yarn shimmer */
    repeating-linear-gradient( 45deg,
      rgba(255,255,255,0.03) 0px,
      rgba(255,255,255,0.03) 2px,
      transparent 2px,
      transparent 14px);

  mix-blend-mode: overlay;
  transform: rotate(-1.2deg);
  opacity: 1;
}

/* ---------- Fine grain + vignette (very premium) ---------- */
.lux-bg::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;

  background:
    radial-gradient(circle at 50% 50%,
      transparent 35%,
      rgba(0,0,0,0.18) 100%),
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,var(--lux-grain-opacity)) 0px,
      rgba(255,255,255,var(--lux-grain-opacity)) 1px,
      transparent 1px,
      transparent 3px
    );
  opacity: 0.55;
  mix-blend-mode: soft-light;
}

/* =========================================================
   GOLD STITCHES (optional)
   Add class: .lux-stitch
   ========================================================= */
.lux-stitch{
  outline: 1px solid rgba(255,255,255,0.05);
}

.lux-stitch > *{
  position: relative;
  z-index: 2;
}

.lux-stitch .lux-stitch-line,
.lux-stitch::marker{ /* no-op, keeps pack safe */ }

/* Stitches overlay (diagonal, subtle) */
.lux-stitch::before{
  /* keep fabric layer from base ::before by stacking another layer */
  /* We "add" stitches using a nested pseudo element technique: */
  /* We'll use an extra inner layer via background-image on an overlay */
  /* implemented here with a box-shadow trick and an additional gradient */
}

/* Use a dedicated stitch overlay element for best consistency */
.lux-bg .lux-stitches{
  position:absolute; inset:-18%;
  pointer-events:none;
  z-index: 1;
  opacity: 1;

  background:
    /* stitch "dashes" */
    repeating-linear-gradient(
      var(--lux-stitch-angle),
      rgba(var(--lux-gold), var(--lux-stitch-opacity)) 0px,
      rgba(var(--lux-gold), var(--lux-stitch-opacity)) var(--lux-stitch-width),
      transparent var(--lux-stitch-width),
      transparent var(--lux-stitch-gap)
    ),
    /* occasional glint */
    radial-gradient(700px 240px at 70% 20%,
      rgba(var(--lux-gold2),0.22),
      transparent 55%);

  mix-blend-mode: screen;
  filter: blur(0.2px);
}

/* Helper: add stitches without extra HTML */
.lux-bg.lux-stitch::before{
  /* preserve existing fabric by layering stitches on top using background on ::before */
  /* We'll append stitches by adding an extra repeating gradient at the front */
  background:
    repeating-linear-gradient(
      var(--lux-stitch-angle),
      rgba(var(--lux-gold), var(--lux-stitch-opacity)) 0px,
      rgba(var(--lux-gold), var(--lux-stitch-opacity)) var(--lux-stitch-width),
      transparent var(--lux-stitch-width),
      transparent var(--lux-stitch-gap)
    ),
    radial-gradient(700px 240px at 72% 18%,
      rgba(var(--lux-gold2),0.18),
      transparent 55%),
    /* original fabric layers */
    radial-gradient(1200px 420px at 18% 18%,
      rgba(255,255,255,var(--lux-wave-opacity)),
      transparent 58%),
    radial-gradient(980px 380px at 82% 86%,
      rgba(0,0,0,var(--lux-depth-opacity)),
      transparent 60%),
    repeating-linear-gradient(0deg,
      rgba(255,255,255,var(--lux-weave-opacity)) 0px,
      rgba(255,255,255,var(--lux-weave-opacity)) 1px,
      transparent 1px,
      transparent 6px),
    repeating-linear-gradient(90deg,
      rgba(0,0,0,calc(var(--lux-weave-opacity) * 0.9)) 0px,
      rgba(0,0,0,calc(var(--lux-weave-opacity) * 0.9)) 1px,
      transparent 1px,
      transparent 7px),
    repeating-linear-gradient(45deg,
      rgba(255,255,255,0.03) 0px,
      rgba(255,255,255,0.03) 2px,
      transparent 2px,
      transparent 14px);

  mix-blend-mode: overlay;
  transform: rotate(-1.2deg);
}

/* =========================================================
   THEMES (pick one class)
   Use: .lux-theme-rose, .lux-theme-wine, etc.
   ========================================================= */

/* 1) Your main (#d10a5a) — ROSE LUX */
.lux-theme-rose{
  --lux-bg: linear-gradient(145deg, #e21a72 0%, #d10a5a 35%, #9a0540 100%);
  --lux-text:#fff;
}

/* 2) Deep wine (still close to your brand) */
.lux-theme-wine{
  --lux-bg: linear-gradient(145deg, #b50a50 0%, #860233 60%, #4f011d 100%);
  --lux-text:#fff;
}

/* 3) Blush + pearl (soft premium section) */
.lux-theme-blush{
  --lux-bg: linear-gradient(145deg, #f3b3c8 0%, #d10a5a 40%, #7b0331 100%);
  --lux-text:#1a0b12;
  --lux-weave-opacity: 0.08;
  --lux-grain-opacity: 0.07;
  --lux-wave-opacity: 0.22;
}

/* 4) Charcoal + rose glow (lux contrast section) */
.lux-theme-onyx{
  --lux-bg: radial-gradient(1200px 500px at 30% 20%, #d10a5a 0%, transparent 55%),
            linear-gradient(140deg, #0e0b0d 0%, #1b0f15 40%, #0a0709 100%);
  --lux-text:#fff;
  --lux-weave-opacity: 0.05;
  --lux-depth-opacity: 0.30;
}

/* 5) Ivory + rose accent (for info blocks) */
.lux-theme-ivory{
  --lux-bg: linear-gradient(145deg, #fff6fb 0%, #f5e3ee 50%, #ead2df 100%);
  --lux-text:#2a0f1b;
  --lux-weave-opacity: 0.10;
  --lux-grain-opacity: 0.05;
  --lux-wave-opacity: 0.16;
  --lux-depth-opacity: 0.12;
  --lux-stitch-opacity: 0.18;
}

/* 6) Midnight plum (premium night mood) */
.lux-theme-plum{
  --lux-bg: linear-gradient(145deg, #2a0b1a 0%, #5b0a34 45%, #d10a5a 140%);
  --lux-text:#fff;
  --lux-depth-opacity: 0.34;
}

/* 7) Emerald + gold couture (special campaign section) */
.lux-theme-emerald{
  --lux-bg: linear-gradient(145deg, #05221a 0%, #0b3c2e 55%, #071a14 100%);
  --lux-text:#f7f2f4;
  --lux-weave-opacity: 0.06;
  --lux-stitch-opacity: 0.24;
}

/* =========================================================
   OPTIONAL: Subtle animated cloth shimmer (high-end, gentle)
   Add class: .lux-animate
   ========================================================= */
@media (prefers-reduced-motion: no-preference){
  .lux-animate::before{
    animation: luxClothFloat 14s ease-in-out infinite;
  }
  .lux-animate::after{
    animation: luxGrainDrift 18s linear infinite;
  }
}

@keyframes luxClothFloat{
  0%   { transform: rotate(-1.2deg) translate3d(0,0,0) scale(1); }
  50%  { transform: rotate(-1.2deg) translate3d(2%, -1.2%, 0) scale(1.02); }
  100% { transform: rotate(-1.2deg) translate3d(0,0,0) scale(1); }
}

@keyframes luxGrainDrift{
  0%   { transform: translate3d(0,0,0); opacity: 0.52; }
  50%  { transform: translate3d(-1.5%, 1.5%, 0); opacity: 0.58; }
  100% { transform: translate3d(0,0,0); opacity: 0.52; }
}

/* =========================================================
   QUICK HTML EXAMPLES:

   <section class="lux-bg lux-theme-rose lux-stitch lux-animate">
     ...
   </section>

   <section class="lux-bg lux-theme-ivory lux-stitch">
     ...
   </section>
<section class="lux-bg lux-theme-porcelain lux-stitch lux-animate">...</section>
<section class="lux-bg lux-theme-iceblue lux-stitch lux-animate">...</section>


<section class="something flower-section">
  <img class="flower flower-left" ...>
  <img class="flower flower-right" ...>
  ...
</section>
   ========================================================= */