/*
 * Страница «Отзывы» — живой фон в тему: звёзды рейтинга всплывают,
 * облачка сообщений покачиваются, кавычки дышат.
 *
 * Слой чисто декоративный: лежит под контентом, кликов не перехватывает,
 * от скринридеров скрыт. Движение — только transform и opacity, поэтому
 * страница не перерисовывается и прокрутка остаётся ровной.
 */

.revbg {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden; pointer-events: none;
}
/* контент поднимаем над фоном */
.page--reviews { position: relative; }
.page--reviews > *:not(.revbg) { position: relative; z-index: 1; }

.revbg__item { position: absolute; color: var(--rc, var(--accent)); opacity: 0; }
.revbg__item svg { width: 100%; height: auto; display: block; }

/* ---------- ЗВЁЗДЫ: всплывают снизу вверх ---------- */
.revbg__star { animation: starFloat var(--dur, 26s) linear var(--delay, 0s) infinite; }
@keyframes starFloat {
  0%   { opacity: 0;   transform: translate3d(0, 40px, 0) rotate(-12deg) scale(.85); }
  12%  { opacity: .8; }
  80%  { opacity: .5; }
  100% { opacity: 0;   transform: translate3d(0, -260px, 0) rotate(14deg) scale(1.05); }
}

/* Нумеруем через nth-child: все фигуры — span, и nth-of-type считал бы их
   вперемешку, из-за чего облачкам не доставалось ни размера, ни позиции. */
.revbg__item:nth-child(1) { --rc: #FF6A2B; --dur: 24s; --delay: 0s;  left: 5%;  top: 40%; width: 52px; }
.revbg__item:nth-child(2) { --rc: #C6FF00; --dur: 31s; --delay: 3s;  left: 22%; top: 58%; width: 30px; }
.revbg__item:nth-child(3) { --rc: #FF2E7E; --dur: 27s; --delay: 7s;  left: 78%; top: 30%; width: 54px; }
.revbg__item:nth-child(4) { --rc: #16C8C0; --dur: 34s; --delay: 11s; left: 90%; top: 70%; width: 34px; }
.revbg__item:nth-child(5) { --rc: #8B5CFF; --dur: 29s; --delay: 5s;  left: 46%; top: 84%; width: 42px; }
.revbg__item:nth-child(6) { --rc: #2E6BFF; --dur: 37s; --delay: 15s; left: 68%; top: 16%; width: 30px; }

/* ---------- ОБЛАЧКА СООБЩЕНИЙ: покачиваются ---------- */
.revbg__bubble { animation: bubbleSway var(--dur, 18s) ease-in-out var(--delay, 0s) infinite; }
@keyframes bubbleSway {
  0%   { opacity: 0;   transform: translate3d(0, 12px, 0) rotate(-4deg); }
  20%  { opacity: .45; }
  50%  { transform: translate3d(14px, -10px, 0) rotate(3deg); }
  80%  { opacity: .45; }
  100% { opacity: 0;   transform: translate3d(0, 12px, 0) rotate(-4deg); }
}
.revbg__item:nth-child(7) { --rc: #FF6A2B; --dur: 19s; --delay: 1s;  left: 11%; top: 46%; width: 88px; }
.revbg__item:nth-child(8) { --rc: #16C8C0; --dur: 23s; --delay: 8s;  left: 83%; top: 54%; width: 70px; }
.revbg__item:nth-child(9) { --rc: #C6FF00; --dur: 26s; --delay: 14s; left: 36%; top: 6%;  width: 58px; }

/* ---------- КАВЫЧКИ: медленно дышат ---------- */
.revbg__quote {
  font-family: var(--head); font-weight: 700; line-height: 1;
  animation: quoteBreathe var(--dur, 22s) ease-in-out var(--delay, 0s) infinite;
}
@keyframes quoteBreathe {
  0%, 100% { opacity: .16; transform: scale(1) rotate(0deg); }
  50%      { opacity: .30; transform: scale(1.08) rotate(-3deg); }
}
.revbg__item:nth-child(10) { --rc: #FF2E7E; --dur: 21s; --delay: 2s;  left: 2%;  top: 74%;   font-size: clamp(80px, 10vw, 150px); }
.revbg__item:nth-child(11) { --rc: #8B5CFF; --dur: 25s; --delay: 10s; right: 3%; bottom: 4%; font-size: clamp(72px, 9vw, 132px); }

/* ---------- ТЕЛЕФОН ---------- */
@media (max-width: 760px) {
  /* на узком экране оставляем только крупные фигуры — мелочь превращается в мусор */
  .revbg__item:nth-child(2),
  .revbg__item:nth-child(4),
  .revbg__item:nth-child(6),
  .revbg__item:nth-child(9) { display: none; }
  .revbg__item:nth-child(10) { font-size: 80px; }
  .revbg__item:nth-child(11) { font-size: 68px; }
}

/* Человек попросил меньше движения — фон замирает, но остаётся виден. */
@media (prefers-reduced-motion: reduce) {
  .revbg__item { opacity: .22; animation: none !important; transform: none !important; }
  .revbg__quote { opacity: .14; }
}