@charset "UTF-8";
/**
 * Universal Background System
 *
 * Single entry point for the shared background layer system.
 * Compiles to backgrounds.css (~50KB) for use across all components.
 *
 * Usage:
 * 1. Add .bg-layers class to container
 * 2. Add data-bg-* attributes for configuration
 * 3. Include layer elements: .bg-layers__base, __pattern, __overlay, __content
 *
 * Example:
 * <section class="my-section bg-layers"
 *          data-bg-base="gradient-brand"
 *          data-bg-pattern="dots"
 *          data-bg-pattern-opacity="35"
 *          data-bg-blend="overlay"
 *          data-bg-overlay="dark"
 *          data-bg-overlay-opacity="50">
 *     <div class="bg-layers__base"></div>
 *     <div class="bg-layers__pattern"></div>
 *     <div class="bg-layers__overlay"></div>
 *     <div class="bg-layers__content">...</div>
 * </section>
 */
/**
 * Universal Background Layers
 *
 * Layered architecture for composable backgrounds:
 * - Layer 0: Base (solid, gradient, image, video)
 * - Layer 1: Pattern (dots, lines, noise)
 * - Layer 2: Overlay (dark, light, brand)
 * - Layer 3: Content
 *
 * Usage: Add .bg-layers class and data-bg-* attributes to any container.
 */
/* ==========================================================================
   Container
   ========================================================================== */
.bg-layers {
  position: relative;
  overflow: hidden;
}

/* ==========================================================================
   Background Layers
   ========================================================================== */
/**
 * Base layer - solid colors, gradients, images, or video
 * z-index: 0
 */
.bg-layers__base {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/**
 * Pattern layer - decorative patterns over base
 * z-index: 1
 */
.bg-layers__pattern {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  color: oklch(var(--bc) / 0.2);
  opacity: var(--bg-pattern-opacity, 0.35);
}

/**
 * SVG pattern modifier - for animated SVG patterns
 * Disables CSS background-image patterns when using inline SVG
 * Specificity (0,3,0) to override [data-bg-pattern=X] .bg-layers__pattern (0,2,0)
 */
.bg-layers__pattern--svg {
  overflow: hidden;
}

[data-bg-pattern] .bg-layers__pattern.bg-layers__pattern--svg {
  background-image: none;
  background-size: auto;
  background-repeat: no-repeat;
}

.bg-layers__pattern--svg svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* Page-level SVG pattern uses fixed positioning */
.page-wrapper > .bg-layers__pattern--svg svg {
  position: fixed;
  width: 100vw;
  height: 100vh;
}

.light .bg-layers__pattern {
  color: white;
}

.dark .bg-layers__pattern {
  color: hsl(220, 5%, 15%);
}

.brand .bg-layers__pattern {
  color: white;
}

.overlay-dark .bg-layers__pattern {
  color: hsl(220, 5%, 15%);
}

.overlay-light .bg-layers__pattern {
  color: white;
}

[data-bg-blend]:not([data-bg-blend=normal]) .bg-layers__pattern {
  color: hsl(0, 0%, 50%) !important;
  opacity: 1 !important;
}

/**
 * Overlay layer - color overlays for readability
 * z-index: 2
 */
.bg-layers__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

/**
 * Content layer - all visible content
 * z-index: 3
 */
.bg-layers__content {
  position: relative;
  z-index: 3;
}

/* ==========================================================================
   Video Background Modifier
   ========================================================================== */
.bg-layers__base--video {
  /* Inherits position: absolute; inset: 0; from .bg-layers__base */
  overflow: hidden;
}

/* Native video element - object-fit works */
.bg-layers__base--video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* Iframe (YouTube/Vimeo) - object-fit doesn't work, use scale technique */
.bg-layers__base--video iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 177.78vh; /* 16:9 aspect ratio - width based on height */
  height: 56.25vw; /* 16:9 aspect ratio - height based on width */
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* ==========================================================================
   SVG Background Modifier
   ========================================================================== */
.bg-layers__base--svg {
  overflow: hidden;
}

.bg-layers__base--svg svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ==========================================================================
   Gradient Layer (over video)
   Uses mix-blend-mode to blend with video beneath
   ========================================================================== */
.bg-layers__gradient {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Gradient blend modes - attribute is on section, targets gradient layer */
[data-bg-gradient-blend=multiply] .bg-layers__gradient {
  mix-blend-mode: multiply;
}

[data-bg-gradient-blend=screen] .bg-layers__gradient {
  mix-blend-mode: screen;
}

[data-bg-gradient-blend=overlay] .bg-layers__gradient {
  mix-blend-mode: overlay;
}

[data-bg-gradient-blend=soft-light] .bg-layers__gradient {
  mix-blend-mode: soft-light;
}

[data-bg-gradient-blend=hard-light] .bg-layers__gradient {
  mix-blend-mode: hard-light;
}

[data-bg-gradient-blend=color-dodge] .bg-layers__gradient {
  mix-blend-mode: color-dodge;
}

[data-bg-gradient-blend=color-burn] .bg-layers__gradient {
  mix-blend-mode: color-burn;
}

[data-bg-gradient-blend=difference] .bg-layers__gradient {
  mix-blend-mode: difference;
}

[data-bg-gradient-blend=exclusion] .bg-layers__gradient {
  mix-blend-mode: exclusion;
}

[data-bg-gradient-blend=hue] .bg-layers__gradient {
  mix-blend-mode: hue;
}

[data-bg-gradient-blend=saturation] .bg-layers__gradient {
  mix-blend-mode: saturation;
}

[data-bg-gradient-blend=color] .bg-layers__gradient {
  mix-blend-mode: color;
}

[data-bg-gradient-blend=luminosity] .bg-layers__gradient {
  mix-blend-mode: luminosity;
}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .bg-layers__base,
  .bg-layers__pattern,
  .bg-layers__overlay {
    transition: none;
    animation: none;
  }
}
/* ==========================================================================
   bg-layers Transparency Support
   ========================================================================== */
/**
 * When elements use bg-layers, make them and nested bars transparent
 * so gradient/pattern layers show through.
 *
 * Uses !important to override:
 * 1. Palette CSS: section, header, footer { background-color: oklch(var(--b2)) }
 * 2. Bar CSS schema: .bar { background-color: oklch(var(--b2)) }
 */
section.bg-layers,
header.bg-layers,
footer.bg-layers {
  background-color: transparent !important;
}

/**
 * Header needs overflow: visible for mega menu dropdowns.
 * Mega menus use position: absolute; top: 100% to extend below header.
 */
header.bg-layers {
  overflow: visible;
}

/**
 * Bars without explicit mode should be transparent.
 * Bars WITH mode classes (dark, light, brand, etc.) keep their mode background.
 */
.bg-layers .bar:not(.light):not(.dark):not(.brand):not(.muted):not(.muted-light):not(.muted-dark),
header.bg-layers .bar:not(.light):not(.dark):not(.brand):not(.muted):not(.muted-light):not(.muted-dark),
footer.bg-layers .bar:not(.light):not(.dark):not(.brand):not(.muted):not(.muted-light):not(.muted-dark),
footer.bg-layers .plexa-footer-bar:not(.light):not(.dark):not(.brand):not(.muted):not(.muted-light):not(.muted-dark),
footer.bg-layers [class*=footer-bar]:not(.light):not(.dark):not(.brand):not(.muted):not(.muted-light):not(.muted-dark) {
  background-color: transparent !important;
}

/**
 * Disable overlay mode ::before pseudo-element when using bg-layers.
 * The bg-layers system has its own overlay layer (.bg-layers__overlay)
 * so we don't need the mode's pseudo-element overlay.
 */
footer.bg-layers.overlay-dark::before,
footer.bg-layers.overlay-light::before,
section.bg-layers.overlay-dark::before,
section.bg-layers.overlay-light::before,
header.bg-layers.overlay-dark::before,
header.bg-layers.overlay-light::before {
  display: none !important;
}

/**
 * Fix overlay mode child positioning conflict.
 * Palette CSS sets `overlay-dark > * { position: relative; z-index: 2; }`
 * which breaks absolute positioning of bg-layers elements.
 * Re-apply correct positioning for layer elements.
 */
.bg-layers.overlay-dark > .bg-layers__base,
.bg-layers.overlay-light > .bg-layers__base,
.bg-layers.overlay-dark > .bg-layers__pattern,
.bg-layers.overlay-light > .bg-layers__pattern,
.bg-layers.overlay-dark > .bg-layers__overlay,
.bg-layers.overlay-light > .bg-layers__overlay,
.bg-layers.overlay-dark > .bg-layers__gradient,
.bg-layers.overlay-light > .bg-layers__gradient {
  position: absolute !important;
  inset: 0 !important;
}

.bg-layers.overlay-dark > .bg-layers__base,
.bg-layers.overlay-light > .bg-layers__base,
.bg-layers.overlay-dark > .bg-layers__gradient,
.bg-layers.overlay-light > .bg-layers__gradient {
  z-index: 0 !important;
}

.bg-layers.overlay-dark > .bg-layers__pattern,
.bg-layers.overlay-light > .bg-layers__pattern {
  z-index: 1 !important;
}

.bg-layers.overlay-dark > .bg-layers__overlay,
.bg-layers.overlay-light > .bg-layers__overlay {
  z-index: 2 !important;
}

/* ==========================================================================
   Page-Level Background Wrappers
   ========================================================================== */
/**
 * Page wrapper for page_background
 * Wraps entire page content (header, main, footer)
 */
.page-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  position: relative;
}

.page-wrapper.bg-layers {
  overflow: visible;
}

/**
 * Page-level video background uses fixed positioning
 * This makes the video cover the viewport and stay in place while scrolling
 */
.page-wrapper > .bg-layers__base {
  position: fixed;
  inset: 0;
  z-index: -1;
}

.page-wrapper > .bg-layers__base--video iframe {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 177.78vh;
  height: 56.25vw;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
}

/* Page-level SVG background uses fixed positioning */
.page-wrapper > .bg-layers__base--svg,
.page-wrapper > .bg-layers__base--svg svg {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
}

.page-wrapper > .bg-layers__gradient,
.page-wrapper > .bg-layers__pattern,
.page-wrapper > .bg-layers__overlay {
  position: fixed;
  inset: 0;
}

.page-wrapper > .bg-layers__content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 100vh;
}

/**
 * Main wrapper for content_background
 * Main element with bg-layers support
 */
main.bg-layers {
  position: relative;
  overflow: hidden;
}

main.bg-layers > .bg-layers__content {
  position: relative;
  z-index: 3;
}

/**
 * Ensure header/footer stay above page_background layers
 * but below their own content
 */
.page-wrapper header,
.page-wrapper footer {
  position: relative;
  z-index: 1;
}

/**
 * Header z-index override for page_background
 * Keeps header above video but allows sticky nav to work
 */
.page-wrapper > .bg-layers__content > header {
  position: relative;
  z-index: 10;
}

/**
 * Sticky header inside page-wrapper
 * Ensure sticky positioning works correctly
 */
.page-wrapper > .bg-layers__content > header.is-sticky,
.page-wrapper > .bg-layers__content > header[data-sticky=true] {
  position: sticky;
  top: 0;
  z-index: 50;
}

/**
 * Universal Background Gradients
 *
 * Background options for the base layer via data-bg-base attribute.
 * Uses CSS custom properties from the color system.
 */
/* ==========================================================================
   None / Image - Transparent or Image-only
   ========================================================================== */
[data-bg-base=none] .bg-layers__base {
  background: transparent;
}

[data-bg-base=image] .bg-layers__base {
  /* Image set via inline style */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ==========================================================================
   Solid Colors
   ========================================================================== */
[data-bg-base=solid] .bg-layers__base {
  background: oklch(var(--b2));
}

[data-bg-base=solid-dark] .bg-layers__base {
  background: hsl(0, 0%, 10%);
}

[data-bg-base=solid-muted] .bg-layers__base {
  background: oklch(var(--b3));
}

/* ==========================================================================
   Palette-Aware Gradients
   ========================================================================== */
[data-bg-base=gradient-brand] .bg-layers__base {
  background-color: oklch(var(--p));
  background-image: linear-gradient(90deg, oklch(var(--p)), oklch(var(--s)));
}

[data-bg-base=gradient-brand-fade] .bg-layers__base {
  background-color: oklch(var(--p));
  background-image: linear-gradient(90deg, oklch(var(--p)) 0%, oklch(var(--p)) 30%, oklch(var(--s)) 100%);
}

[data-bg-base=gradient-brand-to-dark] .bg-layers__base {
  background-color: oklch(var(--p));
  background-image: linear-gradient(180deg, oklch(var(--p)) 0%, oklch(var(--s)) 60%, hsl(0, 0%, 15%) 100%);
}

[data-bg-base=gradient-brand-spotlight] .bg-layers__base {
  background-color: hsl(0, 0%, 12%);
  background-image: radial-gradient(ellipse 100% 80% at 50% 0%, oklch(var(--p)) 0%, transparent 50%), linear-gradient(180deg, oklch(var(--s)) 0%, hsl(0, 0%, 12%) 100%);
}

[data-bg-base=gradient-brand-vibrant] .bg-layers__base {
  background-color: oklch(var(--p));
  background-image: linear-gradient(90deg, oklch(var(--p)) 0%, oklch(var(--s)) 50%, oklch(var(--p)) 100%);
}

[data-bg-base=gradient-brand-depth] .bg-layers__base {
  background-color: hsl(0, 0%, 10%);
  background-image: radial-gradient(ellipse at 20% 20%, oklch(var(--p)) 0%, transparent 40%), radial-gradient(ellipse at 80% 80%, oklch(var(--s)) 0%, transparent 40%);
}

[data-bg-base=gradient-brand-glow] .bg-layers__base {
  background-color: hsl(0, 0%, 8%);
  background-image: radial-gradient(ellipse 80% 60% at 50% 50%, oklch(var(--p)) 0%, transparent 60%), linear-gradient(180deg, hsl(0, 0%, 8%) 0%, hsl(0, 0%, 12%) 100%);
}

[data-bg-base=gradient-brand-sweep] .bg-layers__base {
  background-color: oklch(var(--p));
  background-image: linear-gradient(90deg, oklch(var(--p)) 0%, oklch(var(--p)) 25%, oklch(var(--s)) 50%, hsl(0, 0%, 15%) 75%, hsl(0, 0%, 10%) 100%);
}

[data-bg-base=gradient-brand-accent] .bg-layers__base {
  background-color: oklch(var(--p));
  background-image: linear-gradient(90deg, transparent 0%, transparent 40%, oklch(var(--s)) 100%), linear-gradient(180deg, oklch(var(--p)) 0%, oklch(var(--p)) 100%);
}

[data-bg-base=gradient-brand-soft] .bg-layers__base {
  background-color: oklch(var(--b3));
  background-image: linear-gradient(180deg, oklch(var(--b3)) 0%, oklch(var(--b2)) 50%, oklch(var(--b3)) 100%);
}

[data-bg-base=gradient-brand-duotone] .bg-layers__base {
  background-color: oklch(var(--p));
  background-image: linear-gradient(180deg, oklch(var(--p)) 0%, oklch(var(--s)) 100%);
}

[data-bg-base=gradient-subtle] .bg-layers__base {
  background-color: oklch(var(--b2));
  background-image: linear-gradient(180deg, oklch(var(--b2)), oklch(var(--b1)));
}

[data-bg-base=gradient-radial] .bg-layers__base {
  background-color: oklch(var(--s));
  background-image: radial-gradient(ellipse at 50% 0%, oklch(var(--p)), oklch(var(--s)));
}

[data-bg-base=gradient-diagonal] .bg-layers__base {
  background-color: oklch(var(--p));
  background-image: linear-gradient(45deg, oklch(var(--p)), oklch(var(--s)));
}

[data-bg-base=gradient-horizontal] .bg-layers__base {
  background-color: oklch(var(--p));
  background-image: linear-gradient(90deg, oklch(var(--p)), oklch(var(--s)));
}

[data-bg-base=gradient-conic] .bg-layers__base {
  background-color: oklch(var(--p));
  background-image: conic-gradient(from 0deg at 50% 50%, oklch(var(--p)), oklch(var(--s)), oklch(var(--p)));
}

[data-bg-base=gradient-corner-tl] .bg-layers__base {
  background-color: oklch(var(--b2));
  background-image: radial-gradient(ellipse at 0% 0%, oklch(var(--p)) 0%, oklch(var(--s)) 70%, transparent 100%);
}

[data-bg-base=gradient-corner-br] .bg-layers__base {
  background-color: oklch(var(--b2));
  background-image: radial-gradient(ellipse at 100% 100%, oklch(var(--p)) 0%, oklch(var(--s)) 70%, transparent 100%);
}

[data-bg-base=gradient-center] .bg-layers__base {
  background-color: oklch(var(--s));
  background-image: radial-gradient(ellipse at 50% 50%, oklch(var(--p)) 0%, oklch(var(--s)) 100%);
}

[data-bg-base=mesh] .bg-layers__base {
  background-color: oklch(var(--b2));
  background-image: radial-gradient(ellipse at 0% 0%, oklch(var(--p)) 0%, transparent 50%), radial-gradient(ellipse at 100% 0%, oklch(var(--s)) 0%, transparent 50%), radial-gradient(ellipse at 50% 100%, oklch(var(--p)) 0%, transparent 50%);
}

/* ==========================================================================
   Fixed Color Gradients
   ========================================================================== */
[data-bg-base=gradient-dark] .bg-layers__base {
  background-color: hsl(0, 0%, 5%);
  background-image: linear-gradient(180deg, hsl(0, 0%, 15%), hsl(0, 0%, 5%));
}

[data-bg-base=gradient-light] .bg-layers__base {
  background-color: hsl(0, 0%, 95%);
  background-image: linear-gradient(180deg, hsl(0, 0%, 100%), hsl(0, 0%, 95%));
}

[data-bg-base=gradient-sunset] .bg-layers__base {
  background-color: #8b5cf6;
  background-image: linear-gradient(90deg, #f97316 0%, #ec4899 50%, #8b5cf6 100%);
}

[data-bg-base=gradient-ocean] .bg-layers__base {
  background-color: #1e3a8a;
  background-image: linear-gradient(90deg, #1e3a8a 0%, #0d9488 50%, #06b6d4 100%);
}

[data-bg-base=gradient-forest] .bg-layers__base {
  background-color: #14532d;
  background-image: linear-gradient(90deg, #14532d 0%, #059669 50%, #84cc16 100%);
}

[data-bg-base=gradient-night] .bg-layers__base {
  background-color: #0f0f0f;
  background-image: linear-gradient(180deg, #581c87 0%, #1e1b4b 50%, #0f0f0f 100%);
}

[data-bg-base=gradient-fire] .bg-layers__base {
  background-color: #dc2626;
  background-image: linear-gradient(90deg, #dc2626 0%, #f97316 50%, #fbbf24 100%);
}

[data-bg-base=gradient-ice] .bg-layers__base {
  background-color: #f0f9ff;
  background-image: linear-gradient(180deg, #f0f9ff 0%, #bae6fd 50%, #67e8f9 100%);
}

/* Metallic */
[data-bg-base=gradient-metal] .bg-layers__base {
  background-color: #6b7280;
  background-image: linear-gradient(90deg, #9ca3af 0%, #e5e7eb 25%, #6b7280 50%, #d1d5db 75%, #9ca3af 100%);
}

[data-bg-base=gradient-gold] .bg-layers__base {
  background-color: #b45309;
  background-image: linear-gradient(90deg, #b45309 0%, #fcd34d 25%, #d97706 50%, #fbbf24 75%, #b45309 100%);
}

[data-bg-base=gradient-rose] .bg-layers__base {
  background-color: #be185d;
  background-image: linear-gradient(90deg, #be185d 0%, #fda4af 25%, #e11d48 50%, #fecdd3 75%, #be185d 100%);
}

[data-bg-base=gradient-copper] .bg-layers__base {
  background-color: #92400e;
  background-image: linear-gradient(90deg, #92400e 0%, #fdba74 25%, #c2410c 50%, #fed7aa 75%, #92400e 100%);
}

[data-bg-base=gradient-bronze] .bg-layers__base {
  background-color: #78350f;
  background-image: linear-gradient(90deg, #78350f 0%, #d97706 25%, #92400e 50%, #fbbf24 75%, #78350f 100%);
}

[data-bg-base=gradient-platinum] .bg-layers__base {
  background-color: #94a3b8;
  background-image: linear-gradient(90deg, #64748b 0%, #f1f5f9 25%, #94a3b8 50%, #e2e8f0 75%, #64748b 100%);
}

[data-bg-base=gradient-chrome] .bg-layers__base {
  background-color: #1f2937;
  background-image: linear-gradient(90deg, #1f2937 0%, #f9fafb 20%, #6b7280 40%, #f3f4f6 60%, #374151 80%, #e5e7eb 100%);
}

/* Nature/Theme */
[data-bg-base=gradient-aurora] .bg-layers__base {
  background-color: #8b5cf6;
  background-image: linear-gradient(90deg, #10b981 0%, #14b8a6 25%, #8b5cf6 50%, #ec4899 75%, #10b981 100%);
  background-size: 200% 200%;
}

[data-bg-base=gradient-tropical] .bg-layers__base {
  background-color: #06b6d4;
  background-image: linear-gradient(90deg, #06b6d4 0%, #f97316 50%, #fbbf24 100%);
}

[data-bg-base=gradient-autumn] .bg-layers__base {
  background-color: #78350f;
  background-image: linear-gradient(90deg, #f97316 0%, #dc2626 50%, #78350f 100%);
}

[data-bg-base=gradient-midnight] .bg-layers__base {
  background-color: #0f0f0f;
  background-image: linear-gradient(180deg, #1e3a8a 0%, #312e81 50%, #0f0f0f 100%);
}

[data-bg-base=gradient-candy] .bg-layers__base {
  background-color: #a7f3d0;
  background-image: linear-gradient(90deg, #f472b6 0%, #c4b5fd 50%, #a7f3d0 100%);
}

[data-bg-base=gradient-wine] .bg-layers__base {
  background-color: #7f1d1d;
  background-image: linear-gradient(90deg, #7f1d1d 0%, #831843 50%, #be185d 100%);
}

[data-bg-base=gradient-peacock] .bg-layers__base {
  background-color: #0d9488;
  background-image: linear-gradient(90deg, #0d9488 0%, #7c3aed 50%, #d97706 100%);
}

[data-bg-base=gradient-neon] .bg-layers__base {
  background-color: #d946ef;
  background-image: linear-gradient(90deg, #06b6d4 0%, #d946ef 50%, #facc15 100%);
}

/* Time of Day */
[data-bg-base=gradient-dawn] .bg-layers__base {
  background-color: #fcd34d;
  background-image: linear-gradient(180deg, #fda4af 0%, #fb923c 40%, #fcd34d 100%);
}

[data-bg-base=gradient-dusk] .bg-layers__base {
  background-color: #1e3a8a;
  background-image: linear-gradient(180deg, #fb923c 0%, #a855f7 50%, #1e3a8a 100%);
}

[data-bg-base=gradient-golden-hour] .bg-layers__base {
  background-color: #f43f5e;
  background-image: linear-gradient(90deg, #fcd34d 0%, #f59e0b 50%, #f43f5e 100%);
}

[data-bg-base=gradient-blue-hour] .bg-layers__base {
  background-color: #1e3a8a;
  background-image: linear-gradient(180deg, #1e3a8a 0%, #7c3aed 50%, #06b6d4 100%);
}

/* More Nature */
[data-bg-base=gradient-rainforest] .bg-layers__base {
  background-color: #14532d;
  background-image: linear-gradient(90deg, #14532d 0%, #059669 50%, #84cc16 100%);
}

[data-bg-base=gradient-desert] .bg-layers__base {
  background-color: #78350f;
  background-image: linear-gradient(180deg, #fcd34d 0%, #f97316 50%, #78350f 100%);
}

[data-bg-base=gradient-coral-reef] .bg-layers__base {
  background-color: #ec4899;
  background-image: linear-gradient(90deg, #06b6d4 0%, #f97316 50%, #ec4899 100%);
}

[data-bg-base=gradient-volcano] .bg-layers__base {
  background-color: #0f0f0f;
  background-image: linear-gradient(180deg, #0f0f0f 0%, #dc2626 50%, #f97316 100%);
}

/* Mood */
[data-bg-base=gradient-warm] .bg-layers__base {
  background-color: #dc2626;
  background-image: linear-gradient(90deg, #fbbf24 0%, #f97316 50%, #dc2626 100%);
}

[data-bg-base=gradient-cool] .bg-layers__base {
  background-color: #3b82f6;
  background-image: linear-gradient(90deg, #3b82f6 0%, #06b6d4 50%, #14b8a6 100%);
}

[data-bg-base=gradient-pastel] .bg-layers__base {
  background-color: #fce7f3;
  background-image: linear-gradient(90deg, #fce7f3 0%, #e9d5ff 50%, #d1fae5 100%);
}

/* Luxury */
[data-bg-base=gradient-velvet] .bg-layers__base {
  background-color: #581c87;
  background-image: linear-gradient(90deg, #581c87 0%, #7f1d1d 100%);
}

[data-bg-base=gradient-champagne] .bg-layers__base {
  background-color: #fffbeb;
  background-image: linear-gradient(180deg, #fcd34d 0%, #fef3c7 50%, #fffbeb 100%);
}

[data-bg-base=gradient-noir] .bg-layers__base {
  background-color: #0a0a0a;
  background-image: linear-gradient(180deg, #0a0a0a 0%, #262626 50%, #404040 100%);
}

/* Tech/Cyber */
[data-bg-base=gradient-holographic] .bg-layers__base {
  background-color: #06b6d4;
  background-image: linear-gradient(90deg, #06b6d4 0%, #d946ef 33%, #facc15 66%, #06b6d4 100%);
}

[data-bg-base=gradient-laser] .bg-layers__base {
  background-color: #8b5cf6;
  background-image: linear-gradient(90deg, #dc2626 0%, #ec4899 50%, #8b5cf6 100%);
}

[data-bg-base=gradient-cyber] .bg-layers__base {
  background-color: #0f0f0f;
  background-image: linear-gradient(90deg, #0f0f0f 0%, #0ea5e9 50%, #22d3d1 100%);
}

/* Seasonal */
[data-bg-base=gradient-spring] .bg-layers__base {
  background-color: #fde047;
  background-image: linear-gradient(90deg, #f9a8d4 0%, #a7f3d0 50%, #fde047 100%);
}

[data-bg-base=gradient-summer] .bg-layers__base {
  background-color: #38bdf8;
  background-image: linear-gradient(90deg, #38bdf8 0%, #2dd4bf 50%, #fb923c 100%);
}

[data-bg-base=gradient-winter] .bg-layers__base {
  background-color: #f8fafc;
  background-image: linear-gradient(180deg, #f8fafc 0%, #bae6fd 50%, #cbd5e1 100%);
}

/* ==========================================================================
   Industry Preset Gradients
   ========================================================================== */
[data-bg-base=gradient-medical] .bg-layers__base {
  background-color: #0891b2;
  background-image: linear-gradient(90deg, #0891b2 0%, #0d9488 50%, #10b981 100%);
}

[data-bg-base=gradient-wellness] .bg-layers__base {
  background-color: #d1fae5;
  background-image: linear-gradient(180deg, #d1fae5 0%, #a7f3d0 50%, #6ee7b7 100%);
}

[data-bg-base=gradient-corporate] .bg-layers__base {
  background-color: #0f172a;
  background-image: linear-gradient(180deg, #0f172a 0%, #1e293b 50%, #334155 100%);
}

[data-bg-base=gradient-trust] .bg-layers__base {
  background-color: #1e3a8a;
  background-image: linear-gradient(90deg, #1e3a8a 0%, #1e40af 70%, #92400e 100%);
}

[data-bg-base=gradient-property] .bg-layers__base {
  background-color: #78350f;
  background-image: linear-gradient(90deg, #78350f 0%, #92400e 50%, #b45309 100%);
}

[data-bg-base=gradient-home] .bg-layers__base {
  background-color: #fef3c7;
  background-image: linear-gradient(180deg, #fef3c7 0%, #fcd34d 50%, #f59e0b 100%);
}

[data-bg-base=gradient-appetite] .bg-layers__base {
  background-color: #ea580c;
  background-image: linear-gradient(90deg, #ea580c 0%, #dc2626 50%, #b91c1c 100%);
}

[data-bg-base=gradient-fresh] .bg-layers__base {
  background-color: #15803d;
  background-image: linear-gradient(90deg, #15803d 0%, #4d7c0f 50%, #a16207 100%);
}

[data-bg-base=gradient-creative] .bg-layers__base {
  background-color: #ec4899;
  background-image: linear-gradient(90deg, #ec4899 0%, #8b5cf6 33%, #06b6d4 66%, #10b981 100%);
}

[data-bg-base=gradient-bold] .bg-layers__base {
  background-color: #0f0f0f;
  background-image: linear-gradient(90deg, #0f0f0f 0%, #dc2626 50%, #b45309 100%);
}

/* ==========================================================================
   Duotone Effects
   ========================================================================== */
[data-bg-base=duotone] .bg-layers__base {
  background-color: oklch(var(--p));
  background-image: linear-gradient(90deg, oklch(var(--p)) 0%, oklch(var(--p)) 50%, oklch(var(--s)) 50%, oklch(var(--s)) 100%);
}

[data-bg-base=duotone-azure] .bg-layers__base {
  background-color: #0c4a6e;
  background-image: linear-gradient(180deg, #0c4a6e 0%, #0369a1 50%, #0891b2 100%);
}

[data-bg-base=duotone-violet] .bg-layers__base {
  background-color: #4c1d95;
  background-image: linear-gradient(180deg, #4c1d95 0%, #6d28d9 50%, #a855f7 100%);
}

[data-bg-base=duotone-ember] .bg-layers__base {
  background-color: #7c2d12;
  background-image: linear-gradient(180deg, #7c2d12 0%, #c2410c 50%, #ea580c 100%);
}

[data-bg-base=duotone-mint] .bg-layers__base {
  background-color: #134e4a;
  background-image: linear-gradient(180deg, #134e4a 0%, #0f766e 50%, #0d9488 100%);
}

[data-bg-base=duotone-mono] .bg-layers__base {
  background-color: #0a0a0a;
  background-image: linear-gradient(180deg, #0a0a0a 0%, #404040 50%, #737373 100%);
}

/* ==========================================================================
   Split/Multi Backgrounds
   ========================================================================== */
[data-bg-base=split-horizontal] .bg-layers__base {
  background-color: oklch(var(--p));
  background-image: linear-gradient(180deg, oklch(var(--p)) 0%, oklch(var(--p)) 50%, oklch(var(--s)) 50%, oklch(var(--s)) 100%);
}

[data-bg-base=split-vertical] .bg-layers__base {
  background-color: oklch(var(--p));
  background-image: linear-gradient(90deg, oklch(var(--p)) 0%, oklch(var(--p)) 50%, oklch(var(--s)) 50%, oklch(var(--s)) 100%);
}

[data-bg-base=split-diagonal] .bg-layers__base {
  background-color: oklch(var(--p));
  background-image: linear-gradient(90deg, oklch(var(--p)) 0%, oklch(var(--p)) 49%, oklch(var(--s)) 51%, oklch(var(--s)) 100%);
}

[data-bg-base=tri-color] .bg-layers__base {
  background-color: oklch(var(--p));
  background-image: linear-gradient(90deg, oklch(var(--p)) 0%, oklch(var(--s)) 50%, oklch(var(--p)) 100%);
}

/* ==========================================================================
   Glass/Blur Effects
   ========================================================================== */
[data-bg-base=glass] .bg-layers__base {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

[data-bg-base=frosted] .bg-layers__base {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
}

[data-bg-base=blur] .bg-layers__base {
  background: rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ==========================================================================
   Textured Backgrounds
   ========================================================================== */
[data-bg-base=noise-light] .bg-layers__base {
  background-color: hsl(0, 0%, 97%);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");
}

[data-bg-base=noise-dark] .bg-layers__base {
  background-color: hsl(0, 0%, 10%);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.15'/%3E%3C/svg%3E");
}

[data-bg-base=gradient-grainy] .bg-layers__base {
  background-color: oklch(var(--p));
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.15'/%3E%3C/svg%3E"), linear-gradient(90deg, oklch(var(--p)), oklch(var(--s)));
}

/* ==========================================================================
   Special Effects
   ========================================================================== */
[data-bg-base=vignette] .bg-layers__base {
  background-color: oklch(var(--b2));
  background-image: radial-gradient(ellipse at 50% 50%, transparent 0%, transparent 40%, rgba(0, 0, 0, 0.3) 80%, rgba(0, 0, 0, 0.6) 100%);
}

[data-bg-base=spotlight] .bg-layers__base {
  background-color: hsl(0, 0%, 5%);
  background-image: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(255, 255, 255, 0.3) 0%, transparent 60%), linear-gradient(180deg, hsl(0, 0%, 15%), hsl(0, 0%, 5%));
}

[data-bg-base=glow] .bg-layers__base {
  background-color: hsl(0, 0%, 8%);
  background-image: radial-gradient(ellipse at 50% 50%, oklch(var(--p)) 0%, transparent 50%);
}

/* ==========================================================================
   Animated Backgrounds
   ========================================================================== */
@keyframes bg-gradient-move {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
[data-bg-base=animated-gradient] .bg-layers__base {
  background-color: oklch(var(--p));
  background-image: linear-gradient(270deg, oklch(var(--p)), oklch(var(--s)), oklch(var(--p)));
  background-size: 200% 200%;
  animation: bg-gradient-move 8s ease infinite;
}

@keyframes bg-mesh-move {
  0%, 100% {
    background-position: 0% 0%, 100% 0%, 50% 100%;
  }
  33% {
    background-position: 100% 50%, 0% 100%, 50% 0%;
  }
  66% {
    background-position: 50% 100%, 50% 0%, 0% 50%;
  }
}
[data-bg-base=animated-mesh] .bg-layers__base {
  background-color: oklch(var(--b2));
  background-image: radial-gradient(ellipse at 0% 0%, oklch(var(--p)) 0%, transparent 50%), radial-gradient(ellipse at 100% 0%, oklch(var(--s)) 0%, transparent 50%), radial-gradient(ellipse at 50% 100%, oklch(var(--p)) 0%, transparent 50%);
  background-size: 100% 100%;
  animation: bg-mesh-move 12s ease infinite;
}

@keyframes bg-shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}
[data-bg-base=animated-shimmer] .bg-layers__base {
  background-color: oklch(var(--p));
  background-image: linear-gradient(90deg, oklch(var(--p)) 0%, rgba(255, 255, 255, 0.3) 25%, oklch(var(--s)) 50%, rgba(255, 255, 255, 0.3) 75%, oklch(var(--p)) 100%);
  background-size: 200% 100%;
  animation: bg-shimmer 3s linear infinite;
}

@keyframes bg-aurora {
  0%, 100% {
    background-position: 0% 50%;
  }
  25% {
    background-position: 50% 100%;
  }
  50% {
    background-position: 100% 50%;
  }
  75% {
    background-position: 50% 0%;
  }
}
[data-bg-base=animated-aurora] .bg-layers__base {
  background-color: #8b5cf6;
  background-image: linear-gradient(90deg, #10b981 0%, #14b8a6 25%, #8b5cf6 50%, #ec4899 75%, #10b981 100%);
  background-size: 300% 300%;
  animation: bg-aurora 15s ease infinite;
}

@keyframes bg-pulse-glow {
  0%, 100% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
}
[data-bg-base=animated-pulse-glow] .bg-layers__base {
  background-color: hsl(0, 0%, 8%);
  background-image: radial-gradient(ellipse at 50% 50%, oklch(var(--p)) 0%, transparent 60%);
  animation: bg-pulse-glow 4s ease-in-out infinite;
}

@keyframes bg-wave {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
[data-bg-base=animated-wave] .bg-layers__base {
  background-color: oklch(var(--p));
  background-image: linear-gradient(90deg, oklch(var(--p)) 0%, oklch(var(--s)) 25%, oklch(var(--p)) 50%, oklch(var(--s)) 75%, oklch(var(--p)) 100%);
  background-size: 400% 100%;
  animation: bg-wave 6s linear infinite;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  [data-bg-base=animated-gradient] .bg-layers__base,
  [data-bg-base=animated-mesh] .bg-layers__base,
  [data-bg-base=animated-shimmer] .bg-layers__base,
  [data-bg-base=animated-aurora] .bg-layers__base,
  [data-bg-base=animated-pulse-glow] .bg-layers__base,
  [data-bg-base=animated-wave] .bg-layers__base {
    animation: none;
  }
}
/* ==========================================================================
   Video Gradient Layer
   ========================================================================== */
/**
 * When using video backgrounds, gradients are applied to a separate
 * .bg-layers__gradient element that sits above the video.
 * Uses data-bg-gradient attribute instead of data-bg-base.
 */
/* Brand Gradients */
[data-bg-gradient=gradient-brand] .bg-layers__gradient {
  background-color: oklch(var(--p));
  background-image: linear-gradient(90deg, oklch(var(--p)), oklch(var(--s)));
}

[data-bg-gradient=gradient-brand-fade] .bg-layers__gradient {
  background-color: oklch(var(--p));
  background-image: linear-gradient(90deg, oklch(var(--p)) 0%, oklch(var(--p)) 30%, oklch(var(--s)) 100%);
}

[data-bg-gradient=gradient-brand-to-dark] .bg-layers__gradient {
  background-color: oklch(var(--p));
  background-image: linear-gradient(180deg, oklch(var(--p)) 0%, oklch(var(--s)) 60%, hsl(0, 0%, 15%) 100%);
}

/* Fixed Color Gradients */
[data-bg-gradient=gradient-sunset] .bg-layers__gradient {
  background-color: #8b5cf6;
  background-image: linear-gradient(90deg, #f97316 0%, #ec4899 50%, #8b5cf6 100%);
}

[data-bg-gradient=gradient-ocean] .bg-layers__gradient {
  background-color: #1e3a8a;
  background-image: linear-gradient(90deg, #1e3a8a 0%, #0d9488 50%, #06b6d4 100%);
}

[data-bg-gradient=gradient-forest] .bg-layers__gradient {
  background-color: #14532d;
  background-image: linear-gradient(90deg, #14532d 0%, #059669 50%, #84cc16 100%);
}

[data-bg-gradient=gradient-night] .bg-layers__gradient {
  background-color: #0f0f0f;
  background-image: linear-gradient(180deg, #581c87 0%, #1e1b4b 50%, #0f0f0f 100%);
}

[data-bg-gradient=gradient-fire] .bg-layers__gradient {
  background-color: #dc2626;
  background-image: linear-gradient(90deg, #dc2626 0%, #f97316 50%, #fbbf24 100%);
}

[data-bg-gradient=gradient-aurora] .bg-layers__gradient {
  background-color: #8b5cf6;
  background-image: linear-gradient(90deg, #10b981 0%, #14b8a6 25%, #8b5cf6 50%, #ec4899 75%, #10b981 100%);
}

[data-bg-gradient=gradient-midnight] .bg-layers__gradient {
  background-color: #0f0f0f;
  background-image: linear-gradient(180deg, #1e3a8a 0%, #312e81 50%, #0f0f0f 100%);
}

[data-bg-gradient=gradient-candy] .bg-layers__gradient {
  background-color: #a7f3d0;
  background-image: linear-gradient(90deg, #f472b6 0%, #c4b5fd 50%, #a7f3d0 100%);
}

[data-bg-gradient=gradient-neon] .bg-layers__gradient {
  background-color: #d946ef;
  background-image: linear-gradient(90deg, #06b6d4 0%, #d946ef 50%, #facc15 100%);
}

[data-bg-gradient=gradient-warm] .bg-layers__gradient {
  background-color: #dc2626;
  background-image: linear-gradient(90deg, #fbbf24 0%, #f97316 50%, #dc2626 100%);
}

[data-bg-gradient=gradient-cool] .bg-layers__gradient {
  background-color: #3b82f6;
  background-image: linear-gradient(90deg, #3b82f6 0%, #06b6d4 50%, #14b8a6 100%);
}

[data-bg-gradient=gradient-dusk] .bg-layers__gradient {
  background-color: #1e3a8a;
  background-image: linear-gradient(180deg, #fb923c 0%, #a855f7 50%, #1e3a8a 100%);
}

[data-bg-gradient=gradient-dawn] .bg-layers__gradient {
  background-color: #fcd34d;
  background-image: linear-gradient(180deg, #fda4af 0%, #fb923c 40%, #fcd34d 100%);
}

[data-bg-gradient=gradient-cyber] .bg-layers__gradient {
  background-color: #0f0f0f;
  background-image: linear-gradient(90deg, #0f0f0f 0%, #0ea5e9 50%, #22d3d1 100%);
}

[data-bg-gradient=gradient-noir] .bg-layers__gradient {
  background-color: #0a0a0a;
  background-image: linear-gradient(180deg, #0a0a0a 0%, #262626 50%, #404040 100%);
}

/**
 * Universal Background Patterns
 *
 * Decorative patterns for the pattern layer via data-bg-pattern attribute.
 * Patterns use currentColor which inherits from --text-muted.
 * This allows patterns to adapt to overlay modes automatically.
 */
/* ==========================================================================
   Pattern Opacity Modifiers
   ========================================================================== */
[data-bg-pattern-opacity="5"] .bg-layers__pattern {
  --bg-pattern-opacity: 0.05;
}

[data-bg-pattern-opacity="10"] .bg-layers__pattern {
  --bg-pattern-opacity: 0.10;
}

[data-bg-pattern-opacity="15"] .bg-layers__pattern {
  --bg-pattern-opacity: 0.15;
}

[data-bg-pattern-opacity="20"] .bg-layers__pattern {
  --bg-pattern-opacity: 0.20;
}

[data-bg-pattern-opacity="25"] .bg-layers__pattern {
  --bg-pattern-opacity: 0.25;
}

[data-bg-pattern-opacity="30"] .bg-layers__pattern {
  --bg-pattern-opacity: 0.30;
}

[data-bg-pattern-opacity="35"] .bg-layers__pattern {
  --bg-pattern-opacity: 0.35;
}

[data-bg-pattern-opacity="40"] .bg-layers__pattern {
  --bg-pattern-opacity: 0.40;
}

[data-bg-pattern-opacity="45"] .bg-layers__pattern {
  --bg-pattern-opacity: 0.45;
}

[data-bg-pattern-opacity="50"] .bg-layers__pattern {
  --bg-pattern-opacity: 0.50;
}

[data-bg-pattern-opacity="55"] .bg-layers__pattern {
  --bg-pattern-opacity: 0.55;
}

[data-bg-pattern-opacity="60"] .bg-layers__pattern {
  --bg-pattern-opacity: 0.60;
}

[data-bg-pattern-opacity="65"] .bg-layers__pattern {
  --bg-pattern-opacity: 0.65;
}

[data-bg-pattern-opacity="70"] .bg-layers__pattern {
  --bg-pattern-opacity: 0.70;
}

[data-bg-pattern-opacity="75"] .bg-layers__pattern {
  --bg-pattern-opacity: 0.75;
}

[data-bg-pattern-opacity="80"] .bg-layers__pattern {
  --bg-pattern-opacity: 0.80;
}

[data-bg-pattern-opacity="85"] .bg-layers__pattern {
  --bg-pattern-opacity: 0.85;
}

[data-bg-pattern-opacity="90"] .bg-layers__pattern {
  --bg-pattern-opacity: 0.90;
}

[data-bg-pattern-opacity="95"] .bg-layers__pattern {
  --bg-pattern-opacity: 0.95;
}

[data-bg-pattern-opacity="100"] .bg-layers__pattern {
  --bg-pattern-opacity: 1.00;
}

/* ==========================================================================
   None - No Pattern
   ========================================================================== */
[data-bg-pattern=none] .bg-layers__pattern {
  display: none;
}

/* ==========================================================================
   GEOMETRIC - Basic Geometric Patterns
   ========================================================================== */
/* Dots - Dot Grid Pattern */
[data-bg-pattern=dots] .bg-layers__pattern {
  background-image: radial-gradient(circle, currentColor 2px, transparent 2px);
  background-size: 16px 16px;
}

/* Dots Large - Bigger Dots, Wider Spacing */
[data-bg-pattern=dots-lg] .bg-layers__pattern {
  background-image: radial-gradient(circle, currentColor 4px, transparent 4px);
  background-size: 24px 24px;
}

/* Dots Dense - Tighter Dot Grid */
[data-bg-pattern=dots-dense] .bg-layers__pattern {
  background-image: radial-gradient(circle, currentColor 1.5px, transparent 1.5px);
  background-size: 10px 10px;
}

/* Dots Offset - Staggered/Honeycomb Arrangement */
[data-bg-pattern=dots-offset] .bg-layers__pattern {
  background-image: radial-gradient(circle, currentColor 2px, transparent 2px), radial-gradient(circle, currentColor 2px, transparent 2px);
  background-size: 20px 20px;
  background-position: 0 0, 10px 10px;
}

/* Lines - Horizontal Line Grid */
[data-bg-pattern=lines] .bg-layers__pattern {
  background-image: linear-gradient(0deg, currentColor 1px, transparent 1px);
  background-size: 100% 24px;
}

/* Lines Large - Wider Line Spacing */
[data-bg-pattern=lines-lg] .bg-layers__pattern {
  background-image: linear-gradient(0deg, currentColor 1px, transparent 1px);
  background-size: 100% 32px;
}

/* Lines Dense - Tighter Line Spacing */
[data-bg-pattern=lines-dense] .bg-layers__pattern {
  background-image: linear-gradient(0deg, currentColor 1px, transparent 1px);
  background-size: 100% 12px;
}

/* Lines Vertical - Vertical Lines */
[data-bg-pattern=lines-vertical] .bg-layers__pattern {
  background-image: linear-gradient(90deg, currentColor 1px, transparent 1px);
  background-size: 24px 100%;
}

/* Lines Double - Double Horizontal Lines */
[data-bg-pattern=lines-double] .bg-layers__pattern {
  background-image: linear-gradient(0deg, currentColor 1px, transparent 1px), linear-gradient(0deg, currentColor 1px, transparent 1px);
  background-size: 100% 24px, 100% 24px;
  background-position: 0 0, 0 4px;
}

/* Grid - Cross Grid Pattern */
[data-bg-pattern=grid] .bg-layers__pattern {
  background-image: linear-gradient(0deg, currentColor 1px, transparent 1px), linear-gradient(90deg, currentColor 1px, transparent 1px);
  background-size: 32px 32px;
}

/* Grid Large - Larger Grid Cells */
[data-bg-pattern=grid-lg] .bg-layers__pattern {
  background-image: linear-gradient(0deg, currentColor 1px, transparent 1px), linear-gradient(90deg, currentColor 1px, transparent 1px);
  background-size: 48px 48px;
}

/* Grid Dense - Smaller Grid Cells */
[data-bg-pattern=grid-dense] .bg-layers__pattern {
  background-image: linear-gradient(0deg, currentColor 1px, transparent 1px), linear-gradient(90deg, currentColor 1px, transparent 1px);
  background-size: 16px 16px;
}

/* Grid Dotted - Dotted Grid Lines */
[data-bg-pattern=grid-dotted] .bg-layers__pattern {
  background-image: radial-gradient(circle, currentColor 1px, transparent 1px);
  background-size: 16px 16px;
}

/* Diagonal Lines */
[data-bg-pattern=diagonal] .bg-layers__pattern {
  background-image: repeating-linear-gradient(45deg, transparent, transparent 8px, currentColor 8px, currentColor 9px);
}

/* Diagonal Reverse - Diagonal Lines (-45°) */
[data-bg-pattern=diagonal-reverse] .bg-layers__pattern {
  background-image: repeating-linear-gradient(-45deg, transparent, transparent 8px, currentColor 8px, currentColor 9px);
}

/* Crosshatch - Diagonal Both Directions */
[data-bg-pattern=crosshatch] .bg-layers__pattern {
  background-image: repeating-linear-gradient(45deg, transparent, transparent 8px, currentColor 8px, currentColor 9px), repeating-linear-gradient(-45deg, transparent, transparent 8px, currentColor 8px, currentColor 9px);
}

/* Chevron - Zigzag/Herringbone Pattern */
[data-bg-pattern=chevron] .bg-layers__pattern {
  background-image: linear-gradient(90deg, currentColor 25%, transparent 25%), linear-gradient(225deg, currentColor 25%, transparent 25%), linear-gradient(45deg, currentColor 25%, transparent 25%), linear-gradient(315deg, currentColor 25%, transparent 25%);
  background-size: 20px 20px;
  background-position: 10px 0, 10px 0, 0 0, 0 0;
}

/* Squares - Checkered Pattern */
[data-bg-pattern=squares] .bg-layers__pattern {
  background-image: linear-gradient(45deg, currentColor 25%, transparent 25%, transparent 75%, currentColor 75%), linear-gradient(45deg, currentColor 25%, transparent 25%, transparent 75%, currentColor 75%);
  background-size: 24px 24px;
  background-position: 0 0, 12px 12px;
}

/* Triangles - Triangle Tessellation */
[data-bg-pattern=triangles] .bg-layers__pattern {
  background-image: linear-gradient(90deg, currentColor 25%, transparent 25%), linear-gradient(225deg, currentColor 25%, transparent 25%);
  background-size: 24px 24px;
}

/* Plus - Plus/Cross Sign Grid */
[data-bg-pattern=plus] .bg-layers__pattern {
  background-image: linear-gradient(currentColor 1px, transparent 1px), linear-gradient(90deg, currentColor 1px, transparent 1px);
  background-size: 6px 20px, 20px 6px;
  background-position: center center;
}

/* Diamonds - Diamond/Rhombus Grid */
[data-bg-pattern=diamonds] .bg-layers__pattern {
  background-image: linear-gradient(90deg, currentColor 25%, transparent 25%), linear-gradient(225deg, currentColor 25%, transparent 25%), linear-gradient(315deg, currentColor 25%, transparent 25%), linear-gradient(45deg, currentColor 25%, transparent 25%);
  background-size: 20px 20px;
  background-position: 0 0, 10px 0, 10px -10px, 0 10px;
}

/* Brick - Brick Wall Pattern */
[data-bg-pattern=brick] .bg-layers__pattern {
  background-image: linear-gradient(335deg, transparent 34%, currentColor 34%, currentColor 36%, transparent 36%), linear-gradient(155deg, transparent 34%, currentColor 34%, currentColor 36%, transparent 36%), linear-gradient(transparent 47%, currentColor 47%, currentColor 53%, transparent 53%);
  background-size: 30px 15px;
}

/* Zigzag - Horizontal Zigzag Lines */
[data-bg-pattern=zigzag] .bg-layers__pattern {
  background-image: linear-gradient(90deg, currentColor 25%, transparent 25%), linear-gradient(225deg, currentColor 25%, transparent 25%);
  background-size: 16px 16px;
  background-position: 0 0, 8px 0;
}

/* Hexagons - Honeycomb Hexagon Grid */
[data-bg-pattern=hexagons] .bg-layers__pattern {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 52'%3E%3Cpath d='M30 0 L60 15 L60 37 L30 52 L0 37 L0 15 Z' fill='none' stroke='currentColor' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 60px 52px;
  background-repeat: repeat;
}

/* Isometric - Isometric Cube Grid */
[data-bg-pattern=isometric] .bg-layers__pattern {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 52'%3E%3Cpath d='M30 0 L60 15 L60 37 L30 52 L0 37 L0 15 Z M30 0 L30 22 M0 15 L30 30 M60 15 L30 30 L30 52' fill='none' stroke='currentColor' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 60px 52px;
  background-repeat: repeat;
}

/* ==========================================================================
   ORGANIC - Nature-Inspired Patterns
   ========================================================================== */
/* Noise - SVG Noise Texture */
[data-bg-pattern=noise] .bg-layers__pattern {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%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;
}

/* Waves - Wavy Horizontal Lines */
[data-bg-pattern=waves] .bg-layers__pattern {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20'%3E%3Cpath d='M0 10 Q25 0 50 10 T100 10' fill='none' stroke='currentColor' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 100px 20px;
  background-repeat: repeat;
}

/* Topography - Contour Map Lines */
[data-bg-pattern=topography] .bg-layers__pattern {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M40 120 Q60 80 100 90 T160 70' fill='none' stroke='currentColor' stroke-width='1'/%3E%3Cpath d='M20 160 Q50 120 100 130 T180 100' fill='none' stroke='currentColor' stroke-width='1'/%3E%3Cpath d='M30 60 Q70 30 120 50 T170 30' fill='none' stroke='currentColor' stroke-width='1'/%3E%3Cpath d='M10 100 Q40 70 90 80 T150 60' fill='none' stroke='currentColor' stroke-width='1'/%3E%3Cpath d='M50 180 Q80 150 130 160 T190 140' fill='none' stroke='currentColor' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  background-repeat: repeat;
}

/* Circuit - Tech/Circuit Board Pattern */
[data-bg-pattern=circuit] .bg-layers__pattern {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M10 10 H40 V30 H60 V10 H90' fill='none' stroke='currentColor' stroke-width='1'/%3E%3Cpath d='M10 50 H30 V70 H50 V50 H70 V30 H90' fill='none' stroke='currentColor' stroke-width='1'/%3E%3Cpath d='M10 90 H40 V70 H60 V90 H90' fill='none' stroke='currentColor' stroke-width='1'/%3E%3Ccircle cx='40' cy='30' r='3' fill='currentColor'/%3E%3Ccircle cx='60' cy='70' r='3' fill='currentColor'/%3E%3Ccircle cx='70' cy='30' r='3' fill='currentColor'/%3E%3Ccircle cx='30' cy='70' r='3' fill='currentColor'/%3E%3C/svg%3E");
  background-size: 100px 100px;
  background-repeat: repeat;
}

/* Paper - Paper Texture Grain */
[data-bg-pattern=paper] .bg-layers__pattern {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='paper'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.04' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23paper)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 200px 200px;
}

/* Stars - Star Pattern Grid */
[data-bg-pattern=stars] .bg-layers__pattern {
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Cpath d='M25 2 L30 18 L47 18 L33 28 L38 45 L25 35 L12 45 L17 28 L3 18 L20 18 Z' fill='white'/%3E%3C/svg%3E");
  -webkit-mask-size: 40px 40px;
  -webkit-mask-repeat: repeat;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Cpath d='M25 2 L30 18 L47 18 L33 28 L38 45 L25 35 L12 45 L17 28 L3 18 L20 18 Z' fill='white'/%3E%3C/svg%3E");
  mask-size: 40px 40px;
  mask-repeat: repeat;
}

/* Marble - Marble/Veined Texture */
[data-bg-pattern=marble] .bg-layers__pattern {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='marble'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.02' numOctaves='3' result='turbulence'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='turbulence' scale='20'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23marble)' fill='none' stroke='currentColor' stroke-width='0.5'/%3E%3Cpath d='M0 100 Q50 80 100 100 T200 100' fill='none' stroke='currentColor' stroke-width='1' filter='url(%23marble)'/%3E%3Cpath d='M0 50 Q50 30 100 50 T200 50' fill='none' stroke='currentColor' stroke-width='0.5' filter='url(%23marble)'/%3E%3Cpath d='M0 150 Q50 130 100 150 T200 150' fill='none' stroke='currentColor' stroke-width='0.5' filter='url(%23marble)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  background-repeat: repeat;
}

/* Ripples - Concentric Circle Ripples */
[data-bg-pattern=ripples] .bg-layers__pattern {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='10' fill='none' stroke='currentColor' stroke-width='1'/%3E%3Ccircle cx='50' cy='50' r='20' fill='none' stroke='currentColor' stroke-width='1'/%3E%3Ccircle cx='50' cy='50' r='30' fill='none' stroke='currentColor' stroke-width='1'/%3E%3Ccircle cx='50' cy='50' r='40' fill='none' stroke='currentColor' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 100px 100px;
  background-repeat: repeat;
}

/* Bokeh - Blurred Circle Bokeh Effect */
[data-bg-pattern=bokeh] .bg-layers__pattern {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='20' cy='20' r='8' fill='currentColor' opacity='0.3'/%3E%3Ccircle cx='70' cy='30' r='12' fill='currentColor' opacity='0.2'/%3E%3Ccircle cx='40' cy='60' r='6' fill='currentColor' opacity='0.4'/%3E%3Ccircle cx='80' cy='70' r='10' fill='currentColor' opacity='0.25'/%3E%3Ccircle cx='25' cy='85' r='7' fill='currentColor' opacity='0.35'/%3E%3C/svg%3E");
  background-size: 100px 100px;
  background-repeat: repeat;
}

/* Clouds - Soft Cloud Texture */
[data-bg-pattern=clouds] .bg-layers__pattern {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='clouds'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.015' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23clouds)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  background-repeat: repeat;
}

/* Sand - Fine Grain Sand Texture */
[data-bg-pattern=sand] .bg-layers__pattern {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='sand'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23sand)'/%3E%3C/svg%3E");
  background-size: 100px 100px;
  background-repeat: repeat;
}

/* Wood - Wood Grain Lines */
[data-bg-pattern=wood] .bg-layers__pattern {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 50'%3E%3Cpath d='M0 10 Q50 5 100 12 T200 8' fill='none' stroke='currentColor' stroke-width='1'/%3E%3Cpath d='M0 25 Q50 20 100 28 T200 22' fill='none' stroke='currentColor' stroke-width='1'/%3E%3Cpath d='M0 40 Q50 35 100 42 T200 38' fill='none' stroke='currentColor' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 200px 50px;
  background-repeat: repeat;
}

/* Leaves - Leaf/Botanical Pattern */
[data-bg-pattern=leaves] .bg-layers__pattern {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M30 5 Q45 20 30 45 Q15 20 30 5' fill='none' stroke='currentColor' stroke-width='1'/%3E%3Cpath d='M30 15 L30 40' fill='none' stroke='currentColor' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 60px 60px;
  background-repeat: repeat;
}

/* ==========================================================================
   TECH/MODERN - Digital and Technology Patterns
   ========================================================================== */
/* Binary - Binary 0/1 Pattern */
[data-bg-pattern=binary] .bg-layers__pattern {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 40'%3E%3Ctext x='5' y='15' font-family='monospace' font-size='10' fill='currentColor'%3E01101%3C/text%3E%3Ctext x='5' y='35' font-family='monospace' font-size='10' fill='currentColor'%3E10010%3C/text%3E%3C/svg%3E");
  background-size: 80px 40px;
  background-repeat: repeat;
}

/* Matrix - Matrix Rain Style Dots */
[data-bg-pattern=matrix] .bg-layers__pattern {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 100'%3E%3Ccircle cx='10' cy='10' r='2' fill='currentColor' opacity='0.3'/%3E%3Ccircle cx='25' cy='25' r='2' fill='currentColor' opacity='0.5'/%3E%3Ccircle cx='40' cy='15' r='2' fill='currentColor' opacity='0.4'/%3E%3Ccircle cx='15' cy='50' r='2' fill='currentColor' opacity='0.6'/%3E%3Ccircle cx='35' cy='45' r='2' fill='currentColor' opacity='0.7'/%3E%3Ccircle cx='25' cy='70' r='2' fill='currentColor' opacity='0.8'/%3E%3Ccircle cx='10' cy='85' r='2' fill='currentColor' opacity='0.9'/%3E%3Ccircle cx='40' cy='90' r='2' fill='currentColor'/%3E%3C/svg%3E");
  background-size: 50px 100px;
  background-repeat: repeat;
}

/* Radar - Radar Sweep Circles */
[data-bg-pattern=radar] .bg-layers__pattern {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='15' fill='none' stroke='currentColor' stroke-width='1'/%3E%3Ccircle cx='50' cy='50' r='30' fill='none' stroke='currentColor' stroke-width='1'/%3E%3Ccircle cx='50' cy='50' r='45' fill='none' stroke='currentColor' stroke-width='1'/%3E%3Cline x1='50' y1='50' x2='50' y2='5' stroke='currentColor' stroke-width='1'/%3E%3Cline x1='50' y1='50' x2='95' y2='50' stroke='currentColor' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 100px 100px;
  background-repeat: repeat;
}

/* Blueprint - Blueprint Grid with Markers */
[data-bg-pattern=blueprint] .bg-layers__pattern {
  background-image: linear-gradient(0deg, currentColor 1px, transparent 1px), linear-gradient(90deg, currentColor 1px, transparent 1px), radial-gradient(circle, currentColor 2px, transparent 2px);
  background-size: 40px 40px, 40px 40px, 40px 40px;
  background-position: 0 0, 0 0, 20px 20px;
}

/* Scanlines - CRT Scanline Effect */
[data-bg-pattern=scanlines] .bg-layers__pattern {
  background-image: linear-gradient(0deg, transparent 50%, currentColor 50%);
  background-size: 100% 4px;
}

/* Glitch - Digital Glitch Effect */
[data-bg-pattern=glitch] .bg-layers__pattern {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 50'%3E%3Crect x='0' y='5' width='100' height='2' fill='currentColor' opacity='0.3'/%3E%3Crect x='10' y='15' width='30' height='3' fill='currentColor' opacity='0.4'/%3E%3Crect x='50' y='12' width='40' height='2' fill='currentColor' opacity='0.25'/%3E%3Crect x='5' y='25' width='20' height='4' fill='currentColor' opacity='0.35'/%3E%3Crect x='35' y='28' width='55' height='2' fill='currentColor' opacity='0.3'/%3E%3Crect x='0' y='38' width='45' height='3' fill='currentColor' opacity='0.4'/%3E%3Crect x='60' y='40' width='30' height='2' fill='currentColor' opacity='0.25'/%3E%3C/svg%3E");
  background-size: 100px 50px;
  background-repeat: repeat;
}

/* Pixel - Pixelated/8-bit Blocks */
[data-bg-pattern=pixel] .bg-layers__pattern {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect x='0' y='0' width='10' height='10' fill='currentColor' opacity='0.3'/%3E%3Crect x='20' y='10' width='10' height='10' fill='currentColor' opacity='0.4'/%3E%3Crect x='40' y='0' width='10' height='10' fill='currentColor' opacity='0.25'/%3E%3Crect x='60' y='20' width='10' height='10' fill='currentColor' opacity='0.35'/%3E%3Crect x='10' y='30' width='10' height='10' fill='currentColor' opacity='0.3'/%3E%3Crect x='30' y='40' width='10' height='10' fill='currentColor' opacity='0.4'/%3E%3Crect x='50' y='50' width='10' height='10' fill='currentColor' opacity='0.25'/%3E%3Crect x='70' y='40' width='10' height='10' fill='currentColor' opacity='0.35'/%3E%3Crect x='0' y='60' width='10' height='10' fill='currentColor' opacity='0.3'/%3E%3Crect x='20' y='70' width='10' height='10' fill='currentColor' opacity='0.4'/%3E%3Crect x='60' y='60' width='10' height='10' fill='currentColor' opacity='0.3'/%3E%3C/svg%3E");
  background-size: 80px 80px;
  background-repeat: repeat;
}

/* Gradient Noise - Gradient with Noise Overlay */
[data-bg-pattern=gradient-noise] .bg-layers__pattern {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cfilter id='gn'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3ClinearGradient id='lg' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:currentColor;stop-opacity:0.1'/%3E%3Cstop offset='100%25' style='stop-color:currentColor;stop-opacity:0.4'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23lg)'/%3E%3Crect width='100%25' height='100%25' filter='url(%23gn)' opacity='0.3'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  background-repeat: repeat;
}

/* Static - TV Static Noise */
[data-bg-pattern=static] .bg-layers__pattern {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='static'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23static)'/%3E%3C/svg%3E");
  background-size: 100px 100px;
  background-repeat: repeat;
}

/* ==========================================================================
   DECORATIVE - Decorative and Fun Patterns
   ========================================================================== */
/* Confetti - Scattered Confetti Shapes */
[data-bg-pattern=confetti] .bg-layers__pattern {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect x='10' y='20' width='6' height='3' fill='currentColor' transform='rotate(25 13 21.5)'/%3E%3Crect x='50' y='10' width='6' height='3' fill='currentColor' transform='rotate(-15 53 11.5)'/%3E%3Crect x='80' y='30' width='6' height='3' fill='currentColor' transform='rotate(45 83 31.5)'/%3E%3Crect x='25' y='60' width='6' height='3' fill='currentColor' transform='rotate(-30 28 61.5)'/%3E%3Crect x='70' y='70' width='6' height='3' fill='currentColor' transform='rotate(60 73 71.5)'/%3E%3Crect x='40' y='85' width='6' height='3' fill='currentColor' transform='rotate(10 43 86.5)'/%3E%3C/svg%3E");
  background-size: 100px 100px;
  background-repeat: repeat;
}

/* Sprinkles - Random Short Lines */
[data-bg-pattern=sprinkles] .bg-layers__pattern {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Cline x1='10' y1='10' x2='18' y2='14' stroke='currentColor' stroke-width='2' stroke-linecap='round'/%3E%3Cline x1='50' y1='5' x2='55' y2='12' stroke='currentColor' stroke-width='2' stroke-linecap='round'/%3E%3Cline x1='70' y1='25' x2='75' y2='18' stroke='currentColor' stroke-width='2' stroke-linecap='round'/%3E%3Cline x1='25' y1='40' x2='32' y2='38' stroke='currentColor' stroke-width='2' stroke-linecap='round'/%3E%3Cline x1='60' y1='50' x2='65' y2='56' stroke='currentColor' stroke-width='2' stroke-linecap='round'/%3E%3Cline x1='15' y1='65' x2='22' y2='70' stroke='currentColor' stroke-width='2' stroke-linecap='round'/%3E%3Cline x1='45' y1='72' x2='50' y2='66' stroke='currentColor' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: 80px 80px;
  background-repeat: repeat;
}

/* Polka - Large Polka Dots */
[data-bg-pattern=polka] .bg-layers__pattern {
  background-image: radial-gradient(circle, currentColor 8px, transparent 8px), radial-gradient(circle, currentColor 8px, transparent 8px);
  background-size: 60px 60px;
  background-position: 0 0, 30px 30px;
}

/* Arrows - Directional Arrow Grid */
[data-bg-pattern=arrows] .bg-layers__pattern {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 5 L30 20 L25 20 L25 35 L15 35 L15 20 L10 20 Z' fill='currentColor'/%3E%3C/svg%3E");
  background-size: 40px 40px;
  background-repeat: repeat;
}

/* Hearts - Heart Pattern */
[data-bg-pattern=hearts] .bg-layers__pattern {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Cpath d='M25 40 C10 28 5 20 5 14 C5 8 10 4 16 4 C20 4 23 6 25 10 C27 6 30 4 34 4 C40 4 45 8 45 14 C45 20 40 28 25 40' fill='currentColor'/%3E%3C/svg%3E");
  background-size: 50px 50px;
  background-repeat: repeat;
}

/* ==========================================================================
   ARCHITECTURAL - Building and Structure Patterns
   ========================================================================== */
/* Herringbone - Herringbone Flooring Pattern */
[data-bg-pattern=herringbone] .bg-layers__pattern {
  background-image: linear-gradient(90deg, currentColor 25%, transparent 25%), linear-gradient(225deg, currentColor 25%, transparent 25%), linear-gradient(315deg, currentColor 25%, transparent 25%), linear-gradient(45deg, currentColor 25%, transparent 25%);
  background-size: 20px 10px;
  background-position: 0 0, 10px 0, 10px -5px, 0 5px;
}

/* Parquet - Parquet Wood Pattern */
[data-bg-pattern=parquet] .bg-layers__pattern {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Crect x='0' y='0' width='20' height='10' fill='none' stroke='currentColor' stroke-width='1'/%3E%3Crect x='0' y='10' width='20' height='10' fill='none' stroke='currentColor' stroke-width='1'/%3E%3Crect x='20' y='0' width='10' height='20' fill='none' stroke='currentColor' stroke-width='1'/%3E%3Crect x='30' y='0' width='10' height='20' fill='none' stroke='currentColor' stroke-width='1'/%3E%3Crect x='0' y='20' width='10' height='20' fill='none' stroke='currentColor' stroke-width='1'/%3E%3Crect x='10' y='20' width='10' height='20' fill='none' stroke='currentColor' stroke-width='1'/%3E%3Crect x='20' y='20' width='20' height='10' fill='none' stroke='currentColor' stroke-width='1'/%3E%3Crect x='20' y='30' width='20' height='10' fill='none' stroke='currentColor' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 40px 40px;
  background-repeat: repeat;
}

/* Tiles - Offset Tile Pattern */
[data-bg-pattern=tiles] .bg-layers__pattern {
  background-image: linear-gradient(0deg, currentColor 1px, transparent 1px), linear-gradient(90deg, currentColor 1px, transparent 1px), linear-gradient(0deg, currentColor 1px, transparent 1px);
  background-size: 40px 20px, 40px 20px, 40px 20px;
  background-position: 0 0, 0 0, 20px 10px;
}

/* Mosaic - Small Mosaic Squares */
[data-bg-pattern=mosaic] .bg-layers__pattern {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='1' y='1' width='8' height='8' fill='currentColor' opacity='0.6'/%3E%3Crect x='11' y='1' width='8' height='8' fill='currentColor' opacity='0.3'/%3E%3Crect x='1' y='11' width='8' height='8' fill='currentColor' opacity='0.4'/%3E%3Crect x='11' y='11' width='8' height='8' fill='currentColor' opacity='0.5'/%3E%3C/svg%3E");
  background-size: 20px 20px;
  background-repeat: repeat;
}

/* ==========================================================================
   ABSTRACT - Abstract Art Patterns
   ========================================================================== */
/* Memphis - Memphis Design Shapes */
[data-bg-pattern=memphis] .bg-layers__pattern {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='20' cy='20' r='5' fill='none' stroke='currentColor' stroke-width='2'/%3E%3Crect x='60' y='10' width='15' height='15' fill='currentColor' opacity='0.5'/%3E%3Cpath d='M10 60 L25 75 L10 90 Z' fill='none' stroke='currentColor' stroke-width='2'/%3E%3Cline x1='50' y1='50' x2='70' y2='70' stroke='currentColor' stroke-width='2'/%3E%3Ccircle cx='80' cy='80' r='8' fill='currentColor' opacity='0.3'/%3E%3C/svg%3E");
  background-size: 100px 100px;
  background-repeat: repeat;
}

/* Blob - Organic Blob Shapes */
[data-bg-pattern=blob] .bg-layers__pattern {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 20 Q70 20 75 40 Q80 60 60 70 Q40 80 30 60 Q20 40 50 20' fill='currentColor' opacity='0.3'/%3E%3C/svg%3E");
  background-size: 80px 80px;
  background-repeat: repeat;
}

/* Squiggle - Wavy Squiggle Lines */
[data-bg-pattern=squiggle] .bg-layers__pattern {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3Cpath d='M0 15 Q15 0 30 15 Q45 30 60 15' fill='none' stroke='currentColor' stroke-width='2'/%3E%3C/svg%3E");
  background-size: 60px 30px;
  background-repeat: repeat;
}

/* Scatter - Random Scattered Dots */
[data-bg-pattern=scatter] .bg-layers__pattern {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Ccircle cx='10' cy='25' r='2' fill='currentColor'/%3E%3Ccircle cx='35' cy='10' r='3' fill='currentColor'/%3E%3Ccircle cx='60' cy='30' r='2' fill='currentColor'/%3E%3Ccircle cx='25' cy='55' r='2' fill='currentColor'/%3E%3Ccircle cx='50' cy='65' r='3' fill='currentColor'/%3E%3Ccircle cx='70' cy='50' r='2' fill='currentColor'/%3E%3Ccircle cx='15' cy='70' r='2' fill='currentColor'/%3E%3C/svg%3E");
  background-size: 80px 80px;
  background-repeat: repeat;
}

/* Swirl - Spiral Swirl Pattern */
[data-bg-pattern=swirl] .bg-layers__pattern {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 50 Q60 40 55 30 Q50 20 40 25 Q30 30 35 40 Q40 50 50 45 Q60 40 65 50 Q70 60 60 65 Q50 70 45 60 Q40 50 50 50' fill='none' stroke='currentColor' stroke-width='1.5'/%3E%3C/svg%3E");
  background-size: 80px 80px;
  background-repeat: repeat;
}

/* Splatter - Paint Splatter Effect */
[data-bg-pattern=splatter] .bg-layers__pattern {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='30' cy='30' r='8' fill='currentColor' opacity='0.4'/%3E%3Ccircle cx='25' cy='20' r='3' fill='currentColor' opacity='0.5'/%3E%3Ccircle cx='40' cy='35' r='2' fill='currentColor' opacity='0.6'/%3E%3Ccircle cx='70' cy='60' r='10' fill='currentColor' opacity='0.3'/%3E%3Ccircle cx='80' cy='55' r='4' fill='currentColor' opacity='0.5'/%3E%3Ccircle cx='65' cy='70' r='3' fill='currentColor' opacity='0.4'/%3E%3Ccircle cx='50' cy='80' r='5' fill='currentColor' opacity='0.35'/%3E%3Ccircle cx='20' cy='70' r='6' fill='currentColor' opacity='0.3'/%3E%3C/svg%3E");
  background-size: 100px 100px;
  background-repeat: repeat;
}

/* Ink - Ink Blot/Watercolor Spread */
[data-bg-pattern=ink] .bg-layers__pattern {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M30 50 Q20 40 25 25 Q35 15 50 20 Q65 25 70 40 Q75 55 65 65 Q55 75 40 70 Q25 65 30 50' fill='currentColor' opacity='0.25'/%3E%3Cpath d='M60 30 Q55 25 60 20 Q70 20 70 30 Q70 40 60 35 Q55 35 60 30' fill='currentColor' opacity='0.2'/%3E%3C/svg%3E");
  background-size: 100px 100px;
  background-repeat: repeat;
}

/* Lava - Lava Lamp Fluid Shapes */
[data-bg-pattern=lava] .bg-layers__pattern {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cellipse cx='30' cy='30' rx='15' ry='20' fill='currentColor' opacity='0.25'/%3E%3Cellipse cx='70' cy='70' rx='18' ry='22' fill='currentColor' opacity='0.2'/%3E%3Cellipse cx='60' cy='25' rx='10' ry='12' fill='currentColor' opacity='0.3'/%3E%3Cellipse cx='25' cy='75' rx='12' ry='15' fill='currentColor' opacity='0.25'/%3E%3C/svg%3E");
  background-size: 100px 100px;
  background-repeat: repeat;
}

/* Kaleidoscope - Kaleidoscope Geometric Pattern */
[data-bg-pattern=kaleidoscope] .bg-layers__pattern {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 10 L90 50 L50 90 L10 50 Z' fill='none' stroke='currentColor' stroke-width='1'/%3E%3Cpath d='M50 25 L75 50 L50 75 L25 50 Z' fill='none' stroke='currentColor' stroke-width='1'/%3E%3Cpath d='M50 40 L60 50 L50 60 L40 50 Z' fill='currentColor' opacity='0.3'/%3E%3Cline x1='50' y1='10' x2='50' y2='90' stroke='currentColor' stroke-width='0.5'/%3E%3Cline x1='10' y1='50' x2='90' y2='50' stroke='currentColor' stroke-width='0.5'/%3E%3C/svg%3E");
  background-size: 60px 60px;
  background-repeat: repeat;
}

/* Prism - Prismatic Light Refraction */
[data-bg-pattern=prism] .bg-layers__pattern {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 10 L90 90 L10 90 Z' fill='none' stroke='currentColor' stroke-width='1'/%3E%3Cline x1='50' y1='10' x2='20' y2='90' stroke='currentColor' stroke-width='0.5' opacity='0.5'/%3E%3Cline x1='50' y1='10' x2='40' y2='90' stroke='currentColor' stroke-width='0.5' opacity='0.5'/%3E%3Cline x1='50' y1='10' x2='60' y2='90' stroke='currentColor' stroke-width='0.5' opacity='0.5'/%3E%3Cline x1='50' y1='10' x2='80' y2='90' stroke='currentColor' stroke-width='0.5' opacity='0.5'/%3E%3C/svg%3E");
  background-size: 80px 80px;
  background-repeat: repeat;
}

/* Shatter - Shattered Glass Fragments */
[data-bg-pattern=shatter] .bg-layers__pattern {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M0 0 L35 15 L20 40 L0 30 Z' fill='none' stroke='currentColor' stroke-width='1'/%3E%3Cpath d='M35 15 L60 0 L70 25 L50 35 L20 40 Z' fill='none' stroke='currentColor' stroke-width='1'/%3E%3Cpath d='M70 25 L100 20 L100 50 L80 55 L50 35 Z' fill='none' stroke='currentColor' stroke-width='1'/%3E%3Cpath d='M20 40 L50 35 L55 70 L25 65 L0 55 Z' fill='none' stroke='currentColor' stroke-width='1'/%3E%3Cpath d='M50 35 L80 55 L75 85 L55 70 Z' fill='none' stroke='currentColor' stroke-width='1'/%3E%3Cpath d='M0 55 L25 65 L30 100 L0 100 Z' fill='none' stroke='currentColor' stroke-width='1'/%3E%3Cpath d='M25 65 L55 70 L60 100 L30 100 Z' fill='none' stroke='currentColor' stroke-width='1'/%3E%3Cpath d='M55 70 L75 85 L80 100 L60 100 Z' fill='none' stroke='currentColor' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 80px 80px;
  background-repeat: repeat;
}

/* Origami - Paper Fold Creases */
[data-bg-pattern=origami] .bg-layers__pattern {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M0 0 L50 50 L0 100' fill='none' stroke='currentColor' stroke-width='1'/%3E%3Cpath d='M100 0 L50 50 L100 100' fill='none' stroke='currentColor' stroke-width='1'/%3E%3Cpath d='M0 50 L50 50 L100 50' fill='none' stroke='currentColor' stroke-width='0.5' opacity='0.5'/%3E%3Cpath d='M50 0 L50 50 L50 100' fill='none' stroke='currentColor' stroke-width='0.5' opacity='0.5'/%3E%3Cpath d='M25 25 L50 50 L75 25' fill='none' stroke='currentColor' stroke-width='0.5' opacity='0.3'/%3E%3Cpath d='M25 75 L50 50 L75 75' fill='none' stroke='currentColor' stroke-width='0.5' opacity='0.3'/%3E%3C/svg%3E");
  background-size: 60px 60px;
  background-repeat: repeat;
}

/* ==========================================================================
   ARTISTIC - Hand-drawn and Artistic Patterns
   ========================================================================== */
/* Doodle - Hand-drawn Doodle Lines */
[data-bg-pattern=doodle] .bg-layers__pattern {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M10 20 Q20 15 30 20 Q40 25 50 20 Q60 15 70 20' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M20 50 Q30 45 40 55 Q50 65 60 50' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M30 80 Q40 75 50 85 Q60 90 70 80' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round'/%3E%3Ccircle cx='80' cy='30' r='5' fill='none' stroke='currentColor' stroke-width='1.5'/%3E%3Ccircle cx='15' cy='70' r='4' fill='none' stroke='currentColor' stroke-width='1.5'/%3E%3C/svg%3E");
  background-size: 100px 100px;
  background-repeat: repeat;
}

/* Brush - Brush Stroke Marks */
[data-bg-pattern=brush] .bg-layers__pattern {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60'%3E%3Cpath d='M5 30 Q15 25 30 28 Q50 32 70 27 Q85 24 95 30' fill='none' stroke='currentColor' stroke-width='4' stroke-linecap='round' opacity='0.4'/%3E%3Cpath d='M10 45 Q25 42 40 46 Q55 50 70 44 Q85 40 95 45' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' opacity='0.3'/%3E%3Cpath d='M5 15 Q20 12 35 16 Q50 20 65 14 Q80 10 95 15' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' opacity='0.35'/%3E%3C/svg%3E");
  background-size: 100px 60px;
  background-repeat: repeat;
}

/* Scribble - Scribble/Sketch Lines */
[data-bg-pattern=scribble] .bg-layers__pattern {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M10 20 C20 10 30 30 40 20 C50 10 60 30 70 20 C80 10 90 25 95 20' fill='none' stroke='currentColor' stroke-width='1' stroke-linecap='round'/%3E%3Cpath d='M5 50 C15 40 25 60 35 50 C45 40 55 60 65 50 C75 40 85 55 95 50' fill='none' stroke='currentColor' stroke-width='1' stroke-linecap='round'/%3E%3Cpath d='M10 80 C20 70 30 90 40 80 C50 70 60 90 70 80 C80 70 90 85 95 80' fill='none' stroke='currentColor' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: 100px 100px;
  background-repeat: repeat;
}

/* Crayon - Crayon Texture Marks */
[data-bg-pattern=crayon] .bg-layers__pattern {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Cline x1='5' y1='10' x2='25' y2='15' stroke='currentColor' stroke-width='3' stroke-linecap='round' opacity='0.4'/%3E%3Cline x1='40' y1='5' x2='60' y2='12' stroke='currentColor' stroke-width='4' stroke-linecap='round' opacity='0.35'/%3E%3Cline x1='10' y1='35' x2='35' y2='40' stroke='currentColor' stroke-width='3' stroke-linecap='round' opacity='0.4'/%3E%3Cline x1='50' y1='30' x2='75' y2='38' stroke='currentColor' stroke-width='4' stroke-linecap='round' opacity='0.3'/%3E%3Cline x1='15' y1='60' x2='40' y2='65' stroke='currentColor' stroke-width='3' stroke-linecap='round' opacity='0.35'/%3E%3Cline x1='55' y1='55' x2='75' y2='62' stroke='currentColor' stroke-width='4' stroke-linecap='round' opacity='0.4'/%3E%3C/svg%3E");
  background-size: 80px 80px;
  background-repeat: repeat;
}

/* ==========================================================================
   NATURE-INSPIRED - Nature and Weather Patterns
   ========================================================================== */
/* Aurora - Aurora Borealis Waves */
[data-bg-pattern=aurora] .bg-layers__pattern {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100'%3E%3Cpath d='M0 50 Q50 20 100 50 Q150 80 200 50' fill='none' stroke='currentColor' stroke-width='2' opacity='0.3'/%3E%3Cpath d='M0 40 Q50 10 100 40 Q150 70 200 40' fill='none' stroke='currentColor' stroke-width='1.5' opacity='0.25'/%3E%3Cpath d='M0 60 Q50 30 100 60 Q150 90 200 60' fill='none' stroke='currentColor' stroke-width='1.5' opacity='0.25'/%3E%3Cpath d='M0 30 Q50 5 100 30 Q150 55 200 30' fill='none' stroke='currentColor' stroke-width='1' opacity='0.2'/%3E%3Cpath d='M0 70 Q50 45 100 70 Q150 95 200 70' fill='none' stroke='currentColor' stroke-width='1' opacity='0.2'/%3E%3C/svg%3E");
  background-size: 200px 100px;
  background-repeat: repeat;
}

/* Smoke - Smoke Wisps */
[data-bg-pattern=smoke] .bg-layers__pattern {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M20 90 Q15 70 25 55 Q35 40 30 25 Q25 10 35 5' fill='none' stroke='currentColor' stroke-width='2' opacity='0.25' stroke-linecap='round'/%3E%3Cpath d='M50 95 Q55 75 45 60 Q35 45 45 30 Q55 15 50 0' fill='none' stroke='currentColor' stroke-width='2' opacity='0.3' stroke-linecap='round'/%3E%3Cpath d='M75 90 Q80 70 70 55 Q60 40 70 25 Q80 10 70 0' fill='none' stroke='currentColor' stroke-width='2' opacity='0.25' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: 100px 100px;
  background-repeat: repeat;
}

/* Vapor - Vapor/Mist Trails */
[data-bg-pattern=vapor] .bg-layers__pattern {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 80'%3E%3Cpath d='M0 40 Q30 30 60 40 Q90 50 120 40 Q150 30 180 40' fill='none' stroke='currentColor' stroke-width='1' opacity='0.3'/%3E%3Cpath d='M-20 25 Q10 15 40 25 Q70 35 100 25 Q130 15 160 25' fill='none' stroke='currentColor' stroke-width='0.75' opacity='0.25'/%3E%3Cpath d='M-10 55 Q20 45 50 55 Q80 65 110 55 Q140 45 170 55' fill='none' stroke='currentColor' stroke-width='0.75' opacity='0.25'/%3E%3Cpath d='M0 70 Q30 60 60 70 Q90 80 120 70' fill='none' stroke='currentColor' stroke-width='0.5' opacity='0.2'/%3E%3Cpath d='M0 10 Q30 0 60 10 Q90 20 120 10' fill='none' stroke='currentColor' stroke-width='0.5' opacity='0.2'/%3E%3C/svg%3E");
  background-size: 150px 80px;
  background-repeat: repeat;
}

/* Frost - Frost Crystal Patterns */
[data-bg-pattern=frost] .bg-layers__pattern {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Cg transform='translate(40,40)'%3E%3Cline x1='0' y1='-20' x2='0' y2='20' stroke='currentColor' stroke-width='1'/%3E%3Cline x1='-17' y1='-10' x2='17' y2='10' stroke='currentColor' stroke-width='1'/%3E%3Cline x1='-17' y1='10' x2='17' y2='-10' stroke='currentColor' stroke-width='1'/%3E%3Cline x1='0' y1='-15' x2='-5' y2='-20' stroke='currentColor' stroke-width='0.75'/%3E%3Cline x1='0' y1='-15' x2='5' y2='-20' stroke='currentColor' stroke-width='0.75'/%3E%3Cline x1='0' y1='15' x2='-5' y2='20' stroke='currentColor' stroke-width='0.75'/%3E%3Cline x1='0' y1='15' x2='5' y2='20' stroke='currentColor' stroke-width='0.75'/%3E%3Cline x1='-12' y1='-7' x2='-17' y2='-3' stroke='currentColor' stroke-width='0.75'/%3E%3Cline x1='12' y1='7' x2='17' y2='3' stroke='currentColor' stroke-width='0.75'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 80px 80px;
  background-repeat: repeat;
}

/* ==========================================================================
   RETRO/VINTAGE - Retro and Vintage Patterns
   ========================================================================== */
/* Halftone - Print Halftone Dots */
[data-bg-pattern=halftone] .bg-layers__pattern {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='10' cy='10' r='3' fill='currentColor'/%3E%3Ccircle cx='30' cy='10' r='4' fill='currentColor'/%3E%3Ccircle cx='10' cy='30' r='4' fill='currentColor'/%3E%3Ccircle cx='30' cy='30' r='3' fill='currentColor'/%3E%3Ccircle cx='20' cy='20' r='5' fill='currentColor'/%3E%3C/svg%3E");
  background-size: 40px 40px;
  background-repeat: repeat;
}

/* Filmgrain - Film Grain Texture */
[data-bg-pattern=filmgrain] .bg-layers__pattern {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='fg'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23fg)'/%3E%3C/svg%3E");
  background-size: 100px 100px;
  background-repeat: repeat;
}

/* VHS - VHS Tracking Lines */
[data-bg-pattern=vhs] .bg-layers__pattern {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 30'%3E%3Crect x='0' y='0' width='100' height='2' fill='currentColor' opacity='0.3'/%3E%3Crect x='0' y='8' width='100' height='1' fill='currentColor' opacity='0.2'/%3E%3Crect x='0' y='14' width='100' height='3' fill='currentColor' opacity='0.4'/%3E%3Crect x='0' y='22' width='100' height='1' fill='currentColor' opacity='0.2'/%3E%3Crect x='0' y='28' width='100' height='2' fill='currentColor' opacity='0.3'/%3E%3C/svg%3E");
  background-size: 100px 30px;
  background-repeat: repeat;
}

/* Vinyl - Vinyl Record Grooves */
[data-bg-pattern=vinyl] .bg-layers__pattern {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='10' fill='none' stroke='currentColor' stroke-width='0.5'/%3E%3Ccircle cx='50' cy='50' r='18' fill='none' stroke='currentColor' stroke-width='0.5'/%3E%3Ccircle cx='50' cy='50' r='26' fill='none' stroke='currentColor' stroke-width='0.5'/%3E%3Ccircle cx='50' cy='50' r='34' fill='none' stroke='currentColor' stroke-width='0.5'/%3E%3Ccircle cx='50' cy='50' r='42' fill='none' stroke='currentColor' stroke-width='0.5'/%3E%3Ccircle cx='50' cy='50' r='50' fill='none' stroke='currentColor' stroke-width='0.5'/%3E%3C/svg%3E");
  background-size: 100px 100px;
  background-repeat: repeat;
}

/* Cassette - Cassette Tape Lines */
[data-bg-pattern=cassette] .bg-layers__pattern {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 20'%3E%3Cline x1='0' y1='5' x2='60' y2='5' stroke='currentColor' stroke-width='1' opacity='0.4'/%3E%3Cline x1='0' y1='10' x2='60' y2='10' stroke='currentColor' stroke-width='2' opacity='0.3'/%3E%3Cline x1='0' y1='15' x2='60' y2='15' stroke='currentColor' stroke-width='1' opacity='0.4'/%3E%3Ccircle cx='10' cy='10' r='3' fill='none' stroke='currentColor' stroke-width='0.5' opacity='0.5'/%3E%3Ccircle cx='50' cy='10' r='3' fill='none' stroke='currentColor' stroke-width='0.5' opacity='0.5'/%3E%3C/svg%3E");
  background-size: 60px 20px;
  background-repeat: repeat;
}

/* ==========================================================================
   TEXTILE - Fabric and Textile Patterns
   ========================================================================== */
/* Knit - Knitted Fabric Pattern */
[data-bg-pattern=knit] .bg-layers__pattern {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 30'%3E%3Cpath d='M5 0 Q10 8 5 15 Q0 22 5 30' fill='none' stroke='currentColor' stroke-width='1.5'/%3E%3Cpath d='M15 0 Q20 8 15 15 Q10 22 15 30' fill='none' stroke='currentColor' stroke-width='1.5'/%3E%3C/svg%3E");
  background-size: 20px 30px;
  background-repeat: repeat;
}

/* Woven - Woven Basket Pattern */
[data-bg-pattern=woven] .bg-layers__pattern {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Crect x='0' y='0' width='20' height='10' fill='currentColor' opacity='0.3'/%3E%3Crect x='20' y='10' width='20' height='10' fill='currentColor' opacity='0.3'/%3E%3Crect x='0' y='20' width='20' height='10' fill='currentColor' opacity='0.3'/%3E%3Crect x='20' y='30' width='20' height='10' fill='currentColor' opacity='0.3'/%3E%3Crect x='0' y='10' width='10' height='20' fill='currentColor' opacity='0.2'/%3E%3Crect x='30' y='0' width='10' height='20' fill='currentColor' opacity='0.2'/%3E%3Crect x='10' y='30' width='10' height='10' fill='currentColor' opacity='0.2'/%3E%3C/svg%3E");
  background-size: 40px 40px;
  background-repeat: repeat;
}

/* Linen - Linen Fabric Texture */
[data-bg-pattern=linen] .bg-layers__pattern {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cline x1='0' y1='5' x2='40' y2='5' stroke='currentColor' stroke-width='0.5' opacity='0.3'/%3E%3Cline x1='0' y1='15' x2='40' y2='15' stroke='currentColor' stroke-width='0.5' opacity='0.25'/%3E%3Cline x1='0' y1='25' x2='40' y2='25' stroke='currentColor' stroke-width='0.5' opacity='0.3'/%3E%3Cline x1='0' y1='35' x2='40' y2='35' stroke='currentColor' stroke-width='0.5' opacity='0.25'/%3E%3Cline x1='5' y1='0' x2='5' y2='40' stroke='currentColor' stroke-width='0.5' opacity='0.2'/%3E%3Cline x1='15' y1='0' x2='15' y2='40' stroke='currentColor' stroke-width='0.5' opacity='0.25'/%3E%3Cline x1='25' y1='0' x2='25' y2='40' stroke='currentColor' stroke-width='0.5' opacity='0.2'/%3E%3Cline x1='35' y1='0' x2='35' y2='40' stroke='currentColor' stroke-width='0.5' opacity='0.25'/%3E%3C/svg%3E");
  background-size: 40px 40px;
  background-repeat: repeat;
}

/* Denim - Denim Twill Pattern */
[data-bg-pattern=denim] .bg-layers__pattern {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M0 20 L20 0' stroke='currentColor' stroke-width='1' opacity='0.3'/%3E%3Cpath d='M-5 15 L15 -5' stroke='currentColor' stroke-width='1' opacity='0.2'/%3E%3Cpath d='M5 25 L25 5' stroke='currentColor' stroke-width='1' opacity='0.2'/%3E%3C/svg%3E");
  background-size: 20px 20px;
  background-repeat: repeat;
}

/* Canvas - Canvas Fabric Texture */
[data-bg-pattern=canvas] .bg-layers__pattern {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='0' y='0' width='8' height='8' fill='currentColor' opacity='0.15'/%3E%3Crect x='8' y='8' width='8' height='8' fill='currentColor' opacity='0.15'/%3E%3Crect x='8' y='0' width='8' height='8' fill='currentColor' opacity='0.1'/%3E%3Crect x='0' y='8' width='8' height='8' fill='currentColor' opacity='0.1'/%3E%3C/svg%3E");
  background-size: 16px 16px;
  background-repeat: repeat;
}

/* ==========================================================================
   SCIENTIFIC - Science and Biology Patterns
   ========================================================================== */
/* DNA - DNA Double Helix */
[data-bg-pattern=dna] .bg-layers__pattern {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 80'%3E%3Cpath d='M10 0 Q25 10 10 20 Q-5 30 10 40 Q25 50 10 60 Q-5 70 10 80' fill='none' stroke='currentColor' stroke-width='1.5'/%3E%3Cpath d='M30 0 Q15 10 30 20 Q45 30 30 40 Q15 50 30 60 Q45 70 30 80' fill='none' stroke='currentColor' stroke-width='1.5'/%3E%3Cline x1='10' y1='10' x2='30' y2='10' stroke='currentColor' stroke-width='1' opacity='0.5'/%3E%3Cline x1='10' y1='30' x2='30' y2='30' stroke='currentColor' stroke-width='1' opacity='0.5'/%3E%3Cline x1='10' y1='50' x2='30' y2='50' stroke='currentColor' stroke-width='1' opacity='0.5'/%3E%3Cline x1='10' y1='70' x2='30' y2='70' stroke='currentColor' stroke-width='1' opacity='0.5'/%3E%3C/svg%3E");
  background-size: 40px 80px;
  background-repeat: repeat;
}

/* Molecules - Molecular Structure */
[data-bg-pattern=molecules] .bg-layers__pattern {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Ccircle cx='20' cy='20' r='6' fill='currentColor' opacity='0.4'/%3E%3Ccircle cx='60' cy='20' r='4' fill='currentColor' opacity='0.3'/%3E%3Ccircle cx='40' cy='50' r='5' fill='currentColor' opacity='0.35'/%3E%3Ccircle cx='70' cy='60' r='4' fill='currentColor' opacity='0.3'/%3E%3Ccircle cx='15' cy='65' r='5' fill='currentColor' opacity='0.35'/%3E%3Cline x1='20' y1='20' x2='40' y2='50' stroke='currentColor' stroke-width='1' opacity='0.3'/%3E%3Cline x1='60' y1='20' x2='40' y2='50' stroke='currentColor' stroke-width='1' opacity='0.3'/%3E%3Cline x1='40' y1='50' x2='70' y2='60' stroke='currentColor' stroke-width='1' opacity='0.3'/%3E%3Cline x1='40' y1='50' x2='15' y2='65' stroke='currentColor' stroke-width='1' opacity='0.3'/%3E%3C/svg%3E");
  background-size: 80px 80px;
  background-repeat: repeat;
}

/* Atoms - Atomic Orbital Pattern */
[data-bg-pattern=atoms] .bg-layers__pattern {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Ccircle cx='40' cy='40' r='4' fill='currentColor' opacity='0.5'/%3E%3Cellipse cx='40' cy='40' rx='25' ry='10' fill='none' stroke='currentColor' stroke-width='1' opacity='0.3'/%3E%3Cellipse cx='40' cy='40' rx='25' ry='10' fill='none' stroke='currentColor' stroke-width='1' opacity='0.3' transform='rotate(60 40 40)'/%3E%3Cellipse cx='40' cy='40' rx='25' ry='10' fill='none' stroke='currentColor' stroke-width='1' opacity='0.3' transform='rotate(120 40 40)'/%3E%3C/svg%3E");
  background-size: 80px 80px;
  background-repeat: repeat;
}

/* Cells - Biological Cells */
[data-bg-pattern=cells] .bg-layers__pattern {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='25' cy='25' r='18' fill='none' stroke='currentColor' stroke-width='1' opacity='0.3'/%3E%3Ccircle cx='25' cy='25' r='5' fill='currentColor' opacity='0.2'/%3E%3Ccircle cx='70' cy='30' r='22' fill='none' stroke='currentColor' stroke-width='1' opacity='0.3'/%3E%3Ccircle cx='70' cy='30' r='6' fill='currentColor' opacity='0.2'/%3E%3Ccircle cx='35' cy='70' r='20' fill='none' stroke='currentColor' stroke-width='1' opacity='0.3'/%3E%3Ccircle cx='35' cy='70' r='5' fill='currentColor' opacity='0.2'/%3E%3Ccircle cx='80' cy='75' r='15' fill='none' stroke='currentColor' stroke-width='1' opacity='0.3'/%3E%3Ccircle cx='80' cy='75' r='4' fill='currentColor' opacity='0.2'/%3E%3C/svg%3E");
  background-size: 100px 100px;
  background-repeat: repeat;
}

/* Neurons - Neural Network Pattern */
[data-bg-pattern=neurons] .bg-layers__pattern {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='30' cy='30' r='8' fill='currentColor' opacity='0.3'/%3E%3Ccircle cx='70' cy='25' r='6' fill='currentColor' opacity='0.25'/%3E%3Ccircle cx='50' cy='60' r='7' fill='currentColor' opacity='0.3'/%3E%3Ccircle cx='20' cy='75' r='5' fill='currentColor' opacity='0.25'/%3E%3Ccircle cx='80' cy='70' r='6' fill='currentColor' opacity='0.3'/%3E%3Cpath d='M30 30 Q50 20 70 25' fill='none' stroke='currentColor' stroke-width='1' opacity='0.2'/%3E%3Cpath d='M30 30 Q40 50 50 60' fill='none' stroke='currentColor' stroke-width='1' opacity='0.2'/%3E%3Cpath d='M70 25 Q60 40 50 60' fill='none' stroke='currentColor' stroke-width='1' opacity='0.2'/%3E%3Cpath d='M50 60 Q35 70 20 75' fill='none' stroke='currentColor' stroke-width='1' opacity='0.2'/%3E%3Cpath d='M50 60 Q65 65 80 70' fill='none' stroke='currentColor' stroke-width='1' opacity='0.2'/%3E%3C/svg%3E");
  background-size: 100px 100px;
  background-repeat: repeat;
}

/* ==========================================================================
   COSMIC - Space and Cosmic Patterns
   ========================================================================== */
/* Constellation - Star Constellation Pattern */
[data-bg-pattern=constellation] .bg-layers__pattern {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='20' cy='20' r='2' fill='currentColor'/%3E%3Ccircle cx='50' cy='15' r='1.5' fill='currentColor'/%3E%3Ccircle cx='80' cy='25' r='2' fill='currentColor'/%3E%3Ccircle cx='35' cy='50' r='1.5' fill='currentColor'/%3E%3Ccircle cx='70' cy='55' r='2' fill='currentColor'/%3E%3Ccircle cx='25' cy='80' r='1.5' fill='currentColor'/%3E%3Ccircle cx='60' cy='85' r='2' fill='currentColor'/%3E%3Cline x1='20' y1='20' x2='50' y2='15' stroke='currentColor' stroke-width='0.5' opacity='0.4'/%3E%3Cline x1='50' y1='15' x2='80' y2='25' stroke='currentColor' stroke-width='0.5' opacity='0.4'/%3E%3Cline x1='20' y1='20' x2='35' y2='50' stroke='currentColor' stroke-width='0.5' opacity='0.4'/%3E%3Cline x1='35' y1='50' x2='70' y2='55' stroke='currentColor' stroke-width='0.5' opacity='0.4'/%3E%3Cline x1='35' y1='50' x2='25' y2='80' stroke='currentColor' stroke-width='0.5' opacity='0.4'/%3E%3Cline x1='70' y1='55' x2='60' y2='85' stroke='currentColor' stroke-width='0.5' opacity='0.4'/%3E%3C/svg%3E");
  background-size: 100px 100px;
  background-repeat: repeat;
}

/* Nebula - Nebula Cloud Effect */
[data-bg-pattern=nebula] .bg-layers__pattern {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='neb'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.02' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23neb)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  background-repeat: repeat;
}

/* Meteor - Meteor Shower Lines */
[data-bg-pattern=meteor] .bg-layers__pattern {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cline x1='10' y1='10' x2='25' y2='30' stroke='currentColor' stroke-width='2' stroke-linecap='round' opacity='0.4'/%3E%3Cline x1='50' y1='5' x2='60' y2='20' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' opacity='0.3'/%3E%3Cline x1='80' y1='15' x2='90' y2='30' stroke='currentColor' stroke-width='1' stroke-linecap='round' opacity='0.35'/%3E%3Cline x1='30' y1='50' x2='45' y2='70' stroke='currentColor' stroke-width='2' stroke-linecap='round' opacity='0.4'/%3E%3Cline x1='70' y1='45' x2='80' y2='60' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' opacity='0.3'/%3E%3Cline x1='15' y1='75' x2='25' y2='90' stroke='currentColor' stroke-width='1' stroke-linecap='round' opacity='0.35'/%3E%3C/svg%3E");
  background-size: 100px 100px;
  background-repeat: repeat;
}

/* Orbit - Planetary Orbit Rings */
[data-bg-pattern=orbit] .bg-layers__pattern {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='5' fill='currentColor' opacity='0.4'/%3E%3Cellipse cx='50' cy='50' rx='20' ry='8' fill='none' stroke='currentColor' stroke-width='0.75' opacity='0.3' transform='rotate(-20 50 50)'/%3E%3Cellipse cx='50' cy='50' rx='35' ry='14' fill='none' stroke='currentColor' stroke-width='0.75' opacity='0.25' transform='rotate(-20 50 50)'/%3E%3Ccircle cx='70' cy='45' r='2' fill='currentColor' opacity='0.5'/%3E%3Ccircle cx='25' cy='58' r='1.5' fill='currentColor' opacity='0.4'/%3E%3C/svg%3E");
  background-size: 100px 100px;
  background-repeat: repeat;
}

/* Stardust - Scattered Stardust */
[data-bg-pattern=stardust] .bg-layers__pattern {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Ccircle cx='10' cy='15' r='1' fill='currentColor' opacity='0.6'/%3E%3Ccircle cx='25' cy='8' r='0.5' fill='currentColor' opacity='0.4'/%3E%3Ccircle cx='40' cy='20' r='1.5' fill='currentColor' opacity='0.5'/%3E%3Ccircle cx='55' cy='5' r='0.75' fill='currentColor' opacity='0.45'/%3E%3Ccircle cx='70' cy='18' r='1' fill='currentColor' opacity='0.55'/%3E%3Ccircle cx='15' cy='40' r='0.75' fill='currentColor' opacity='0.5'/%3E%3Ccircle cx='35' cy='45' r='1' fill='currentColor' opacity='0.6'/%3E%3Ccircle cx='60' cy='38' r='0.5' fill='currentColor' opacity='0.4'/%3E%3Ccircle cx='75' cy='50' r='1' fill='currentColor' opacity='0.5'/%3E%3Ccircle cx='8' cy='65' r='1' fill='currentColor' opacity='0.55'/%3E%3Ccircle cx='30' cy='70' r='0.75' fill='currentColor' opacity='0.45'/%3E%3Ccircle cx='50' cy='60' r='1.5' fill='currentColor' opacity='0.5'/%3E%3Ccircle cx='68' cy='72' r='0.5' fill='currentColor' opacity='0.4'/%3E%3C/svg%3E");
  background-size: 80px 80px;
  background-repeat: repeat;
}

/* ==========================================================================
   WEATHER - Weather-related Patterns
   ========================================================================== */
/* Rain - Rainfall Lines */
[data-bg-pattern=rain] .bg-layers__pattern {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 80'%3E%3Cline x1='10' y1='0' x2='10' y2='20' stroke='currentColor' stroke-width='1' stroke-linecap='round' opacity='0.4'/%3E%3Cline x1='25' y1='15' x2='25' y2='40' stroke='currentColor' stroke-width='1' stroke-linecap='round' opacity='0.3'/%3E%3Cline x1='40' y1='5' x2='40' y2='25' stroke='currentColor' stroke-width='1' stroke-linecap='round' opacity='0.35'/%3E%3Cline x1='15' y1='45' x2='15' y2='70' stroke='currentColor' stroke-width='1' stroke-linecap='round' opacity='0.3'/%3E%3Cline x1='35' y1='55' x2='35' y2='80' stroke='currentColor' stroke-width='1' stroke-linecap='round' opacity='0.4'/%3E%3C/svg%3E");
  background-size: 50px 80px;
  background-repeat: repeat;
}

/* Snow - Snowflake Pattern */
[data-bg-pattern=snow] .bg-layers__pattern {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cg transform='translate(20,20)'%3E%3Cline x1='0' y1='-8' x2='0' y2='8' stroke='currentColor' stroke-width='1'/%3E%3Cline x1='-7' y1='-4' x2='7' y2='4' stroke='currentColor' stroke-width='1'/%3E%3Cline x1='-7' y1='4' x2='7' y2='-4' stroke='currentColor' stroke-width='1'/%3E%3C/g%3E%3Cg transform='translate(45,45)'%3E%3Cline x1='0' y1='-6' x2='0' y2='6' stroke='currentColor' stroke-width='0.75'/%3E%3Cline x1='-5' y1='-3' x2='5' y2='3' stroke='currentColor' stroke-width='0.75'/%3E%3Cline x1='-5' y1='3' x2='5' y2='-3' stroke='currentColor' stroke-width='0.75'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 60px 60px;
  background-repeat: repeat;
}

/* Lightning - Lightning Bolt Pattern */
[data-bg-pattern=lightning] .bg-layers__pattern {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 100'%3E%3Cpath d='M40 5 L25 40 L35 40 L20 70 L55 35 L42 35 L55 5 Z' fill='none' stroke='currentColor' stroke-width='1.5' opacity='0.35'/%3E%3C/svg%3E");
  background-size: 80px 100px;
  background-repeat: repeat;
}

/* Wind - Wind Flow Lines */
[data-bg-pattern=wind] .bg-layers__pattern {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60'%3E%3Cpath d='M0 15 Q30 10 60 15 Q90 20 120 15' fill='none' stroke='currentColor' stroke-width='1' stroke-linecap='round' opacity='0.3'/%3E%3Cpath d='M0 30 Q40 25 80 30 Q100 35 120 30' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' opacity='0.35'/%3E%3Cpath d='M0 45 Q20 40 50 45 Q80 50 120 45' fill='none' stroke='currentColor' stroke-width='1' stroke-linecap='round' opacity='0.3'/%3E%3C/svg%3E");
  background-size: 120px 60px;
  background-repeat: repeat;
}

/* ==========================================================================
   AUDIO - Audio and Music Patterns
   ========================================================================== */
/* Waveform - Audio Waveform */
[data-bg-pattern=waveform] .bg-layers__pattern {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Crect x='5' y='12' width='3' height='16' fill='currentColor' opacity='0.3'/%3E%3Crect x='12' y='8' width='3' height='24' fill='currentColor' opacity='0.35'/%3E%3Crect x='19' y='5' width='3' height='30' fill='currentColor' opacity='0.4'/%3E%3Crect x='26' y='10' width='3' height='20' fill='currentColor' opacity='0.35'/%3E%3Crect x='33' y='14' width='3' height='12' fill='currentColor' opacity='0.3'/%3E%3Crect x='40' y='8' width='3' height='24' fill='currentColor' opacity='0.35'/%3E%3Crect x='47' y='3' width='3' height='34' fill='currentColor' opacity='0.4'/%3E%3Crect x='54' y='6' width='3' height='28' fill='currentColor' opacity='0.35'/%3E%3Crect x='61' y='11' width='3' height='18' fill='currentColor' opacity='0.3'/%3E%3Crect x='68' y='7' width='3' height='26' fill='currentColor' opacity='0.35'/%3E%3Crect x='75' y='4' width='3' height='32' fill='currentColor' opacity='0.4'/%3E%3Crect x='82' y='9' width='3' height='22' fill='currentColor' opacity='0.35'/%3E%3Crect x='89' y='13' width='3' height='14' fill='currentColor' opacity='0.3'/%3E%3C/svg%3E");
  background-size: 100px 40px;
  background-repeat: repeat;
}

/* Equalizer - Equalizer Bars */
[data-bg-pattern=equalizer] .bg-layers__pattern {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 50'%3E%3Crect x='5' y='30' width='6' height='15' fill='currentColor' opacity='0.3'/%3E%3Crect x='15' y='20' width='6' height='25' fill='currentColor' opacity='0.35'/%3E%3Crect x='25' y='10' width='6' height='35' fill='currentColor' opacity='0.4'/%3E%3Crect x='35' y='5' width='6' height='40' fill='currentColor' opacity='0.35'/%3E%3Crect x='45' y='15' width='6' height='30' fill='currentColor' opacity='0.3'/%3E%3C/svg%3E");
  background-size: 60px 50px;
  background-repeat: repeat;
}

/* Soundwave - Sine Wave Pattern */
[data-bg-pattern=soundwave] .bg-layers__pattern {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 30'%3E%3Cpath d='M0 15 Q12.5 5 25 15 Q37.5 25 50 15 Q62.5 5 75 15 Q87.5 25 100 15' fill='none' stroke='currentColor' stroke-width='1.5' opacity='0.35'/%3E%3C/svg%3E");
  background-size: 100px 30px;
  background-repeat: repeat;
}

/* ==========================================================================
   ANIMATED PATTERNS
   ========================================================================== */
@keyframes pattern-pulse {
  0%, 100% {
    opacity: var(--bg-pattern-opacity, 0.35);
  }
  50% {
    opacity: calc(var(--bg-pattern-opacity, 0.35) * 0.5);
  }
}
[data-bg-pattern=animated-dots] .bg-layers__pattern {
  background-image: radial-gradient(circle, currentColor 2px, transparent 2px);
  background-size: 20px 20px;
  animation: pattern-pulse 3s ease-in-out infinite;
}

@keyframes pattern-wave {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 100px 0;
  }
}
[data-bg-pattern=animated-waves] .bg-layers__pattern {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20'%3E%3Cpath d='M0 10 Q25 0 50 10 T100 10' fill='none' stroke='currentColor' stroke-width='1.5'/%3E%3C/svg%3E");
  background-size: 100px 20px;
  background-repeat: repeat;
  animation: pattern-wave 4s linear infinite;
}

@keyframes pattern-radiate {
  0% {
    transform: scale(1);
    opacity: var(--bg-pattern-opacity, 0.35);
  }
  50% {
    transform: scale(1.05);
    opacity: calc(var(--bg-pattern-opacity, 0.35) * 0.7);
  }
  100% {
    transform: scale(1);
    opacity: var(--bg-pattern-opacity, 0.35);
  }
}
[data-bg-pattern=animated-pulse] .bg-layers__pattern {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='10' fill='none' stroke='currentColor' stroke-width='1'/%3E%3Ccircle cx='50' cy='50' r='25' fill='none' stroke='currentColor' stroke-width='1'/%3E%3Ccircle cx='50' cy='50' r='40' fill='none' stroke='currentColor' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 100px 100px;
  background-repeat: repeat;
  animation: pattern-radiate 4s ease-in-out infinite;
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  [data-bg-pattern=animated-dots] .bg-layers__pattern,
  [data-bg-pattern=animated-waves] .bg-layers__pattern,
  [data-bg-pattern=animated-pulse] .bg-layers__pattern {
    animation: none;
  }
}
/* ==========================================================================
   PATTERN BLEND MODES
   ========================================================================== */
[data-bg-blend=multiply] .bg-layers__pattern {
  mix-blend-mode: multiply;
}

[data-bg-blend=overlay] .bg-layers__pattern {
  mix-blend-mode: overlay;
}

[data-bg-blend=screen] .bg-layers__pattern {
  mix-blend-mode: screen;
}

[data-bg-blend=soft-light] .bg-layers__pattern {
  mix-blend-mode: soft-light;
}

[data-bg-blend=hard-light] .bg-layers__pattern {
  mix-blend-mode: hard-light;
}

[data-bg-blend=difference] .bg-layers__pattern {
  mix-blend-mode: difference;
}

[data-bg-blend=color-dodge] .bg-layers__pattern {
  mix-blend-mode: color-dodge;
}

[data-bg-blend=color-burn] .bg-layers__pattern {
  mix-blend-mode: color-burn;
}

[data-bg-blend=luminosity] .bg-layers__pattern {
  mix-blend-mode: luminosity;
}

[data-bg-blend=exclusion] .bg-layers__pattern {
  mix-blend-mode: exclusion;
}

/* ==========================================================================
   BASE LAYER BLEND MODES (background-blend-mode)
   Blends image with background-color on the same element
   ========================================================================== */
[data-bg-base-blend=multiply] .bg-layers__base {
  background-blend-mode: multiply;
}

[data-bg-base-blend=screen] .bg-layers__base {
  background-blend-mode: screen;
}

[data-bg-base-blend=overlay] .bg-layers__base {
  background-blend-mode: overlay;
}

[data-bg-base-blend=soft-light] .bg-layers__base {
  background-blend-mode: soft-light;
}

[data-bg-base-blend=hard-light] .bg-layers__base {
  background-blend-mode: hard-light;
}

[data-bg-base-blend=difference] .bg-layers__base {
  background-blend-mode: difference;
}

[data-bg-base-blend=exclusion] .bg-layers__base {
  background-blend-mode: exclusion;
}

[data-bg-base-blend=color-dodge] .bg-layers__base {
  background-blend-mode: color-dodge;
}

[data-bg-base-blend=color-burn] .bg-layers__base {
  background-blend-mode: color-burn;
}

[data-bg-base-blend=luminosity] .bg-layers__base {
  background-blend-mode: luminosity;
}

[data-bg-base-blend=hue] .bg-layers__base {
  background-blend-mode: hue;
}

[data-bg-base-blend=saturation] .bg-layers__base {
  background-blend-mode: saturation;
}

[data-bg-base-blend=color] .bg-layers__base {
  background-blend-mode: color;
}

/**
 * Universal Background Overlays
 *
 * Color overlays for the overlay layer via data-bg-overlay attribute.
 * Provides contrast for text readability over images/patterns.
 * Combine with opacity modifiers for fine control.
 */
/* ==========================================================================
   Overlay Colors
   ========================================================================== */
/**
 * Dark Overlay - Black
 * Use over light images for white text
 */
[data-bg-overlay=dark] .bg-layers__overlay {
  background: black;
  opacity: var(--bg-overlay-opacity, 0.5);
}

/**
 * Light Overlay - White
 * Use over dark images for dark text
 */
[data-bg-overlay=light] .bg-layers__overlay {
  background: white;
  opacity: var(--bg-overlay-opacity, 0.5);
}

/**
 * Brand Overlay - Primary Brand Color
 * Use for branded tint over images
 */
[data-bg-overlay=brand] .bg-layers__overlay {
  background: oklch(var(--p));
  opacity: var(--bg-overlay-opacity, 0.5);
}

/**
 * Gradient Overlay - Dark gradient from bottom
 * Good for text at bottom of images
 */
[data-bg-overlay=gradient] .bg-layers__overlay {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 50%, transparent 100%);
  opacity: 1;
}

/* ==========================================================================
   Overlay Opacity Modifiers
   ========================================================================== */
[data-bg-overlay-opacity="40"] {
  --bg-overlay-opacity: 0.4;
}

[data-bg-overlay-opacity="50"] {
  --bg-overlay-opacity: 0.5;
}

[data-bg-overlay-opacity="60"] {
  --bg-overlay-opacity: 0.6;
}

[data-bg-overlay-opacity="70"] {
  --bg-overlay-opacity: 0.7;
}

[data-bg-overlay-opacity="80"] {
  --bg-overlay-opacity: 0.8;
}

/* ==========================================================================
   Text Color Overrides - Overlay Based
   ========================================================================== */
/**
 * Dark overlay needs light text
 */
[data-bg-overlay=dark],
[data-bg-overlay=gradient] {
  --text-heading: white;
  --text-body: rgba(255, 255, 255, 0.9);
  --text-muted: rgba(255, 255, 255, 0.7);
  --link-default: white;
  --link-hover: rgba(255, 255, 255, 0.8);
}

/**
 * Light overlay needs dark text
 */
[data-bg-overlay=light] {
  --text-heading: hsl(0, 0%, 10%);
  --text-body: hsl(0, 0%, 20%);
  --text-muted: hsl(0, 0%, 40%);
  --link-default: hsl(0, 0%, 10%);
  --link-hover: hsl(0, 0%, 30%);
}

/**
 * Brand overlay typically needs light text
 */
[data-bg-overlay=brand] {
  --text-heading: white;
  --text-body: rgba(255, 255, 255, 0.9);
  --text-muted: rgba(255, 255, 255, 0.7);
  --link-default: white;
  --link-hover: rgba(255, 255, 255, 0.8);
}

/* ==========================================================================
   Text Color Overrides - Base Background Based (no overlay needed)
   ========================================================================== */
/**
 * Dark bases need light text even without overlay
 */
[data-bg-base=gradient-brand],
[data-bg-base=gradient-brand-fade],
[data-bg-base=gradient-brand-to-dark],
[data-bg-base=gradient-brand-spotlight],
[data-bg-base=gradient-brand-vibrant],
[data-bg-base=gradient-brand-depth],
[data-bg-base=gradient-radial],
[data-bg-base=gradient-diagonal],
[data-bg-base=gradient-horizontal],
[data-bg-base=gradient-dark],
[data-bg-base=gradient-sunset],
[data-bg-base=gradient-ocean],
[data-bg-base=gradient-forest],
[data-bg-base=gradient-night],
[data-bg-base=gradient-fire],
[data-bg-base=gradient-metal],
[data-bg-base=gradient-gold],
[data-bg-base=gradient-rose],
[data-bg-base=gradient-copper],
[data-bg-base=gradient-conic],
[data-bg-base=gradient-corner-tl],
[data-bg-base=gradient-corner-br],
[data-bg-base=gradient-center],
[data-bg-base=solid-dark],
[data-bg-base=noise-dark],
[data-bg-base=spotlight],
[data-bg-base=glow],
[data-bg-base=duotone],
[data-bg-base=animated-gradient],
[data-bg-base=animated-mesh],
[data-bg-base=animated-shimmer],
[data-bg-base=split-horizontal],
[data-bg-base=split-vertical],
[data-bg-base=split-diagonal],
[data-bg-base=tri-color],
[data-bg-base=mesh],
[data-bg-base=gradient-aurora],
[data-bg-base=gradient-tropical],
[data-bg-base=gradient-autumn],
[data-bg-base=gradient-midnight],
[data-bg-base=gradient-wine],
[data-bg-base=gradient-peacock],
[data-bg-base=gradient-neon],
[data-bg-base=gradient-bronze],
[data-bg-base=gradient-chrome],
[data-bg-base=gradient-warm],
[data-bg-base=gradient-cool],
[data-bg-base=gradient-grainy],
[data-bg-base=animated-aurora],
[data-bg-base=animated-pulse-glow],
[data-bg-base=animated-wave],
[data-bg-base=gradient-dawn],
[data-bg-base=gradient-dusk],
[data-bg-base=gradient-golden-hour],
[data-bg-base=gradient-blue-hour],
[data-bg-base=gradient-rainforest],
[data-bg-base=gradient-desert],
[data-bg-base=gradient-coral-reef],
[data-bg-base=gradient-volcano],
[data-bg-base=gradient-velvet],
[data-bg-base=gradient-noir],
[data-bg-base=gradient-holographic],
[data-bg-base=gradient-laser],
[data-bg-base=gradient-cyber],
[data-bg-base=gradient-summer],
[data-bg-base=gradient-brand-glow],
[data-bg-base=gradient-brand-sweep],
[data-bg-base=gradient-brand-accent],
[data-bg-base=gradient-brand-duotone],
[data-bg-base=gradient-medical],
[data-bg-base=gradient-corporate],
[data-bg-base=gradient-trust],
[data-bg-base=gradient-property],
[data-bg-base=gradient-appetite],
[data-bg-base=gradient-fresh],
[data-bg-base=gradient-creative],
[data-bg-base=gradient-bold],
[data-bg-base=duotone-azure],
[data-bg-base=duotone-violet],
[data-bg-base=duotone-ember],
[data-bg-base=duotone-mint],
[data-bg-base=duotone-mono] {
  --text-heading: white;
  --text-body: rgba(255, 255, 255, 0.9);
  --text-muted: rgba(255, 255, 255, 0.7);
  --link-default: white;
  --link-hover: rgba(255, 255, 255, 0.8);
}

/**
 * Light bases need dark text
 */
[data-bg-base=solid],
[data-bg-base=solid-muted],
[data-bg-base=gradient-subtle],
[data-bg-base=gradient-light],
[data-bg-base=gradient-ice],
[data-bg-base=noise-light],
[data-bg-base=vignette],
[data-bg-base=gradient-candy],
[data-bg-base=gradient-pastel],
[data-bg-base=gradient-platinum],
[data-bg-base=gradient-champagne],
[data-bg-base=gradient-spring],
[data-bg-base=gradient-winter],
[data-bg-base=gradient-brand-soft],
[data-bg-base=gradient-wellness],
[data-bg-base=gradient-home] {
  --text-heading: hsl(0, 0%, 10%);
  --text-body: hsl(0, 0%, 20%);
  --text-muted: hsl(0, 0%, 40%);
  --link-default: hsl(0, 0%, 10%);
  --link-hover: hsl(0, 0%, 30%);
}

/**
 * Glass/Frosted effects - depend on what's behind them
 * Default to light text, use overlay for contrast if needed
 */
[data-bg-base=glass],
[data-bg-base=frosted],
[data-bg-base=blur] {
  --text-heading: white;
  --text-body: rgba(255, 255, 255, 0.9);
  --text-muted: rgba(255, 255, 255, 0.7);
  --link-default: white;
  --link-hover: rgba(255, 255, 255, 0.8);
}

/* ==========================================================================
   Text Shadow for ADA Compliance
   ========================================================================== */
/**
 * Add subtle text shadow to improve readability on gradient backgrounds
 * Helps maintain contrast on gradients that transition through mid-tones
 */
[data-bg-base*=gradient-] .bg-layers__content h1,
[data-bg-base*=gradient-] .bg-layers__content h2,
[data-bg-base*=gradient-] .bg-layers__content h3,
[data-bg-base*=gradient-] .bg-layers__content h4,
[data-bg-base*=gradient-] .bg-layers__content h5,
[data-bg-base*=gradient-] .bg-layers__content h6,
[data-bg-base*=gradient-] .bg-layers__content p,
[data-bg-base*=gradient-] .bg-layers__content .lead,
[data-bg-base*=gradient-] .bg-layers__content .eyebrow,
[data-bg-base*=duotone-] .bg-layers__content h1,
[data-bg-base*=duotone-] .bg-layers__content h2,
[data-bg-base*=duotone-] .bg-layers__content h3,
[data-bg-base*=duotone-] .bg-layers__content h4,
[data-bg-base*=duotone-] .bg-layers__content h5,
[data-bg-base*=duotone-] .bg-layers__content h6,
[data-bg-base*=duotone-] .bg-layers__content p,
[data-bg-base*=duotone-] .bg-layers__content .lead,
[data-bg-base*=duotone-] .bg-layers__content .eyebrow {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/*# sourceMappingURL=backgrounds.css.map */