/* ===== BG Rain – Grand Ribbons (luxury stripes, no tiling) ===== */
:root{
  /* Тонкая настройка */
  --lux-bg-from: #ffffff;
  --lux-bg-to:   #f8f8f8;

  /* Цвета лент */
  --lux-black:  rgba(0,0,0,.16);
  --lux-graph:  rgba(22,22,22,.12);
  --lux-yellow: rgba(255,212,0,.22);

  /* Толщины (в vw, чтобы масштабировались с шириной) */
  --w-a: 10vw;  /* чёрная основная лента */
  --w-b: 7vw;   /* жёлтая акцентная */
  --w-c: 5vw;   /* графит поддержка */

  /* Отступы между лентами (также в vw) */
  --gap-1: 12vw;
  --gap-2: 16vw;
  --gap-3: 20vw;

  /* Виньетка */
  --vignette: rgba(0,0,0,.06);
}

body.bg-rain{
  position: relative;
  isolation: isolate;
  background: linear-gradient(180deg, var(--lux-bg-from), var(--lux-bg-to));
}

/* Главный слой: несколько сверхшироких диагональных “лент”.
   Линейные градиенты заданны точными отрезками в vw — без повторения по сетке. */
body.bg-rain::before{
  content:"";
  position: fixed; inset: 0;
  z-index: 0; pointer-events:none;

  /* Несколько НЕrepeating linear-gradient, каждый — одна-две толстые ленты + прозрачные отрезки.
     Проценты не используем — только vw, чтобы не было эффекта «плитки». */
  background-image:
    /* A — чёрная: старт левее центра, крупная */
    linear-gradient(115deg,
      transparent 0,
      transparent calc(18vw),
      var(--lux-black) calc(18vw) calc(18vw + var(--w-a)),
      transparent calc(18vw + var(--w-a)) 100vw
    ),

    /* B — жёлтая: смещаем дальше, чтобы полосы красиво «разошлись» */
    linear-gradient(115deg,
      transparent 0,
      transparent calc(18vw + var(--w-a) + var(--gap-1)),
      var(--lux-yellow) calc(18vw + var(--w-a) + var(--gap-1)) calc(18vw + var(--w-a) + var(--gap-1) + var(--w-b)),
      transparent calc(18vw + var(--w-a) + var(--gap-1) + var(--w-b)) 120vw
    ),

    /* C — графитовая: ещё дальше */
    linear-gradient(115deg,
      transparent 0,
      transparent calc(18vw + var(--w-a) + var(--gap-1) + var(--w-b) + var(--gap-2)),
      var(--lux-graph) calc(18vw + var(--w-a) + var(--gap-1) + var(--w-b) + var(--gap-2)) calc(18vw + var(--w-a) + var(--gap-1) + var(--w-b) + var(--gap-2) + var(--w-c)),
      transparent calc(18vw + var(--w-a) + var(--gap-1) + var(--w-b) + var(--gap-2) + var(--w-c)) 140vw
    ),

    /* Виньетка по краям — чтобы фон выглядел глубже */
    radial-gradient(130% 130% at 50% 45%, transparent 60%, var(--vignette) 100%);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;

  /* Масштабируем слой больше экрана и слегка сдвигаем — чтобы не было ощущения «краёв» */
  transform: rotate(0.001deg); /* анти-алияс-трюк */
  opacity: .95;
}

/* Дополнительный слой с другой геометрией — “легкий перекрёст”,
   очень прозрачный, чтобы только добавить богатства рисунку. */
body.bg-rain::after{
  content:"";
  position: fixed; inset: -10vh -10vw; /* расширяем за пределы вьюпорта */
  z-index: 0; pointer-events:none;

  background-image:
    linear-gradient(135deg,
      transparent 0,
      transparent calc(10vw),
      rgba(255,212,0,.08) calc(10vw) calc(10vw + 4vw),
      transparent calc(10vw + 4vw) calc(10vw + 4vw + 26vw),
      rgba(0,0,0,.08) calc(10vw + 4vw + 26vw) calc(10vw + 4vw + 26vw + 6vw),
      transparent 100%
    );
  background-repeat: no-repeat;
  opacity: .6;
  filter: saturate(1.05);
}

/* Контент всегда над фоном */
.site, .wrap, .specialist-page{ position: relative; z-index: 1; }

/* Адаптация под мобильные — делаем ленты тоньше и реже, чтобы не перегружать */
@media (max-width: 768px){
  :root{
    --w-a: 12vw;
    --w-b: 8vw;
    --w-c: 6vw;
    --gap-1: 14vw;
    --gap-2: 18vw;
    --gap-3: 22vw;
  }
}

/* Если нужна минимальная динамика (еле заметный дрейф) — раскомментируй */
/*
@keyframes luxDrift {
  from { transform: translate3d(0,0,0) rotate(0.001deg); }
  to   { transform: translate3d(-2vw,-2vh,0) rotate(0.001deg); }
}
body.bg-rain::before{ animation: luxDrift 120s linear infinite; }
body.bg-rain::after { animation: luxDrift 160s linear infinite reverse; }
*/

@media (prefers-reduced-motion: reduce){
  body.bg-rain::before,
  body.bg-rain::after{ animation: none !important; }
}
body.bg-rain::before,
body.bg-rain::after{
  z-index: -1;          /* <— было 0, ставим -1 */
  pointer-events: none;
  mix-blend-mode: normal; /* на всякий случай фиксируем нормальный режим смешивания */
}

/* Рекомендуется убрать насыщение, оно даёт общий цветовой сдвиг */
body.bg-rain::after{
  /* filter: saturate(1.05); */ /* закомментируй/удали */
}