/*
   PVlab Blobs — анимированный «лава-лампа» фон из размытых SVG-кругов.

   Сцена занимает родителя (position: relative или fixed). Каждый <g>-обёртка
   получает один из дрифтовых keyframe-движений с разным timing'ом — кадры
   разъезжаются «случайно».

   В версии 1.1 анимация специально приглушена — медленные long-period дрифты
   с малой амплитудой (~6-10% относительно своего bbox), близко к статичному
   состоянию, но всё ещё «живое» движение.

   Версия 1.1 — апрель 2026.
*/

:root {
  --pvlab-blob-cyan:    #3DB6FF;
  --pvlab-blob-blue:    #6EC6FF;
  --pvlab-blob-violet:  #B5A8F4;
  --pvlab-blob-violet2: #9C8FF0;
  --pvlab-blob-pink:    #F5B6D6;
  --pvlab-blob-sky:     #BDE5FF;
}

.pvlab-blob-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: var(--pvlab-z-back, 0);
}

.pvlab-blob-stage svg {
  width: 100%;
  height: 100%;
  display: block;
}

.pvlab-blob {
  transform-origin: center;
  transform-box: fill-box;
  will-change: transform;
}

/* ── Цвета ───────────────────────────────────────────────────────────────── */

.pvlab-blob--cyan    { fill: var(--pvlab-blob-cyan); }
.pvlab-blob--blue    { fill: var(--pvlab-blob-blue); }
.pvlab-blob--violet  { fill: var(--pvlab-blob-violet); }
.pvlab-blob--violet2 { fill: var(--pvlab-blob-violet2); }
.pvlab-blob--pink    { fill: var(--pvlab-blob-pink); }
.pvlab-blob--sky     { fill: var(--pvlab-blob-sky); }

/* ── Дрифты — путешествуют по всему экрану, период разный (асинхронно)
   чтобы паттерн не повторялся узнаваемо. Длительности 15-31s с разными
   delay'ями (отрицательные — чтобы каждый blob стартовал из середины
   своей кривой, без «общего нулевого момента»). */

.pvlab-blob--drift-1 { animation: pvlab-blob-drift-1 17s ease-in-out infinite; }
.pvlab-blob--drift-2 { animation: pvlab-blob-drift-2 23s ease-in-out infinite; animation-delay: -5s; }
.pvlab-blob--drift-3 { animation: pvlab-blob-drift-3 15s ease-in-out infinite; animation-delay: -9s; }
.pvlab-blob--drift-4 { animation: pvlab-blob-drift-4 31s ease-in-out infinite; animation-delay: -14s; }
.pvlab-blob--drift-5 { animation: pvlab-blob-drift-5 20s ease-in-out infinite; animation-delay: -19s; }

/* Амплитуды большие — translate 50-80% от своего bbox + scale 0.6-1.6.
   В сочетании с SVG-blur'ом получается ощущение «гуляющего по экрану»
   пятна — кружки реально путешествуют почти из угла в угол. */
@keyframes pvlab-blob-drift-1 {
  0%, 100% { transform: translate(0, 0)        scale(1);    }
  20%      { transform: translate(60%, -50%)   scale(1.4);  }
  40%      { transform: translate(-80%, 30%)   scale(0.75); }
  60%      { transform: translate(40%, 70%)    scale(1.25); }
  80%      { transform: translate(-30%, -60%)  scale(0.9);  }
}

@keyframes pvlab-blob-drift-2 {
  0%, 100% { transform: translate(0, 0)        scale(1);    }
  25%      { transform: translate(-70%, 60%)   scale(0.7);  }
  50%      { transform: translate(80%, -40%)   scale(1.5);  }
  75%      { transform: translate(-20%, -70%)  scale(1.1);  }
}

@keyframes pvlab-blob-drift-3 {
  0%, 100% { transform: translate(0, 0)        scale(1);    }
  33%      { transform: translate(70%, 80%)    scale(1.35); }
  66%      { transform: translate(-60%, -30%)  scale(0.7);  }
}

@keyframes pvlab-blob-drift-4 {
  0%, 100% { transform: translate(0, 0)        scale(1);    }
  25%      { transform: translate(-50%, -70%)  scale(1.3);  }
  50%      { transform: translate(70%, 50%)    scale(0.8);  }
  75%      { transform: translate(-30%, 80%)   scale(1.45); }
}

@keyframes pvlab-blob-drift-5 {
  0%, 100% { transform: translate(0, 0)        scale(1);    }
  30%      { transform: translate(50%, -80%)   scale(1.55); }
  60%      { transform: translate(-80%, 20%)   scale(0.7);  }
  85%      { transform: translate(60%, 60%)    scale(1.2);  }
}

@media (prefers-reduced-motion: reduce) {
  .pvlab-blob {
    animation: none !important;
  }
}