/* Оформление вокруг 3D-сцены: сам канвас, виньетка, зерно и HUD полёта.
   Подключается только на index-motion.html - боевой лендинг не трогаем. */

#motion-scene {
  position: fixed;
  inset: 0;
  /* Размер задаёт ТОЛЬКО inset: 0 - он равен экрану. 100vw/100vh отсюда убраны
     (03.09.2026): vw считается вместе с полосой прокрутки, vh на iOS берётся по
     «большому» вьюпорту - холст выходил шире экрана, и в Safari по нему палец
     таскал страницу влево-вправо. */
  z-index: 0;
  pointer-events: none;
  display: block;
  opacity: .78;   /* фон остаётся фоном, текст поверх читается спокойно */
}

/* Когда сцена запустилась - глушим старый фон, иначе рябит:
   кодовый дождь и падающие метки спорят с линиями чертежа. */
body.scene-on #ambient-code,
body.scene-on .code-rain-labels { display: none; }
body.scene-on .grid-bg { opacity: .30; }

/* Виньетка: гасит углы, взгляд собирается к центру. */
.scene-vignette {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%, transparent 42%, rgba(0,0,0,.55) 100%);
}

/* Зерно плёнки: убирает «чистую цифру» с градиентов. */
.scene-grain {
  position: fixed;
  inset: -50%;
  z-index: 1;
  pointer-events: none;
  opacity: .16;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  animation: scene-grain-shift 700ms steps(3) infinite;
}
@keyframes scene-grain-shift {
  0%   { transform: translate(0, 0); }
  33%  { transform: translate(-2%, 1%); }
  66%  { transform: translate(1%, -2%); }
  100% { transform: translate(0, 0); }
}

/* Индикатор полёта слева: шкала, бегунок и процент пройденного пути. */
.scene-flight {
  position: fixed;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .18em;
  color: var(--text-3);
}
.scene-flight .rail {
  position: relative;
  width: 1px;
  height: 168px;
  background: rgba(232,232,234,.14);
}
.scene-flight .rail::after {
  content: '';
  position: absolute;
  left: -2.5px;
  top: var(--p, 6px);
  width: 6px;
  height: 6px;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
  transition: top .12s linear;
}
.scene-flight em { font-style: normal; color: var(--accent); }

/* Имя текущего «узла» - как в чертёжном HUD. */
/* На первом экране приборов не показываем: они спорят с панелью статуса в
   шапке. Появляются, когда читатель тронулся с места (класс ставит сцена). */
.scene-flight, .scene-hud-node {
  opacity: 0;
  transition: opacity .35s ease;
}
body.scene-moved .scene-flight,
body.scene-moved .scene-hud-node { opacity: 1; }

/* Правый нижний угол занят плавающей кнопкой поддержки - отступаем левее. */
.scene-hud-node {
  position: fixed;
  right: 96px;
  bottom: 26px;
  z-index: 6;
  pointer-events: none;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .18em;
  color: var(--text-3);
  border: 1px solid var(--line);
  padding: 7px 12px;
  background: rgba(10,10,10,.55);
  backdrop-filter: blur(3px);
}

/* Сцена не запустилась (мобильный, reduce-motion, нет WebGL) -
   обвязку прячем, лендинг остаётся как был. */
body.no-scene .scene-vignette,
body.no-scene .scene-grain,
body.no-scene .scene-flight,
body.no-scene .scene-hud-node,
body.no-scene #motion-scene { display: none; }

@media (max-width: 900px) {
  /* На телефоне сцена есть, а приборов нет: экран узкий, они бы лезли на текст.
     Зерно тоже убираем - это самый дорогой слой на слабом железе. */
  .scene-flight, .scene-hud-node { display: none; }
  .scene-grain { display: none; }
  #motion-scene { opacity: .62; }   /* текста на экране больше - фон тише */
}
@media (prefers-reduced-motion: reduce) {
  .scene-grain { animation: none; }
}