/*
 * Страница «Контакты» — живой фон в тему связи: бумажные самолётики летят
 * по диагонали, от точки на карте расходятся волны сигнала, «собаки» дышат.
 *
 * Слой декоративный: под контентом, кликов не перехватывает, от скринридеров
 * скрыт. Движение — только transform и opacity, перерисовки нет.
 *
 * Нумерация фигур через nth-child, а не nth-of-type: все фигуры — span,
 * и nth-of-type считал бы их вперемешку (на «Отзывах» на этом уже обожглись).
 */

.conbg {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden; pointer-events: none;
}
.page--contacts { position: relative; }
.page--contacts > *:not(.conbg) { position: relative; z-index: 1; }

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

/* ---------- САМОЛЁТИКИ: летят по диагонали и уходят ---------- */
.conbg__plane { animation: planeFly var(--dur, 22s) linear var(--delay, 0s) infinite; }
@keyframes planeFly {
  0%   { opacity: 0;   transform: translate3d(-40px, 30px, 0) rotate(-6deg); }
  10%  { opacity: .55; }
  75%  { opacity: .35; }
  100% { opacity: 0;   transform: translate3d(240px, -150px, 0) rotate(8deg); }
}
.conbg__item:nth-child(1) { --cc: #8B5CFF; --dur: 21s; --delay: 0s;  left: 1%;  top: 64%; width: 46px; }
.conbg__item:nth-child(2) { --cc: #16C8C0; --dur: 28s; --delay: 6s;  left: 52%; top: 78%; width: 34px; }
.conbg__item:nth-child(3) { --cc: #C6FF00; --dur: 25s; --delay: 13s; left: 66%; top: 40%; width: 32px; }

/* ---------- ВОЛНЫ СИГНАЛА: расходятся от точки ---------- */
.conbg__signal { animation: none; }
.conbg__signal .ring { transform-box: view-box; transform-origin: 30px 30px; opacity: 0; }
.conbg__signal .ring--1 { animation: ringOut var(--dur, 5s) ease-out var(--delay, 0s) infinite; }
.conbg__signal .ring--2 { animation: ringOut var(--dur, 5s) ease-out calc(var(--delay, 0s) + 1.4s) infinite; }
.conbg__signal .ring--3 { animation: ringOut var(--dur, 5s) ease-out calc(var(--delay, 0s) + 2.8s) infinite; }
@keyframes ringOut {
  0%   { opacity: .6; transform: scale(.25); }
  100% { opacity: 0;  transform: scale(1); }
}
/* сама точка и её лёгкая пульсация */
.conbg__signal .dot { animation: dotPulse var(--dur, 5s) ease-in-out var(--delay, 0s) infinite; }
@keyframes dotPulse { 0%, 100% { opacity: .55; } 50% { opacity: .9; } }

.conbg__item:nth-child(4) { --cc: #FF6A2B; --dur: 5.4s; --delay: 0s;   left: 80%; top: 20%; width: 120px; opacity: 1; }
.conbg__item:nth-child(5) { --cc: #2E6BFF; --dur: 6.2s; --delay: 2.2s; left: 8%;  top: 82%; width: 92px;  opacity: 1; }

/* ---------- «СОБАКИ»: медленно дышат ---------- */
.conbg__at {
  font-family: var(--head); font-weight: 700; line-height: 1;
  animation: atBreathe var(--dur, 20s) ease-in-out var(--delay, 0s) infinite;
}
@keyframes atBreathe {
  0%, 100% { opacity: .12; transform: scale(1) rotate(-2deg); }
  50%      { opacity: .26; transform: scale(1.07) rotate(2deg); }
}
.conbg__item:nth-child(6) { --cc: #FF2E7E; --dur: 19s; --delay: 1s;  left: 3%;  top: 8%;    font-size: clamp(84px, 10vw, 150px); }
.conbg__item:nth-child(7) { --cc: #8B5CFF; --dur: 24s; --delay: 9s;  right: 5%; bottom: 6%; font-size: clamp(70px, 8vw, 122px); }

/* ---------- ТЕЛЕФОН ---------- */
@media (max-width: 760px) {
  /* мелочь на узком экране превращается в мусор — оставляем крупное */
  .conbg__item:nth-child(3),
  .conbg__item:nth-child(5) { display: none; }
  .conbg__item:nth-child(6) { font-size: 82px; }
  .conbg__item:nth-child(7) { font-size: 66px; }
}

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