/* ================================================================
   60-BACKGROUNDS.CSS — Universal Background System
   SimpleWebsites Template Factory

   Load order: ... → 50-layouts.css → [60-backgrounds.css] → components/70-*

   КАК РАБОТАЕТ КОМБИНИРОВАНИЕ ПАТТЕРН + ГРАДИЕНТ:
   -------------------------------------------------
   Три CSS-переменные управляют паттерном:
     --bg-pattern-layer  : само изображение паттерна (default: none)
     --bg-pattern-size   : background-size для паттерна (default: auto)
     --bg-pattern-repeat : background-repeat для паттерна (default: repeat)

   Паттерн-классы устанавливают все три переменные.
   Градиент-классы (@layer gradients) читают их:
     background-image: var(--bg-pattern-layer), gradient1, gradient2...
     background-size:  var(--bg-pattern-size), auto
     background-repeat: var(--bg-pattern-repeat), repeat

   Это гарантирует что background-size паттерна применяется ТОЛЬКО
   к первому слою, а не ко всем слоям градиента.

   @layer порядок: patterns < gradients
   Градиент побеждает в background-image/size/repeat.
   Паттерн устанавливает переменные (вне layer-логики).
   ================================================================ */

@layer patterns, gradients;

/* ── Дефолтные значения переменных паттерна ──────────────────── */
:root {
  --bg-pattern-layer:  none;
  --bg-pattern-size:   auto;
  --bg-pattern-repeat: repeat;
}


/* ================================================================
   СЕКЦИЯ 1: Solid фоны — вне @layer
   Только background-color + color. Без конфликтов.
   ================================================================ */

.bg-surface      { background-color: var(--bg-surface);     color: var(--text-primary); }
.bg-surface-alt  { background-color: var(--bg-surface-alt); color: var(--text-primary); }
.bg-elevated     { background-color: var(--bg-elevated);    color: var(--text-primary); }
.bg-primary      { background-color: var(--primary);        color: var(--on-primary); }
.bg-primary-soft { background-color: var(--primary-soft);   color: var(--on-primary-soft); }
.bg-white        { background-color: #FFFFFF;               color: var(--text-primary); }
.bg-transparent  { background-color: transparent; }
.bg-muted        { background-color: var(--bg-surface-alt); color: var(--text-secondary); }

.bg-dark                              { background-color: #0F172A; color: #F8FAFC; }
.bg-dark a                            { color: inherit; }
.bg-dark h1, .bg-dark h2, .bg-dark h3,
.bg-dark h4, .bg-dark h5, .bg-dark h6 { color: inherit; }


/* ================================================================
   СЕКЦИЯ 2: Секционные фоны — вне @layer (обратная совместимость)
   ================================================================ */

.section--bg-base         { background-color: var(--bg-surface);     color: var(--text-primary); }
.section--bg-alt          { background-color: var(--bg-surface-alt); color: var(--text-primary); }
.section--bg-accent       { background-color: var(--section-accent-bg); color: var(--section-accent-fg); }
.section--bg-accent-soft  { background-color: var(--primary-soft);   color: var(--text-primary); }
.section--bg-dark         { background-color: #0F172A; color: #F8FAFC; }
.section--bg-dark a       { color: inherit; }
.section--bg-override     { /* сигнальный класс */ }

.section--bg-gradient-01  { background-image: linear-gradient(180deg, var(--bg-surface) 0%, var(--bg-surface-alt) 100%); color: var(--text-primary); }
.section--bg-gradient-02  { background-image: radial-gradient(ellipse at top, var(--bg-surface-alt) 0%, var(--bg-surface) 70%); background-color: var(--bg-surface); color: var(--text-primary); }
.section--bg-gradient-03  { background-image: linear-gradient(180deg, var(--primary) 0%, var(--bg-surface) 100%); }
.section--bg-gradient-04  { background-image: linear-gradient(135deg, var(--primary-soft) 0%, transparent 50%); background-color: var(--bg-surface); color: var(--text-primary); }
.section--bg-gradient-05  { background-image: radial-gradient(circle at top right, var(--primary-soft) 0%, transparent 50%); background-color: var(--bg-surface); color: var(--text-primary); }


/* ================================================================
   СЕКЦИЯ 3: Градиенты — @layer gradients (высший приоритет)

   Каждый класс задаёт:
     background-image:  var(--bg-pattern-layer), <gradients>
     background-size:   var(--bg-pattern-size), auto
     background-repeat: var(--bg-pattern-repeat), repeat

   Это обеспечивает что background-size паттерна применяется
   только к первому слою (паттерну), а не ко всем слоям.
   ================================================================ */

@layer gradients {

  /* ── Тонкие переходы ──────────────────────────────────────── */

  .bg-gradient-soft {
    background-image:  var(--bg-pattern-layer), linear-gradient(180deg, var(--bg-surface) 0%, var(--bg-surface-alt) 100%);
    background-size:   var(--bg-pattern-size), auto;
    background-repeat: var(--bg-pattern-repeat), repeat;
    background-color: var(--bg-surface); color: var(--text-primary);
  }

  .bg-gradient-warm {
    background-image:  var(--bg-pattern-layer), linear-gradient(180deg, var(--bg-surface) 0%, color-mix(in srgb, var(--primary-soft) 30%, var(--bg-surface-alt)) 100%);
    background-size:   var(--bg-pattern-size), auto;
    background-repeat: var(--bg-pattern-repeat), repeat;
    background-color: var(--bg-surface); color: var(--text-primary);
  }

  .bg-gradient-cool {
    background-image:  var(--bg-pattern-layer), radial-gradient(ellipse at top, var(--bg-surface-alt) 0%, var(--bg-surface) 70%);
    background-size:   var(--bg-pattern-size), auto;
    background-repeat: var(--bg-pattern-repeat), repeat;
    background-color: var(--bg-surface); color: var(--text-primary);
  }

  /* ── Акцентные ────────────────────────────────────────────── */

  .bg-gradient-mesh {
    background-image:
      var(--bg-pattern-layer),
      radial-gradient(at 40% 20%, var(--primary-soft) 0%, transparent 50%),
      radial-gradient(at 80% 0%, var(--bg-surface-alt) 0%, transparent 50%),
      radial-gradient(at 0% 50%, var(--primary-soft) 0%, transparent 50%);
    background-size:   var(--bg-pattern-size), auto, auto, auto;
    background-repeat: var(--bg-pattern-repeat), repeat, repeat, repeat;
    background-color: var(--bg-surface); color: var(--text-primary);
  }

  .bg-gradient-radial {
    background-image:  var(--bg-pattern-layer), radial-gradient(ellipse at center, var(--primary-soft) 0%, var(--bg-surface) 70%);
    background-size:   var(--bg-pattern-size), auto;
    background-repeat: var(--bg-pattern-repeat), repeat;
    background-color: var(--bg-surface); color: var(--text-primary);
  }

  .bg-gradient-corner-glow {
    background-image:  var(--bg-pattern-layer), radial-gradient(circle at top right, var(--primary-soft) 0%, transparent 50%);
    background-size:   var(--bg-pattern-size), auto;
    background-repeat: var(--bg-pattern-repeat), repeat;
    background-color: var(--bg-surface); color: var(--text-primary);
  }

  .bg-gradient-accent-spread {
    background-image:  var(--bg-pattern-layer), linear-gradient(135deg, var(--primary-soft) 0%, transparent 50%);
    background-size:   var(--bg-pattern-size), auto;
    background-repeat: var(--bg-pattern-repeat), repeat;
    background-color: var(--bg-surface); color: var(--text-primary);
  }

  .bg-gradient-accent-fade {
    background-image:  var(--bg-pattern-layer), linear-gradient(180deg, var(--primary) 0%, var(--bg-surface) 100%);
    background-size:   var(--bg-pattern-size), auto;
    background-repeat: var(--bg-pattern-repeat), repeat;
  }

  /* ── Диагональные ─────────────────────────────────────────── */

  .bg-gradient-diagonal {
    background-image:  var(--bg-pattern-layer), linear-gradient(135deg, var(--primary-soft) 0%, var(--bg-surface-alt) 100%);
    background-size:   var(--bg-pattern-size), auto;
    background-repeat: var(--bg-pattern-repeat), repeat;
    color: var(--text-primary);
  }

  .bg-gradient-dramatic {
    background-image:  var(--bg-pattern-layer), linear-gradient(135deg, var(--primary) 0%, var(--bg-surface) 60%);
    background-size:   var(--bg-pattern-size), auto;
    background-repeat: var(--bg-pattern-repeat), repeat;
    color: var(--text-primary);
  }

  .bg-gradient-diagonal-dark {
    background-image:  var(--bg-pattern-layer), linear-gradient(135deg, #0F172A 0%, #1e3a5f 100%);
    background-size:   var(--bg-pattern-size), auto;
    background-repeat: var(--bg-pattern-repeat), repeat;
    color: #F8FAFC;
  }

  /* ── Горизонтальные ───────────────────────────────────────── */

  .bg-gradient-split {
    background-image:  var(--bg-pattern-layer), linear-gradient(90deg, var(--bg-surface) 50%, var(--bg-surface-alt) 50%);
    background-size:   var(--bg-pattern-size), auto;
    background-repeat: var(--bg-pattern-repeat), repeat;
    color: var(--text-primary);
  }

  .bg-gradient-split-accent {
    background-image:  var(--bg-pattern-layer), linear-gradient(90deg, var(--primary-soft) 50%, var(--bg-surface) 50%);
    background-size:   var(--bg-pattern-size), auto;
    background-repeat: var(--bg-pattern-repeat), repeat;
    color: var(--text-primary);
  }

  /* ── Оверлеи ──────────────────────────────────────────────── */

  .bg-gradient-bottom-fade {
    background-image:  var(--bg-pattern-layer), linear-gradient(0deg, var(--bg-surface) 0%, transparent 30%);
    background-size:   var(--bg-pattern-size), auto;
    background-repeat: var(--bg-pattern-repeat), repeat;
  }

  .bg-gradient-overlay-dark {
    background-image:  var(--bg-pattern-layer), linear-gradient(var(--hero-overlay-start), var(--hero-overlay-end));
    background-size:   var(--bg-pattern-size), cover;
    background-repeat: var(--bg-pattern-repeat), no-repeat;
    background-position: left top, center;
  }

  .bg-gradient-overlay-accent {
    background-image:  var(--bg-pattern-layer), linear-gradient(color-mix(in srgb, var(--primary) 80%, transparent), color-mix(in srgb, var(--primary) 90%, transparent));
    background-size:   var(--bg-pattern-size), cover;
    background-repeat: var(--bg-pattern-repeat), no-repeat;
    background-position: left top, center;
  }

  /* ── Визуальные эффекты ───────────────────────────────────── */

  .bg-gradient-glow {
    background-image:  var(--bg-pattern-layer), radial-gradient(ellipse at center, color-mix(in srgb, var(--primary) 25%, transparent) 0%, transparent 60%);
    background-size:   var(--bg-pattern-size), auto;
    background-repeat: var(--bg-pattern-repeat), repeat;
    background-color: #0F172A; color: #F8FAFC;
  }

  .bg-gradient-aurora {
    background-image:
      var(--bg-pattern-layer),
      radial-gradient(ellipse at 20% 50%, color-mix(in srgb, var(--primary) 30%, transparent) 0%, transparent 50%),
      radial-gradient(ellipse at 80% 30%, color-mix(in srgb, var(--primary-soft) 60%, transparent) 0%, transparent 50%);
    background-size:   var(--bg-pattern-size), auto, auto;
    background-repeat: var(--bg-pattern-repeat), repeat, repeat;
    background-color: #0F172A; color: #F8FAFC;
  }

  .bg-gradient-sunset {
    background-image:  var(--bg-pattern-layer), linear-gradient(0deg, color-mix(in srgb, var(--primary) 60%, transparent) 0%, color-mix(in srgb, var(--primary-soft) 30%, transparent) 50%, transparent 100%);
    background-size:   var(--bg-pattern-size), auto;
    background-repeat: var(--bg-pattern-repeat), repeat;
    background-color: var(--bg-surface); color: var(--text-primary);
  }

} /* end @layer gradients */

/* ================================================================
   СЕКЦИЯ 3b: Цвет текста для тёмных градиентов — вне @layer
   h4/h5/h6 в 30-fonts.css задают color: var(--text-primary) прямо
   на элементе, что перекрывает наследование из @layer.
   Правила ниже восстанавливают наследование через color: inherit.
   ================================================================ */

.bg-gradient-aurora h1,    .bg-gradient-aurora h2,
.bg-gradient-aurora h3,    .bg-gradient-aurora h4,
.bg-gradient-aurora h5,    .bg-gradient-aurora h6    { color: inherit; }

.bg-gradient-dramatic h1,  .bg-gradient-dramatic h2,
.bg-gradient-dramatic h3,  .bg-gradient-dramatic h4,
.bg-gradient-dramatic h5,  .bg-gradient-dramatic h6  { color: inherit; }

.bg-gradient-glow h1,      .bg-gradient-glow h2,
.bg-gradient-glow h3,      .bg-gradient-glow h4,
.bg-gradient-glow h5,      .bg-gradient-glow h6      { color: inherit; }

.bg-gradient-diagonal-dark h1, .bg-gradient-diagonal-dark h2,
.bg-gradient-diagonal-dark h3, .bg-gradient-diagonal-dark h4,
.bg-gradient-diagonal-dark h5, .bg-gradient-diagonal-dark h6 { color: inherit; }


/* ================================================================
   СЕКЦИЯ 4: Паттерны — @layer patterns (низший приоритет)

   Каждый класс:
     --bg-pattern-layer:  <image>       — само изображение
     --bg-pattern-size:   <size>        — размер тайла
     --bg-pattern-repeat: <repeat>      — режим повтора
     background-image:    var(--bg-pattern-layer)   — для standalone
     background-size:     var(--bg-pattern-size)    — для standalone
     background-repeat:   var(--bg-pattern-repeat)  — для standalone

   Когда есть градиент-класс — его @layer gradients перекрывает
   background-image/size/repeat, но переменные читаются градиентом.
   ================================================================ */

@layer patterns {

  /* ── 4.0 Базовые ──────────────────────────────────────────── */

  .bg-dots {
    --bg-pattern-layer:  radial-gradient(circle, color-mix(in srgb, var(--text-primary) 15%, transparent) 1px, transparent 1px);
    --bg-pattern-size:   20px 20px;
    background-image:  var(--bg-pattern-layer);
    background-size:   var(--bg-pattern-size);
  }

  .bg-grid {
    --bg-pattern-layer:
      linear-gradient(to right, color-mix(in srgb, var(--text-primary) 8%, transparent) 1px, transparent 1px),
      linear-gradient(to bottom, color-mix(in srgb, var(--text-primary) 8%, transparent) 1px, transparent 1px);
    --bg-pattern-size:   32px 32px, 32px 32px; /* 2 слоя — дублируем */
    background-image:  var(--bg-pattern-layer);
    background-size:   var(--bg-pattern-size);
  }

  .bg-lines {
    --bg-pattern-layer:  repeating-linear-gradient(45deg, color-mix(in srgb, var(--text-primary) 6%, transparent), color-mix(in srgb, var(--text-primary) 6%, transparent) 1px, transparent 1px, transparent 12px);
    background-image:  var(--bg-pattern-layer);
  }

  .bg-noise {
    --bg-pattern-layer:
      repeating-linear-gradient(0deg,   color-mix(in srgb, var(--text-primary) 4%, transparent), color-mix(in srgb, var(--text-primary) 4%, transparent) 1px, transparent 1px, transparent 3px),
      repeating-linear-gradient(90deg,  color-mix(in srgb, var(--text-primary) 3%, transparent), color-mix(in srgb, var(--text-primary) 3%, transparent) 1px, transparent 1px, transparent 3px),
      repeating-linear-gradient(45deg,  color-mix(in srgb, var(--text-primary) 2%, transparent), color-mix(in srgb, var(--text-primary) 2%, transparent) 1px, transparent 1px, transparent 6px);
    background-image:  var(--bg-pattern-layer);
  }

  .bg-circles {
    --bg-pattern-layer:
      radial-gradient(circle at 20% 80%, color-mix(in srgb, var(--primary) 10%, transparent) 0%, transparent 40%),
      radial-gradient(circle at 80% 20%, color-mix(in srgb, var(--primary)  8%, transparent) 0%, transparent 35%),
      radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--bg-surface-alt) 60%, transparent) 0%, transparent 60%);
    background-image:  var(--bg-pattern-layer);
  }

  .bg-waves {
    --bg-pattern-layer:  url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="100" height="20" viewBox="0 0 100 20"%3E%3Cpath d="M0 10 C25 0, 75 20, 100 10 L100 20 L0 20 Z" fill="rgba(0,0,0,0.07)"/%3E%3C/svg%3E');
    --bg-pattern-size:   100px 20px;
    --bg-pattern-repeat: repeat-x;
    background-image:  var(--bg-pattern-layer);
    background-size:   var(--bg-pattern-size);
    background-repeat: var(--bg-pattern-repeat);
    background-position: bottom;
  }

  .bg-crosshatch {
    --bg-pattern-layer:
      repeating-linear-gradient( 45deg, color-mix(in srgb, var(--text-primary) 5%, transparent), color-mix(in srgb, var(--text-primary) 5%, transparent) 1px, transparent 1px, transparent 10px),
      repeating-linear-gradient(-45deg, color-mix(in srgb, var(--text-primary) 5%, transparent), color-mix(in srgb, var(--text-primary) 5%, transparent) 1px, transparent 1px, transparent 10px);
    background-image:  var(--bg-pattern-layer);
  }

  .bg-hexagons {
    --bg-pattern-layer:
      radial-gradient(circle at   0   0, color-mix(in srgb, var(--primary) 8%, transparent) 0%, transparent 60%),
      radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--primary) 6%, transparent) 0%, transparent 60%);
    --bg-pattern-size:   60px 60px, 60px 60px; /* 2 слоя — дублируем */
    background-image:  var(--bg-pattern-layer);
    background-size:   var(--bg-pattern-size);
  }

  /* ── 4.1 Точки ────────────────────────────────────────────── */

  .bg-dots-xs {
    --bg-pattern-layer: radial-gradient(circle, color-mix(in srgb, var(--text-primary) 15%, transparent) 0.5px, transparent 0.5px);
    --bg-pattern-size:  8px 8px;
    background-image: var(--bg-pattern-layer); background-size: var(--bg-pattern-size);
  }
  .bg-dots-sm {
    --bg-pattern-layer: radial-gradient(circle, color-mix(in srgb, var(--text-primary) 15%, transparent) 1px, transparent 1px);
    --bg-pattern-size:  12px 12px;
    background-image: var(--bg-pattern-layer); background-size: var(--bg-pattern-size);
  }
  .bg-dots-md {
    --bg-pattern-layer: radial-gradient(circle, color-mix(in srgb, var(--text-primary) 15%, transparent) 1.5px, transparent 1.5px);
    --bg-pattern-size:  20px 20px;
    background-image: var(--bg-pattern-layer); background-size: var(--bg-pattern-size);
  }
  .bg-dots-lg {
    --bg-pattern-layer: radial-gradient(circle, color-mix(in srgb, var(--text-primary) 15%, transparent) 2px, transparent 2px);
    --bg-pattern-size:  32px 32px;
    background-image: var(--bg-pattern-layer); background-size: var(--bg-pattern-size);
  }
  .bg-dots-xl {
    --bg-pattern-layer: radial-gradient(circle, color-mix(in srgb, var(--text-primary) 15%, transparent) 3px, transparent 3px);
    --bg-pattern-size:  48px 48px;
    background-image: var(--bg-pattern-layer); background-size: var(--bg-pattern-size);
  }

  /* ── 4.2 Линии ────────────────────────────────────────────── */

  .bg-lines-45 {
    --bg-pattern-layer: repeating-linear-gradient(45deg,  color-mix(in srgb, var(--text-primary) 6%, transparent), color-mix(in srgb, var(--text-primary) 6%, transparent) 1px, transparent 1px, transparent 16px);
    background-image: var(--bg-pattern-layer);
  }
  .bg-lines-45-dense {
    --bg-pattern-layer: repeating-linear-gradient(45deg,  color-mix(in srgb, var(--text-primary) 6%, transparent), color-mix(in srgb, var(--text-primary) 6%, transparent) 1px, transparent 1px, transparent 8px);
    background-image: var(--bg-pattern-layer);
  }
  .bg-lines-45-loose {
    --bg-pattern-layer: repeating-linear-gradient(45deg,  color-mix(in srgb, var(--text-primary) 6%, transparent), color-mix(in srgb, var(--text-primary) 6%, transparent) 1px, transparent 1px, transparent 32px);
    background-image: var(--bg-pattern-layer);
  }
  .bg-lines-neg45 {
    --bg-pattern-layer: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--text-primary) 6%, transparent), color-mix(in srgb, var(--text-primary) 6%, transparent) 1px, transparent 1px, transparent 16px);
    background-image: var(--bg-pattern-layer);
  }
  .bg-lines-neg45-dense {
    --bg-pattern-layer: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--text-primary) 6%, transparent), color-mix(in srgb, var(--text-primary) 6%, transparent) 1px, transparent 1px, transparent 8px);
    background-image: var(--bg-pattern-layer);
  }
  .bg-lines-h {
    --bg-pattern-layer: repeating-linear-gradient(0deg,   color-mix(in srgb, var(--text-primary) 6%, transparent), color-mix(in srgb, var(--text-primary) 6%, transparent) 1px, transparent 1px, transparent 16px);
    background-image: var(--bg-pattern-layer);
  }
  .bg-lines-h-dense {
    --bg-pattern-layer: repeating-linear-gradient(0deg,   color-mix(in srgb, var(--text-primary) 6%, transparent), color-mix(in srgb, var(--text-primary) 6%, transparent) 1px, transparent 1px, transparent 8px);
    background-image: var(--bg-pattern-layer);
  }
  .bg-lines-v {
    --bg-pattern-layer: repeating-linear-gradient(90deg,  color-mix(in srgb, var(--text-primary) 6%, transparent), color-mix(in srgb, var(--text-primary) 6%, transparent) 1px, transparent 1px, transparent 16px);
    background-image: var(--bg-pattern-layer);
  }

  /* ── 4.3 Сетка ────────────────────────────────────────────── */

  .bg-grid-sm {
    --bg-pattern-layer:
      linear-gradient(to right, color-mix(in srgb, var(--text-primary) 8%, transparent) 1px, transparent 1px),
      linear-gradient(to bottom, color-mix(in srgb, var(--text-primary) 8%, transparent) 1px, transparent 1px);
    --bg-pattern-size: 16px 16px, 16px 16px; /* 2 слоя — дублируем */
    background-image: var(--bg-pattern-layer); background-size: var(--bg-pattern-size);
  }
  .bg-grid-md {
    --bg-pattern-layer:
      linear-gradient(to right, color-mix(in srgb, var(--text-primary) 8%, transparent) 1px, transparent 1px),
      linear-gradient(to bottom, color-mix(in srgb, var(--text-primary) 8%, transparent) 1px, transparent 1px);
    --bg-pattern-size: 32px 32px, 32px 32px; /* 2 слоя — дублируем */
    background-image: var(--bg-pattern-layer); background-size: var(--bg-pattern-size);
  }
  .bg-grid-lg {
    --bg-pattern-layer:
      linear-gradient(to right, color-mix(in srgb, var(--text-primary) 8%, transparent) 1px, transparent 1px),
      linear-gradient(to bottom, color-mix(in srgb, var(--text-primary) 8%, transparent) 1px, transparent 1px);
    --bg-pattern-size: 64px 64px, 64px 64px; /* 2 слоя — дублируем */
    background-image: var(--bg-pattern-layer); background-size: var(--bg-pattern-size);
  }

  /* ── 4.4 Штриховка ────────────────────────────────────────── */

  .bg-crosshatch-fine {
    --bg-pattern-layer:
      repeating-linear-gradient( 45deg, color-mix(in srgb, var(--text-primary) 5%, transparent), color-mix(in srgb, var(--text-primary) 5%, transparent) 1px, transparent 1px, transparent 6px),
      repeating-linear-gradient(-45deg, color-mix(in srgb, var(--text-primary) 5%, transparent), color-mix(in srgb, var(--text-primary) 5%, transparent) 1px, transparent 1px, transparent 6px);
    background-image: var(--bg-pattern-layer);
  }
  .bg-crosshatch-loose {
    --bg-pattern-layer:
      repeating-linear-gradient( 45deg, color-mix(in srgb, var(--text-primary) 5%, transparent), color-mix(in srgb, var(--text-primary) 5%, transparent) 1px, transparent 1px, transparent 20px),
      repeating-linear-gradient(-45deg, color-mix(in srgb, var(--text-primary) 5%, transparent), color-mix(in srgb, var(--text-primary) 5%, transparent) 1px, transparent 1px, transparent 20px);
    background-image: var(--bg-pattern-layer);
  }

} /* end @layer patterns */


/* Waves dark variant — вне @layer */
.dark .bg-waves {
  --bg-pattern-layer: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="100" height="20" viewBox="0 0 100 20"%3E%3Cpath d="M0 10 C25 0, 75 20, 100 10 L100 20 L0 20 Z" fill="rgba(255,255,255,0.07)"/%3E%3C/svg%3E');
}


/* ================================================================
   СЕКЦИЯ 5: Алиасы — @layer gradients (обратная совместимость)
   ================================================================ */

@layer gradients {

  .hero--bg-gradient-mesh {
    background-image:
      var(--bg-pattern-layer),
      radial-gradient(at 40% 20%, var(--primary-soft) 0%, transparent 50%),
      radial-gradient(at 80% 0%, var(--bg-surface-alt) 0%, transparent 50%),
      radial-gradient(at 0% 50%, var(--primary-soft) 0%, transparent 50%);
    background-size:   var(--bg-pattern-size), auto, auto, auto;
    background-repeat: var(--bg-pattern-repeat), repeat, repeat, repeat;
    background-color: var(--bg-surface); color: var(--text-primary);
  }

  .hero--bg-gradient-dramatic {
    background-image:  var(--bg-pattern-layer), linear-gradient(135deg, var(--primary) 0%, var(--bg-surface) 60%);
    background-size:   var(--bg-pattern-size), auto;
    background-repeat: var(--bg-pattern-repeat), repeat;
    color: var(--text-primary);
  }

  .hero--bg-gradient-split {
    background-image:  var(--bg-pattern-layer), linear-gradient(90deg, var(--bg-surface) 50%, var(--bg-surface-alt) 50%);
    background-size:   var(--bg-pattern-size), auto;
    background-repeat: var(--bg-pattern-repeat), repeat;
    color: var(--text-primary);
  }

  .hero--bg-gradient-bottom-fade {
    background-image:  var(--bg-pattern-layer), linear-gradient(0deg, var(--bg-surface) 0%, transparent 30%);
    background-size:   var(--bg-pattern-size), auto;
    background-repeat: var(--bg-pattern-repeat), repeat;
  }

  .hero--bg-image-overlay {
    background-image:  var(--bg-pattern-layer), linear-gradient(var(--hero-overlay-start), var(--hero-overlay-end));
    background-size:   var(--bg-pattern-size), cover;
    background-repeat: var(--bg-pattern-repeat), no-repeat;
    background-position: left top, center;
  }

  .hero--bg-image-overlay-accent {
    background-image:  var(--bg-pattern-layer), linear-gradient(color-mix(in srgb, var(--primary) 80%, transparent), color-mix(in srgb, var(--primary) 90%, transparent));
    background-size:   var(--bg-pattern-size), cover;
    background-repeat: var(--bg-pattern-repeat), no-repeat;
    background-position: left top, center;
  }

} /* end @layer gradients — aliases */