/* Свечение WAI: размытые пятна цветов направлений на фоне.
   Одно на экран, за одним главным элементом: вход, пустое состояние, герой, обложка, награда.
   Цвета и размытие — токены группы glow в tokens/wai.tokens.json; значения в скобках — запасные.

   <section class="glow-host">
     <div class="glow glow-drift" aria-hidden="true"></div>
     …сплошная белая карточка или заголовок…
   </section>

   Тон: без класса — два цвета WAI; glow-school или glow-adult — один цвет направления.
   Раскладка: без класса — за карточкой по центру; glow-top — под героем сверху; glow-bottom — снизу.
   glow-drift — медленный дрейф, сам выключается при «уменьшить движение». */

.glow-host { position: relative; isolation: isolate; overflow: hidden; }

.glow {
  --glow-1: var(--glow-school, rgba(250, 197, 129, .55));
  --glow-2: var(--glow-adult, rgba(237, 157, 196, .45));
  --glow-3: var(--glow-school-soft, rgba(250, 197, 129, .25));
  --glow-1-at: 30% 28%;
  --glow-2-at: 72% 70%;
  --glow-3-at: 75% 22%;
  position: absolute; inset: -20%; z-index: -1; pointer-events: none;
  /* спад к краю плавный: без резкого обрыва на краю пятна не видно колец */
  background:
    radial-gradient(38% 42% at var(--glow-1-at), var(--glow-1), color-mix(in srgb, var(--glow-1) 70%, transparent) 18%, color-mix(in srgb, var(--glow-1) 38%, transparent) 36%, color-mix(in srgb, var(--glow-1) 14%, transparent) 52%, color-mix(in srgb, var(--glow-1) 3%, transparent) 64%, transparent 70%),
    radial-gradient(34% 40% at var(--glow-2-at), var(--glow-2), color-mix(in srgb, var(--glow-2) 70%, transparent) 18%, color-mix(in srgb, var(--glow-2) 38%, transparent) 36%, color-mix(in srgb, var(--glow-2) 14%, transparent) 52%, color-mix(in srgb, var(--glow-2) 3%, transparent) 64%, transparent 70%),
    radial-gradient(30% 30% at var(--glow-3-at), var(--glow-3), color-mix(in srgb, var(--glow-3) 70%, transparent) 18%, color-mix(in srgb, var(--glow-3) 38%, transparent) 36%, color-mix(in srgb, var(--glow-3) 14%, transparent) 52%, color-mix(in srgb, var(--glow-3) 3%, transparent) 64%, transparent 70%);
  filter: blur(var(--glow-blur, 20px));
}

/* Тон: один цвет направления */
.glow-school {
  --glow-1: var(--glow-school, rgba(250, 197, 129, .55));
  --glow-2: var(--glow-school, rgba(250, 197, 129, .55));
  --glow-3: var(--glow-school-soft, rgba(250, 197, 129, .25));
}
.glow-adult {
  --glow-1: var(--glow-adult, rgba(237, 157, 196, .45));
  --glow-2: var(--glow-adult, rgba(237, 157, 196, .45));
  --glow-3: var(--glow-adult-soft, rgba(237, 157, 196, .22));
}

/* Раскладка */
.glow-top { --glow-1-at: 22% 16%; --glow-2-at: 80% 24%; --glow-3-at: 52% 2%; }
.glow-bottom { --glow-1-at: 26% 86%; --glow-2-at: 76% 80%; --glow-3-at: 50% 100%; }

/* Дрейф */
.glow-drift { animation: wai-glow-drift var(--glow-drift, 18s) ease-in-out infinite alternate; }
@keyframes wai-glow-drift { to { transform: translate3d(2%, -2%, 0) scale(1.04); } }
@media (prefers-reduced-motion: reduce) { .glow-drift { animation: none; } }