/* Стили для InteractiveDataGrid + grain-оверлей.
 * Подключай ПОСЛЕ tokens.css / landing.css.
 *
 * Поддерживается два режима:
 *  1) Глобальный фон — фиксирован поверх вьюпорта (за всем контентом):
 *     <div class="site-bg" aria-hidden="true">
 *       <canvas class="site-bg__canvas" id="site-bg-canvas"></canvas>
 *       <div class="site-bg__noise"></div>
 *       <div class="site-bg__vignette"></div>
 *     </div>
 *
 *  2) Локальный фон секции — внутри hero:
 *     <section class="hero hero--data-grid"> … </section>
 */

/* ============ 1) Глобальный фон ============ */

.site-bg {
  position: fixed;
  inset: 0;
  z-index: -1;          /* строго ПОД всем контентом */
  pointer-events: none;
  background: #0a0a0e;
  overflow: hidden;
  isolation: isolate;
}

.site-bg__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.site-bg__noise {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.07;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
}

.site-bg__vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% 50%,
      rgba(10, 10, 14, 0) 40%,
      rgba(10, 10, 14, 0.55) 75%,
      rgba(10, 10, 14, 0.95) 100%);
}

/* Когда есть глобальный фон — делаем тело прозрачным, чтобы фон не перекрывался,
 * и подавляем брендовое золотое свечение в .hero, чтобы оно не дробило сеть. */
body:has(.site-bg) {
  background: transparent;
}

body:has(.site-bg) .hero::before {
  display: none;
}

/* На случай браузеров без :has(...) — даём явный класс-помощник.
 * В разметке на body он не обязателен, но удобен как fallback. */
body.has-site-bg {
  background: transparent;
}

body.has-site-bg .hero::before {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .site-bg__noise { display: none; }
}

/* ============ 2) Локальный фон hero (back-compat) ============ */

.hero--data-grid {
  position: relative;
  overflow: hidden;
  background: #0a0a0e;
  isolation: isolate;
}

.hero--data-grid > .hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  z-index: 0;
}

.hero--data-grid > .hero__noise {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.07;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
}

.hero--data-grid > .hero__vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(120% 80% at 50% 50%,
      rgba(10, 10, 14, 0) 40%,
      rgba(10, 10, 14, 0.55) 75%,
      rgba(10, 10, 14, 0.95) 100%);
}

.hero--data-grid > .container,
.hero--data-grid .hero__inner,
.hero--data-grid .hero__content {
  position: relative;
  z-index: 2;
  color: #fff;
}

.hero--data-grid::before {
  opacity: 0.35;
  z-index: 1;
}