/* Декоративный фон. Разметку собирает ui/backdrop.js.

   Всё лежит внутри колонки и обрезается её скруглением.
   Ничего не перехватывает нажатия: pointer-events: none на всём слое. */

.backdrop {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

/* ── Слой 2: золотое пятно за правым верхним углом ──────────── */

.backdrop__glow {
  position: absolute;
  top: -34cqw;
  right: -46cqw;
  width: 128cqw;
  height: 128cqw;
  z-index: 1;
  border-radius: 50%;
  background: radial-gradient(circle,
    var(--ambient-core) 0%,
    var(--ambient-mid) 30%,
    transparent 70%);
  animation: glow-breathe 12s var(--ease) infinite;
}

/* Очень медленное «дыхание» — заметно не движение, а то,
   что картинка не мёртвая. */
@keyframes glow-breathe {
  0%, 100% { opacity: .78; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.04); }
}

/* ── Слой 3: линии орбит ───────────────────────────────────── */

.backdrop__orbits {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
}

.orbit {
  fill: none;
  stroke: url(#orbit-fade);
  stroke-width: .5;
}

/* Часть окружностей ярче — иначе фон читается как сетка,
   а не как пространство. */
.orbit--lit { stroke-width: 1; }

/* Градиент вдоль линии: она то почти исчезает, то подсвечивается. */
.fade-0 { stop-color: transparent; }
.fade-1 { stop-color: var(--orbit-dim); }
.fade-2 { stop-color: var(--orbit-lit); }

/* ── Слой 4: частицы на орбитах ────────────────────────────── */

.dot {
  fill: var(--dot);
  opacity: 0;
  animation: dot-life var(--dur) linear infinite;
  animation-delay: var(--delay);
  filter:
    drop-shadow(0 0 2px var(--dot-near))
    drop-shadow(0 0 5px var(--dot-mid))
    drop-shadow(0 0 9px var(--dot-far));
}

.dot--lit { animation-name: dot-life-bright; }

/* Точка появляется, разгорается, проходит дугу и растворяется.
   Движение по орбите задаёт SMIL, здесь только яркость.

   Масштаб намеренно не трогаем: SMIL двигает точку через тот же
   transform, и CSS-анимация масштаба сбила бы её с орбиты.

   linear здесь тоже намеренно: у бесконечного цикла любое смягчение
   даёт заметный рывок на стыке витков. */
@keyframes dot-life {
  0%   { opacity: 0; }
  10%  { opacity: .25; }
  25%  { opacity: .85; }
  65%  { opacity: .6; }
  90%  { opacity: .12; }
  100% { opacity: 0; }
}

@keyframes dot-life-bright {
  0%   { opacity: 0; }
  10%  { opacity: .3; }
  25%  { opacity: 1; }
  65%  { opacity: .7; }
  90%  { opacity: .15; }
  100% { opacity: 0; }
}

/* ── Слой 5: виньетка ──────────────────────────────────────── */

.backdrop__vignette {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: radial-gradient(120% 80% at 50% 35%,
    transparent 40%, var(--vignette) 100%);
}