/* Эффект «пакетика с жидкостью» (utils/js/liquid.js) */

/* WebGL-слой под всем содержимым; виден только пока идёт нажатие */
.liquid-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  z-index: -1;
  pointer-events: none;
  visibility: hidden;
}

html.liquid-active .liquid-layer {
  visibility: visible;
}

/* На время эффекта фон секций рисует слой, а сетки «G» — его текстуры */
html.liquid-active [data-liquid-surface] {
  background: transparent !important;
}

html.liquid-active [data-liquid-net] {
  opacity: 0 !important;
}

/* Запасной вариант без WebGL: мягкий световой блик в месте нажатия */
.liquid-drop {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 34%,
      rgba(165, 232, 255, 0.22) 0%,
      rgba(0, 183, 255, 0.08) 45%,
      rgba(0, 183, 255, 0) 70%);
  box-shadow: inset 0 0 18px rgba(165, 232, 255, 0.18);
  mix-blend-mode: screen;
}