/* Световые подложки на градиентах, CSS-версия glow.svg. Соты — маской из honeycomb.svg.
   <div class="glow glow--hero" style="--glow: var(--rest-accent)"></div>
   Переменные: --glow, --glow-2, --glow-alpha (0.42), --glow-size (58%). */

.glow {
  --glow: var(--honey-500);
  --glow-2: var(--glow);
  --glow-alpha: .42;
  --glow-size: 58%;

  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(var(--glow-size) 62% at 26% 22%,
      color-mix(in oklab, var(--glow) calc(var(--glow-alpha) * 100%), transparent) 0%,
      color-mix(in oklab, var(--glow) calc(var(--glow-alpha) * 32%), transparent) 46%,
      transparent 72%),
    radial-gradient(52% 54% at 78% 68%,
      color-mix(in oklab, var(--glow-2) calc(var(--glow-alpha) * 62%), transparent) 0%,
      transparent 68%);
}

/* Фолбэк для движков без color-mix: то же пятно, но фиксированной прозрачностью. */
@supports not (background: color-mix(in oklab, red 50%, transparent)) {
  .glow {
    background:
      radial-gradient(var(--glow-size) 62% at 26% 22%, var(--glow) 0%, transparent 62%),
      radial-gradient(52% 54% at 78% 68%, var(--glow-2) 0%, transparent 64%);
    opacity: .34;
  }
}

/* Hero: пятно уходит вверх, низ кадра остаётся тёмным под текст. */
.glow--hero {
  --glow-size: 72%;
  background:
    radial-gradient(var(--glow-size) 58% at 50% 4%,
      color-mix(in oklab, var(--glow) calc(var(--glow-alpha) * 100%), transparent) 0%,
      transparent 70%),
    radial-gradient(46% 40% at 84% 46%,
      color-mix(in oklab, var(--glow-2) calc(var(--glow-alpha) * 54%), transparent) 0%,
      transparent 72%);
}

/* Сцена: узкий столб света снизу — для страницы бара. */
.glow--stage {
  --glow-size: 38%;
  background:
    radial-gradient(var(--glow-size) 68% at 50% 108%,
      color-mix(in oklab, var(--glow) calc(var(--glow-alpha) * 120%), transparent) 0%,
      transparent 66%),
    radial-gradient(80% 40% at 50% 100%,
      color-mix(in oklab, var(--glow-2) calc(var(--glow-alpha) * 40%), transparent) 0%,
      transparent 74%);
}

@supports not (background: color-mix(in oklab, red 50%, transparent)) {
  .glow--hero {
    background:
      radial-gradient(var(--glow-size) 58% at 50% 4%, var(--glow) 0%, transparent 70%),
      radial-gradient(46% 40% at 84% 46%, var(--glow-2) 0%, transparent 72%);
  }
  .glow--stage {
    background:
      radial-gradient(var(--glow-size) 68% at 50% 108%, var(--glow) 0%, transparent 66%),
      radial-gradient(80% 40% at 50% 100%, var(--glow-2) 0%, transparent 74%);
  }
}

/* Мягкое подсвечивание карточки/секции — самое слабое из трёх. */
.glow--soft { --glow-alpha: .18; }

/* Соты поверх света. Решётка не описана здесь: тайл берётся из
   honeycomb.svg и работает маской, поэтому цвет живёт в CSS, а форма —
   в одном-единственном файле. */
.honeycomb {
  --honeycomb: var(--honey-500);
  --honeycomb-alpha: .16;
  --honeycomb-scale: 1;

  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: var(--honeycomb);
  opacity: var(--honeycomb-alpha);

  -webkit-mask-image: url("honeycomb.svg");
  mask-image: url("honeycomb.svg");
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  /* период решётки из honeycomb.svg: 34.641 × 60 при R=20 */
  -webkit-mask-size: calc(34.641px * var(--honeycomb-scale) * 3)
                     calc(60px * var(--honeycomb-scale) * 3);
  mask-size: calc(34.641px * var(--honeycomb-scale) * 3)
             calc(60px * var(--honeycomb-scale) * 3);
}

@media (prefers-reduced-motion: reduce) {
  .glow, .honeycomb { transition: none !important; animation: none !important; }
}