/* ================================================================
   bg-types.css
   Loaded after style-presets.css.
   Scoped to [data-style][data-bg-type] pairs so each background
   type is tuned to its style preset's personality.
   Uses --bs-body-bg (set by operator's existing color pickers)
   and --bs-primary as seeds for color-mix() gradients.
   Solid (default) has no rules — existing body bg is preserved.
   ================================================================ */


/* ── GRADIENT backgrounds ── */

[data-style="classic"][data-bg-type="gradient"] body,
[data-style="brutal"][data-bg-type="gradient"]  body {
  background: linear-gradient(
    160deg,
    var(--bs-body-bg) 0%,
    color-mix(in sRGB, var(--bs-body-bg) 85%, var(--bs-primary)) 100%
  ) !important;
}

[data-style="luxe"][data-bg-type="gradient"] body {
  background: linear-gradient(
    135deg,
    color-mix(in sRGB, var(--bs-body-bg) 90%, #000) 0%,
    color-mix(in sRGB, var(--bs-body-bg) 70%, var(--bs-primary)) 60%,
    color-mix(in sRGB, var(--bs-body-bg) 85%, #000) 100%
  ) !important;
}

[data-style="glass"][data-bg-type="gradient"] body {
  background: linear-gradient(
    135deg,
    var(--bs-body-bg) 0%,
    color-mix(in sRGB, var(--bs-body-bg) 60%, var(--bs-primary)) 100%
  ) !important;
}

[data-style="clay"][data-bg-type="gradient"] body {
  background: linear-gradient(
    160deg,
    color-mix(in sRGB, var(--bs-body-bg) 95%, #fff) 0%,
    color-mix(in sRGB, var(--bs-body-bg) 80%, var(--bs-primary)) 100%
  ) !important;
}


/* ── MESH backgrounds (multi-point radial "aurora" gradients) ── */

[data-style="classic"][data-bg-type="mesh"] body,
[data-style="brutal"][data-bg-type="mesh"]  body {
  background:
    radial-gradient(ellipse at 15% 85%, color-mix(in sRGB, var(--bs-body-bg) 60%, var(--bs-primary)) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 15%, color-mix(in sRGB, var(--bs-body-bg) 70%, var(--bs-primary)) 0%, transparent 55%),
    var(--bs-body-bg) !important;
}

[data-style="luxe"][data-bg-type="mesh"] body {
  background:
    radial-gradient(ellipse at 10% 90%, color-mix(in sRGB, var(--bs-body-bg) 50%, var(--bs-primary)) 0%, transparent 50%),
    radial-gradient(ellipse at 90% 10%, color-mix(in sRGB, var(--bs-body-bg) 55%, var(--bs-primary)) 0%, transparent 45%),
    radial-gradient(ellipse at 50% 50%, color-mix(in sRGB, var(--bs-body-bg) 80%, var(--bs-primary)) 0%, transparent 70%),
    color-mix(in sRGB, var(--bs-body-bg) 90%, #000) !important;
}

[data-style="glass"][data-bg-type="mesh"] body {
  background:
    radial-gradient(ellipse at 20% 80%, color-mix(in sRGB, var(--bs-body-bg) 45%, var(--bs-primary)) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 20%, color-mix(in sRGB, var(--bs-body-bg) 50%, var(--bs-primary)) 0%, transparent 50%),
    radial-gradient(ellipse at 60% 70%, color-mix(in sRGB, var(--bs-body-bg) 65%, var(--bs-primary)) 0%, transparent 40%),
    var(--bs-body-bg) !important;
}

[data-style="clay"][data-bg-type="mesh"] body {
  background:
    radial-gradient(ellipse at 25% 75%, color-mix(in sRGB, var(--bs-body-bg) 70%, var(--bs-primary)) 0%, transparent 60%),
    radial-gradient(ellipse at 75% 25%, color-mix(in sRGB, var(--bs-body-bg) 75%, var(--bs-primary)) 0%, transparent 55%),
    color-mix(in sRGB, var(--bs-body-bg) 95%, #fff) !important;
}


/* ── NOISE (grain) backgrounds ── */
/* Grain overlay via ::before pseudo-element using an inline SVG data URI.
   The SVG feTurbulence filter produces the noise texture.
   Content sits above the grain via z-index on .layout-wrapper. */

[data-bg-type="noise"] body { position: relative; }

[data-bg-type="noise"] body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 200px 200px;
}

/* Luxe grain is slightly more visible for texture depth */
[data-style="luxe"][data-bg-type="noise"] body::before { opacity: 0.09; }

/* Clay grain is softer */
[data-style="clay"][data-bg-type="noise"] body::before  { opacity: 0.05; }

/* Ensure page content sits above the noise layer */
[data-bg-type="noise"] .layout-wrapper { position: relative; z-index: 1; }