/**
 * textures.css — Scalable Vector Graphics (SVG) Background Textures & Patterns
 * Zero raster image files. All decorative patterns use resolution-independent SVGs.
 */

/* Radial Polar Geodetic Grid with Spline Flow Underlay */
.bg-texture-blueprint {
  background-color: var(--color-bg);
  background-image: 
    radial-gradient(ellipse at 50% 0%, rgba(234, 88, 12, 0.06) 0%, transparent 65%),
    url("/static/img/svg/patterns/spline-waves.svg"),
    url("/static/img/svg/patterns/radial-grid.svg");
  background-size: auto, 800px 400px, 120px 120px;
  background-position: center top, center top, center top;
  background-repeat: no-repeat, repeat, repeat;
}

/* Hero Section Multi-Layered Radial Gradient & Mathematical Spline Canvas — Restrained */
.bg-texture-hero {
  position: relative;
  background-color: var(--color-surface);
  background-image: 
    radial-gradient(circle at 50% 28%, rgba(234, 88, 12, 0.045) 0%, rgba(255, 247, 237, 0.4) 40%, transparent 75%),
    radial-gradient(circle at 80% 80%, rgba(4, 120, 87, 0.018) 0%, transparent 45%),
    url("/static/img/svg/patterns/radial-spline-resonance.svg"),
    url("/static/img/svg/patterns/spline-waves.svg");
  background-position: center top, right bottom, center top, center top;
  background-size: 100% 100%, 600px 600px, 1400px 800px, 900px 450px;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat;
  border-bottom: 1px solid var(--color-divider, rgba(231, 229, 223, 0.45));
  overflow: hidden;
}

/* Dedicated Radial Gradient & Spline Concentric Canvas */
.bg-texture-radial {
  background-color: var(--color-surface);
  background-image: 
    radial-gradient(circle at 50% 30%, rgba(234, 88, 12, 0.09) 0%, rgba(254, 243, 199, 0.45) 40%, transparent 65%),
    url("/static/img/svg/patterns/radial-spline-resonance.svg");
  background-position: center top, center top;
  background-size: 100% 100%, 1200px 700px;
  background-repeat: no-repeat, no-repeat;
}

/* Continuous Mathematical Spline Currents over Ambient Radial Glow */
.bg-texture-spline {
  position: relative;
  background-color: var(--color-surface);
  background-image: 
    radial-gradient(circle at 50% 20%, rgba(234, 88, 12, 0.055) 0%, rgba(255, 247, 237, 0.45) 45%, transparent 75%),
    radial-gradient(circle at 85% 70%, rgba(4, 120, 87, 0.025) 0%, transparent 40%),
    url("/static/img/svg/patterns/spline-waves.svg"),
    url("/static/img/svg/patterns/spline-lattice-subtle.svg");
  background-position: center top, right bottom, center top, center top;
  background-size: 100% 100%, 500px 500px, 900px 450px, 140px 140px;
  background-repeat: no-repeat, no-repeat, repeat, repeat;
  border-bottom: 1px solid var(--color-divider, rgba(231, 229, 223, 0.45));
  overflow: hidden;
}

/* Deep Atmospheric Multi-Point Radial Gradients & Flow Splines */
.bg-texture-radial-glow {
  position: relative;
  background-color: var(--color-surface);
  background-image: 
    radial-gradient(circle at 50% 0%, rgba(234, 88, 12, 0.06) 0%, transparent 55%),
    radial-gradient(circle at 10% 80%, rgba(4, 120, 87, 0.028) 0%, transparent 50%),
    radial-gradient(circle at 90% 30%, rgba(2, 132, 199, 0.025) 0%, transparent 45%),
    url("/static/img/svg/patterns/spline-waves.svg");
  background-position: center top, left bottom, right top, center top;
  background-size: 100% 100%, 600px 600px, 500px 500px, 900px 450px;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat;
  border-bottom: 1px solid var(--color-divider, rgba(231, 229, 223, 0.45));
  overflow: hidden;
}

/* Backward-Compatible Texture Aliases mapped to Splines & Radial Gradients */
.bg-texture-polyform {
  position: relative;
  background-color: var(--color-surface);
  background-image: 
    radial-gradient(circle at 50% 20%, rgba(234, 88, 12, 0.08) 0%, rgba(255, 247, 237, 0.6) 45%, transparent 75%),
    url("/static/img/svg/patterns/spline-waves.svg"),
    url("/static/img/svg/patterns/spline-lattice-subtle.svg");
  background-position: center top, center top, center top;
  background-size: 100% 100%, 800px 400px, 120px 120px;
  background-repeat: no-repeat, repeat, repeat;
  border-bottom: 1px solid var(--color-border);
  overflow: hidden;
}

.bg-texture-soothing-natural {
  position: relative;
  background-color: var(--color-surface);
  background-image: 
    radial-gradient(ellipse at 50% 0%, rgba(4, 120, 87, 0.04) 0%, transparent 60%),
    radial-gradient(circle at 80% 80%, rgba(234, 88, 12, 0.05) 0%, transparent 50%),
    url("/static/img/svg/patterns/spline-waves.svg"),
    url("/static/img/svg/patterns/topographic-waves.svg");
  background-position: center top, right bottom, center top, center bottom;
  background-size: 100% 100%, auto, 120px 104px, 800px 400px;
  background-repeat: no-repeat, no-repeat, repeat, repeat-x;
  border-bottom: 1px solid var(--color-border);
  overflow: hidden;
}

/* Polyform Facet Accent for Cards and Panels */
.bg-texture-poly-facet {
  position: relative;
  background-color: var(--color-surface);
  background-image: 
    linear-gradient(to right, rgba(255, 247, 237, 0.7) 0%, transparent 40%),
    url("/static/img/svg/patterns/natural-polyform-mesh.svg");
  background-position: left top, top right;
  background-size: 100% 100%, 120px 104px;
  background-repeat: no-repeat, repeat;
}

/* Hero Decorative Architectural Framing Corners */
.hero-svg-frame-decor {
  position: absolute;
  inset: 1rem;
  pointer-events: none;
  z-index: 1;
}

.hero-frame-corner {
  position: absolute;
  opacity: 0.35;
}

.hero-frame-corner.top-left {
  top: 0;
  left: 0;
}

.hero-frame-corner.top-right {
  top: 0;
  right: 0;
}

.hero-frame-corner.bottom-left {
  bottom: 0;
  left: 0;
}

.hero-frame-corner.bottom-right {
  bottom: 0;
  right: 0;
}

@media (max-width: 640px) {
  .hero-svg-frame-decor {
    inset: 0.5rem;
  }
  .hero-frame-corner {
    width: 24px;
    height: 24px;
    opacity: 0.35;
  }
}

/* Career & Opportunity Mesh Network (For CTA & Personalization) */
.bg-texture-network {
  background-color: var(--color-surface);
  background-image: 
    url("/static/img/svg/patterns/career-network.svg"),
    radial-gradient(ellipse at 85% 25%, rgba(245, 124, 0, 0.12) 0%, transparent 60%),
    radial-gradient(circle at 15% 85%, rgba(26, 26, 25, 0.03) 0%, transparent 50%);
  background-position: right bottom, right top, left bottom;
  background-size: 480px 280px, auto, auto;
  background-repeat: no-repeat, no-repeat, no-repeat;
}

/* Featured Card Geometric Watermark */
.bg-texture-featured-card {
  position: relative;
  background-color: var(--color-surface);
  background-image: 
    url("/static/img/svg/patterns/geometric-diamonds.svg"),
    linear-gradient(to right, rgba(255, 247, 237, 0.6) 0%, transparent 35%);
  background-position: top right, left top;
  background-size: 40px 40px, 100% 100%;
  background-repeat: repeat-x, no-repeat;
}

/* Search Dock Modal Technical Engineering Surface */
.bg-texture-dialog {
  background-image: 
    radial-gradient(circle at 90% 10%, rgba(245, 124, 0, 0.06) 0%, transparent 40%),
    url("/static/img/svg/patterns/radial-grid.svg");
  background-size: auto, 120px 120px;
  background-repeat: no-repeat, repeat;
}

/* Subtle Topographic Elevation Isolines */
.bg-texture-topographic {
  background-image: 
    url("/static/img/svg/patterns/topographic-waves.svg"),
    linear-gradient(to bottom, var(--color-surface), var(--color-bg));
  background-position: center bottom, center;
  background-size: 800px 400px, 100% 100%;
  background-repeat: repeat-x, no-repeat;
}

/* Legacy Utilities preserved for backwards compatibility */
.bg-texture-dots {
  background-image: radial-gradient(var(--color-border) 1px, transparent 1px);
  background-size: 20px 20px;
}

.bg-texture-grid {
  background-image: 
    linear-gradient(to right, var(--color-border-subtle) 1px, transparent 1px),
    linear-gradient(to bottom, var(--color-border-subtle) 1px, transparent 1px);
  background-size: 32px 32px;
}

.bg-texture-hatch {
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    var(--color-border-subtle) 10px,
    var(--color-border-subtle) 11px
  );
}

.hero-surface {
  position: relative;
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  overflow: hidden;
}