/* =====================================================================
   Брендируемый 2.5D-параллакс-фон (этап 2, Tier 0).
   Объекты = глянцевые «жетоны» с лого бренда; цвета из бренд-токенов.
   Параллакс: transform (JS-vars --sy/--gx/--gy + глубина --d).
   Ambient-дрейф: независимое свойство `translate` (композится с transform).
   Reduced-motion / слабые устройства: класс rf-bg--static → без движения.
   ===================================================================== */

/* контент над фоном */
body.participant-page .container { position: relative; z-index: 1; }

.rf-bg{
  position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  /* contain: strict убран 2026-07-15 (kise): ломал pan-скролл в MAX WebView на Android */
  opacity: var(--bg-opacity, 1); /* общая прозрачность фона 0–100 (помимо градиентного скрима) */
}
.rf-bg-base{
  position: absolute; inset: 0;
  background:
    radial-gradient(135% 85% at 50% -18%, var(--brand-primary-soft), transparent 58%),
    radial-gradient(120% 70% at 90% 110%, color-mix(in srgb, var(--feature-gradient-to) 22%, transparent), transparent 55%),
    var(--surface-page);
}
.rf-bg-objects{ position: absolute; inset: 0; opacity: .9; }

/* ===== типы фона ===== */
/* Градиент (фирменный) */
.rf-bg--gradient .rf-bg-grad{
  position: absolute; inset: 0;
  background: linear-gradient(var(--bg-grad-angle, 135deg),
    var(--bg-grad-from, var(--feature-gradient-from)),
    var(--bg-grad-to, var(--feature-gradient-to)));
}
.rf-bg--gradient.is-animated .rf-bg-grad{ background-size: 200% 200%; animation: rf-bg-drift 16s ease-in-out infinite alternate; }
@keyframes rf-bg-drift{ from{ background-position: 0% 50%; } to{ background-position: 100% 50%; } }
/* Паттерн (тайл лого/картинки) */
.rf-bg--pattern .rf-bg-pattern{
  position: absolute; inset: 0;
  background: var(--bg-pattern) repeat; background-size: var(--bg-pattern-size, 72px);
  opacity: var(--bg-pattern-opacity, .12);
}
.rf-bg--pattern.is-tinted .rf-bg-pattern{
  background: var(--brand-primary);
  -webkit-mask: var(--bg-pattern) repeat; mask: var(--bg-pattern) repeat;
  -webkit-mask-size: var(--bg-pattern-size, 72px); mask-size: var(--bg-pattern-size, 72px);
}
/* Картинка */
.rf-bg--image .rf-bg-img{
  position: absolute; inset: 0; background: var(--bg-image) center / cover no-repeat;
  filter: blur(var(--bg-image-blur, 0px));
}
.rf-bg--image.is-contain .rf-bg-img{ background-size: contain; }
.rf-bg--image .rf-bg-img-scrim{
  position: absolute; inset: 0;
  background: color-mix(in srgb, var(--surface-page) calc(var(--bg-image-scrim, 40) * 1%), transparent);
}
/* скрим: мягко вуалирует объекты в центральной зоне (где контент) → текст читаем,
   по краям объекты остаются яркими. Над объектами, под контентом. */
/* Верхний скрим: прячет шары почти на всей видимой зоне — чисто и однородно.
   Бренд-тинт сверху (чтобы не серо) + плотный surface-page, держим плотность до ~30%,
   плавный уход в прозрачность к ~80% → шары остаются только у самого низа.
   Лежит над объектами (z3), но под контентом. */
.rf-bg-scrim{
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    radial-gradient(120% 60% at 50% -10%, var(--brand-primary-soft), transparent 60%),
    linear-gradient(to bottom,
      var(--surface-page) 0%,
      var(--surface-page) 30%,
      color-mix(in srgb, var(--surface-page) 78%, transparent) 56%,
      transparent 80%);
}

/* ОБЪЕКТ = маленький круглый глянцевый ШАР с лого-силуэтом. Единственный режим.
   Обёртка: параллакс/дрейф + отбрасываемая тень (объём «парения»). */
.rf-bg-obj{
  position: absolute;
  width: var(--sz, 72px); height: var(--sz, 72px);
  rotate: var(--rot, 0deg);
  transform: translate3d(
      calc(var(--gx, 0px) * var(--d)),
      calc(var(--sy, 0px) * var(--d) * -1 + var(--gy, 0px) * var(--d)),
      0);
  will-change: transform;
  animation: rf-float var(--dur, 8s) ease-in-out infinite alternate;
  animation-delay: var(--delay, 0s);
  filter: drop-shadow(0 14px 22px var(--brand-shadow));
}
/* ШАР = лого ЗАПОЛНЯЕТ всю сферу (cover). Бренд-градиент — подложка под прозрачные зоны лого. */
.rf-bg-obj-ball{
  position: relative; display: flex; width: 100%; height: 100%;
  align-items: center; justify-content: center; overflow: hidden;
  border-radius: 50%;
  background:
    var(--logo, none) center / cover no-repeat,
    linear-gradient(150deg, var(--brand-primary), var(--feature-gradient-to));
}
.rf-bg-obj-ball.is-mono{
  background: linear-gradient(150deg, var(--brand-primary), var(--feature-gradient-to));
}
/* ОБЪЁМ ПОВЕРХ лого: зеркальный блик сверху-слева + тёмная нижняя «сердцевина» → стекло сферы */
.rf-bg-obj-gloss{
  position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background:
    radial-gradient(58% 48% at 32% 24%, rgba(255,255,255,.55), rgba(255,255,255,0) 56%),
    radial-gradient(135% 110% at 50% 128%, rgba(0,0,0,.42), rgba(0,0,0,0) 56%);
  box-shadow: inset 0 2px 5px rgba(255,255,255,.4);
}
.rf-bg-obj-mono{
  position: relative; font-weight: 800; font-size: calc(var(--sz, 72px) * .44); line-height: 1;
  color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.3);
}

@keyframes rf-float { from { translate: -4px -11px; } to { translate: 4px 11px; } }

/* depth: дальние мельче/блёклые/мягче */
.rf-bg-obj--1 { --sz: 66px; --d: .30; --rot:-6deg; --dur:7.5s; --delay:-1s;   top: 7%;  left: 10%; }
.rf-bg-obj--2 { --sz: 42px; --d: .16; --rot:8deg;  --dur:9s;   --delay:-3s;   top: 16%; left: 73%; opacity:.85; }
.rf-bg-obj--3 { --sz: 86px; --d: .44; --rot:5deg;  --dur:8s;   --delay:-2s;   top: 38%; left: 16%; }
.rf-bg-obj--4 { --sz: 52px; --d: .22; --rot:-10deg;--dur:10s;  --delay:-4s;   top: 50%; left: 80%; opacity:.88; }
.rf-bg-obj--5 { --sz:100px; --d: .52; --rot:4deg;  --dur:9.5s; --delay:-1.5s; top: 69%; left: 40%; }
.rf-bg-obj--6 { --sz: 44px; --d: .18; --rot:12deg; --dur:11s;  --delay:-5s;   top: 84%; left: 14%; opacity:.8; }
.rf-bg-obj--7 { --sz: 72px; --d: .36; --rot:-6deg; --dur:8.5s; --delay:-2.5s; top: 88%; left: 72%; }

/* явная статика (bg=static) и reduced-motion: без дрейфа и параллакса */
.rf-bg--static .rf-bg-obj{ animation: none; transform: none; }
@media (prefers-reduced-motion: reduce){
  .rf-bg-obj{ animation: none; transform: none; }
}