/* Собрано из systems/glow/css/liquid.css сборщиком scripts/ds-build.mjs: правка здесь потеряется. */
/*
 * Жидкий градиент (liquid.js): плашка .lq, поле или плитка .lqf.
 * Сцена нарисована в картинку фоном слоя .lq-img; слой на 4% больше
 * хозяина с каждой стороны и только «дышит» сдвигом и масштабом.
 */

/* --size: наибольшая сторона; в узком месте плашка ужимается, а не
   вылезает (три по 120 не входят в рамку телефона). */
.lq {
  --size: 120px;
  --rim: rgb(255 255 255 / 0.25);
  position: relative;
  width: 100%;
  max-width: var(--size);
  aspect-ratio: 1;
  border-radius: 26%;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--lq-base, transparent);
}
/* Поле: размер и скругление задаёт хозяин, содержимое лежит поверх. */
.lqf {
  --rim: rgb(255 255 255 / 0.3);
  --rim-w: 28px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--lq-base, transparent);
}
.lq > .lq-img,
.lqf > .lq-img {
  position: absolute;
  inset: -4%;
  max-width: none;
  margin: 0;
  z-index: -2;
  background: center / cover no-repeat;
  pointer-events: none;
  animation: lq-breathe 14s ease-in-out infinite alternate;
}
/* Сдвиг и масштаб меньше запаса (4%): край картинки не открывается. */
@keyframes lq-breathe {
  to {
    transform: translate(1.2%, -1%) scale(1.025);
  }
}

/* Кайма поверх сцены, под содержимым: светлый край, как у стекла с
   жидкостью внутри. */
.lq::after,
.lqf::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
}
.lq::after {
  box-shadow:
    inset 0 0 calc(var(--size) * 0.07) calc(var(--size) * 0.012) var(--rim),
    inset 0 0 0 1px rgb(255 255 255 / 0.1);
}
.lqf::after {
  box-shadow:
    inset 0 0 var(--rim-w) 1px var(--rim),
    inset 0 0 0 1px rgb(255 255 255 / 0.08);
}
@supports (corner-shape: squircle) {
  .lq,
  .lq::after {
    border-radius: 40%;
    corner-shape: squircle;
  }
}
@media (prefers-reduced-motion: reduce) {
  .lq > .lq-img,
  .lqf > .lq-img {
    animation: none;
  }
}

.lq[data-liquid='ember'] { --rim: rgb(255 140 70 / 0.55); }
.lq[data-liquid='acid'] { --rim: rgb(240 255 120 / 0.45); }
.lq[data-liquid='bell'] { --rim: rgb(90 230 130 / 0.75); }
.lq[data-liquid='cross'] { --rim: rgb(150 240 255 / 0.65); }
.lq[data-liquid='orchid'] { --rim: rgb(255 170 240 / 0.65); }
.lq[data-liquid='pill'] { --rim: rgb(60 90 170 / 0.3); }

.lqf[data-liquid='paper'] { --rim: rgb(255 255 255 / 0.7); }
.lqf[data-liquid='cyan'] { --rim: rgb(220 252 255 / 0.55); }
.lqf[data-liquid='tangerine'] { --rim: rgb(255 214 140 / 0.55); }
.lqf[data-liquid='green'] { --rim: rgb(200 255 220 / 0.5); }
.lqf[data-liquid='violet'] { --rim: rgb(180 140 255 / 0.45); }
.lqf[data-liquid='lime'] { --rim: rgb(248 255 190 / 0.55); }
.lqf[data-liquid^='pool-'] { --rim: rgb(255 255 255 / 0.1); --rim-w: 18px; }
.lqf[data-liquid='pool-cyan'] { --rim: rgb(62 230 255 / 0.22); }
.lqf[data-liquid='pool-green'] { --rim: rgb(47 224 122 / 0.22); }
.lqf[data-liquid='pool-tangerine'] { --rim: rgb(255 122 26 / 0.24); }
.lqf[data-liquid='pool-violet'] { --rim: rgb(138 92 255 / 0.26); }
.lqf[data-liquid='pool-lime'] { --rim: rgb(212 255 46 / 0.2); }

.lqs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, var(--size, 120px)));
  gap: 14px;
}
/* Образцы полей в пропорции телефона 402 × 874. */
.lqfs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 120px));
  gap: 14px;
}
.lqfs .lqf {
  aspect-ratio: 402 / 874;
  border-radius: 22px;
}