/*
 * Фон главного экрана кабинета: 3D-сцена Spline + локальный запасной фон.
 *
 * Как устроены слои (снизу вверх):
 *   1) .gc-scene-bg          — сам слой. Его CSS-градиенты И ЕСТЬ локальный запасной фон:
 *                              он рисуется сразу, без интернета, и остаётся виден,
 *                              если сцена Spline не открылась.
 *   2) .gc-scene-frame       — iframe со сценой (подключается скриптом с задержкой).
 *   3) .gc-scene-shade       — затемняющая подложка, чтобы цифры и текст читались.
 *   4) частицы (particles-bg.js, z-index:0) — прежняя анимация кабинета, её не убирали.
 *   5) интерфейс главного экрана.
 *
 * Почему z-index:-1, а не 0: положительный/нулевой z-index у позиционированного элемента
 * рисуется ПОВЕРХ обычного (непозиционированного) содержимого — слой закрыл бы дашборд.
 * Поэтому #view-overview делаем изолированным стаканом (isolation:isolate), а слой уводим
 * на -1: он оказывается под содержимым секции, но над её собственным фоном.
 *
 * Сцена «Robot follow cursor» снята на ЧЁРНОМ фоне, поэтому инвертировать кадр не нужно
 * (в мессенджере сцена NEXBOT светлая — там инверсия обязательна, тут нет).
 */

#view-overview {
  isolation: isolate;
  /* Полупрозрачность нужна только личному Main Window: сеть остаётся видна под карточками,
     но остальные модули CRM сохраняют прежние плотные панели. */
  --panel: rgba(24, 24, 27, 0.82);
  --panel-light: rgba(39, 39, 42, 0.9);
}

.gc-scene-bg {
  position: absolute;
  /* небольшой выход за отбивку .app-view (padding 24px), чтобы фон не обрывался рамкой */
  inset: -24px;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  /* ЛОКАЛЬНЫЙ ЗАПАСНОЙ ФОН — работает всегда, даже без сети */
  background:
    radial-gradient(58% 46% at 46% 64%, rgba(139, 92, 246, 0.20), rgba(9, 9, 11, 0) 72%),
    radial-gradient(42% 34% at 80% 16%, rgba(16, 185, 129, 0.13), rgba(9, 9, 11, 0) 72%),
    linear-gradient(160deg, #0b0f14 0%, #09090b 55%, #100b16 100%);
}

/* Кадр со сценой. Масштаб 1.22 нужен, чтобы за границы кадра ушли круглые кнопки
   самого Spline в правом верхнем углу — в кабинете они лишние. */
.gc-scene-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  transform: scale(1.22);
  transform-origin: 50% 55%;
  opacity: 0;
  transition: opacity 0.7s ease;
  pointer-events: none;
}
/* Показываем кадр только когда сцена реально загрузилась — иначе виден белый прямоугольник. */
.gc-scene-bg[data-scene="ready"] .gc-scene-frame { opacity: 0.9; }

/* Затемняющая подложка нужна ТОЛЬКО под 3D-сцену: она снята в чужой палитре и без
   затемнения спорила бы с текстом. Нейросеть рисуем мы сами и яркость задаём в коде,
   поэтому в режиме нейросети подложку убираем — иначе она гасила бы анимацию,
   и получилась бы та же «ровная тёмная поверхность». */
.gc-scene-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Без CSS-перехода: включение подложки — это переключение режима, а не украшение.
     Плавность даёт сам кадр сцены (он проявляется через opacity). */
  opacity: 0;
  background:
    radial-gradient(70% 55% at 46% 62%, rgba(9, 9, 11, 0.30), rgba(9, 9, 11, 0.68) 78%),
    linear-gradient(rgba(9, 9, 11, 0.42), rgba(9, 9, 11, 0.62));
}
.gc-scene-bg[data-mode="scene"] .gc-scene-shade { opacity: 1; }

/* Канвас нейросети. Лежит внутри того же слоя, то есть под содержимым кабинета.
   Клики не перехватывает — мышь слушается на окне. */
.gc-neural-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
/* Узкий экран и «меньше движения»: анимации нет, скрипт канвас даже не запускает,
   а правило ниже — страховка. */
@media (max-width: 900px) {
  .gc-neural-canvas { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .gc-neural-canvas { display: none; }
}

/* Узкий экран: тяжёлый 3D-кадр не грузим совсем — там важнее скорость.
   Скрипт в этом случае iframe даже не создаёт, а правило ниже — страховка. */
@media (max-width: 900px) {
  .gc-scene-frame { display: none; }
}
/* Системная настройка «меньше движения» сильнее любых наших настроек. */
@media (prefers-reduced-motion: reduce) {
  .gc-scene-frame { display: none; transition: none; }
}