/* ==========================================================================
   Фоны-«жидкости»: 14 градиентов в духе капель топлива в воде,
   радужной плёнки, разводов и масляных бликов. Только светлые — под тёмный текст.
   Использование: <section class="block bg-drops"> …
   ========================================================================== */
[class*="bg-"] { position: relative; isolation: isolate; }

/* 01 · Капли в воде — голубые круги с кольцами */
.bg-drops {
  background:
    radial-gradient(circle at 18% 28%, rgba(61,149,245,.22) 0 7%, transparent 7.4% 9%, rgba(61,149,245,.10) 9.2% 10%, transparent 10.3%),
    radial-gradient(circle at 78% 64%, rgba(19,163,168,.20) 0 5%, transparent 5.4% 7.6%, rgba(19,163,168,.10) 7.8% 8.6%, transparent 8.9%),
    radial-gradient(circle at 62% 18%, rgba(111,211,164,.22) 0 3%, transparent 3.3%),
    radial-gradient(120% 90% at 0% 0%, #EAF4FF 0%, #F7FAFD 60%, #FFFFFF 100%);
}

/* 02 · Радужная плёнка (бензин на асфальте после дождя), очень мягкая */
.bg-film {
  background:
    radial-gradient(60% 50% at 70% 30%, rgba(255,194,61,.18), transparent 70%),
    radial-gradient(50% 60% at 30% 70%, rgba(111,211,164,.22), transparent 70%),
    radial-gradient(45% 45% at 50% 45%, rgba(169,209,255,.35), transparent 70%),
    conic-gradient(from 200deg at 60% 50%, #F3F9FF, #EAF7F1, #FFF8EA, #F1EEFF, #F3F9FF);
}

/* 03 · Масляное пятно — концентрические «ореолы» */
.bg-slick {
  background:
    repeating-radial-gradient(circle at 80% 20%, rgba(11,99,206,.00) 0 22px, rgba(11,99,206,.05) 23px 25px, rgba(11,99,206,0) 26px 44px),
    radial-gradient(70% 70% at 80% 20%, #DDEEFF 0%, #F4FAFF 55%, #FFFFFF 100%);
}

/* 04 · Зелёная вода — «чистое топливо К5» */
.bg-lagoon {
  background:
    radial-gradient(40% 55% at 12% 88%, rgba(11,127,79,.14), transparent 70%),
    radial-gradient(35% 40% at 92% 10%, rgba(19,163,168,.16), transparent 70%),
    linear-gradient(160deg, #F0FBF5 0%, #E6F7EF 45%, #F2FBFB 100%);
}

/* 05 · Пузырьки — много мелких капель */
.bg-bubbles {
  background:
    radial-gradient(circle at 10% 20%, rgba(61,149,245,.20) 0 6px, transparent 7px),
    radial-gradient(circle at 24% 72%, rgba(61,149,245,.16) 0 10px, transparent 11px),
    radial-gradient(circle at 44% 34%, rgba(19,163,168,.18) 0 4px, transparent 5px),
    radial-gradient(circle at 66% 82%, rgba(111,211,164,.22) 0 8px, transparent 9px),
    radial-gradient(circle at 86% 26%, rgba(61,149,245,.14) 0 14px, transparent 15px),
    radial-gradient(circle at 92% 60%, rgba(19,163,168,.16) 0 5px, transparent 6px),
    linear-gradient(180deg, #F6FBFF 0%, #EAF4FF 100%);
  background-size: 100% 100%;
}

/* 06 · Янтарная капля — ретро, для акцентных блоков */
.bg-amber {
  background:
    radial-gradient(38% 60% at 85% 50%, rgba(255,194,61,.35), transparent 72%),
    radial-gradient(30% 40% at 10% 15%, rgba(200,50,42,.08), transparent 70%),
    linear-gradient(135deg, #FFF9EC 0%, #FFF6E4 50%, #FFFDF7 100%);
}

/* 07 · Утренний туман над нефтебазой */
.bg-mist {
  background:
    linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.8) 70%),
    radial-gradient(120% 60% at 50% 0%, #DCEBFA 0%, transparent 70%),
    linear-gradient(180deg, #EEF4FA, #FFFFFF);
}

/* 08 · Разлом волны — диагональные разводы */
.bg-swirl {
  background:
    repeating-linear-gradient(115deg, rgba(11,99,206,.035) 0 2px, transparent 2px 28px),
    radial-gradient(60% 80% at 100% 100%, rgba(111,211,164,.28), transparent 70%),
    radial-gradient(60% 70% at 0% 0%, rgba(169,209,255,.45), transparent 70%),
    #FBFDFF;
}

/* 09 · Мятный хром — 50-е, дайнер */
.bg-diner {
  background:
    repeating-linear-gradient(90deg, rgba(10,26,43,.03) 0 1px, transparent 1px 64px),
    radial-gradient(50% 60% at 20% 20%, rgba(191,235,221,.9), transparent 70%),
    radial-gradient(40% 50% at 90% 80%, rgba(169,209,255,.6), transparent 70%),
    #F5FBF9;
}

/* 10 · Капля крупным планом (для hero) */
.bg-macro {
  background:
    radial-gradient(22% 30% at 72% 38%, rgba(255,255,255,.95) 0 20%, transparent 60%),
    radial-gradient(38% 50% at 70% 42%, rgba(61,149,245,.35) 0%, rgba(61,149,245,.12) 55%, transparent 72%),
    radial-gradient(60% 70% at 20% 90%, rgba(111,211,164,.28), transparent 70%),
    linear-gradient(170deg, #F1F8FF 0%, #E4F1FF 55%, #EFFAF4 100%);
}

/* 11 · Сетка лаборатории — миллиметровка */
.bg-lab {
  background:
    linear-gradient(rgba(11,99,206,.06) 1px, transparent 1px) 0 0/24px 24px,
    linear-gradient(90deg, rgba(11,99,206,.06) 1px, transparent 1px) 0 0/24px 24px,
    linear-gradient(rgba(11,99,206,.10) 1px, transparent 1px) 0 0/120px 120px,
    linear-gradient(90deg, rgba(11,99,206,.10) 1px, transparent 1px) 0 0/120px 120px,
    #FAFCFF;
}

/* 12 · Растёкшаяся капля — асимметричный «блоб» */
.bg-blob {
  background:
    radial-gradient(45% 35% at 30% 40%, rgba(61,149,245,.22), transparent 70%),
    radial-gradient(30% 45% at 45% 60%, rgba(19,163,168,.18), transparent 70%),
    radial-gradient(35% 30% at 70% 30%, rgba(111,211,164,.20), transparent 70%),
    #FFFFFF;
}

/* 13 · Зима / арктическое ДТ — холодный лёд */
.bg-frost {
  background:
    radial-gradient(40% 50% at 85% 15%, rgba(255,255,255,1), transparent 70%),
    repeating-conic-gradient(from 0deg at 85% 15%, rgba(61,149,245,.04) 0 6deg, transparent 6deg 12deg),
    linear-gradient(180deg, #EAF4FF 0%, #F4F9FF 60%, #FFFFFF 100%);
}

/* 14 · Шахматка ретро-заправки — пол 50-х, едва заметная */
.bg-checker {
  background:
    conic-gradient(rgba(10,26,43,.035) 25%, transparent 0 50%, rgba(10,26,43,.035) 0 75%, transparent 0) 0 0/48px 48px,
    linear-gradient(180deg, #FFFDF8, #FFF6E4);
}

/* Шум-«зерно» поверх любого фона: добавить класс .grain */
.grain::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  opacity: .35; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .04  0 0 0 0 .1  0 0 0 0 .17  0 0 0 .05 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* Анимированный перелив — для hero/CTA, отключается при reduced-motion */
.bg-live { background-size: 160% 160%; animation: bg-drift 22s var(--ease-out) infinite alternate; }
@keyframes bg-drift { 0% { background-position: 0% 0%; } 100% { background-position: 100% 100%; } }
@media (prefers-reduced-motion: reduce) { .bg-live { animation: none; } }