/* ═══════════════════════════════════════════════════════════
   Rocket CDN · посадка: реакция плоской вёрстки на касание

   Сама посадка живёт в 3D (assets/rc-rocket.js): опоры, тормозной
   импульс, пыль, тень и разметка площадки нарисованы в сцене и
   сюда не заглядывают. Здесь только одно - чтобы страница
   вздрогнула ровно тогда же, когда вздрагивает трёхмерный мир.

   Ракета публикует три переменные на html и держит класс на время
   толчка:
     --rc-shake     0..1, сила толчка, гаснет за треть секунды
     --rc-shake-x   готовый сдвиг по горизонтали, в пикселях
     --rc-shake-y   готовый сдвиг по вертикали, в пикселях
     .rc-quake      висит, пока толчок идёт
   Переменные обновляются каждый кадр, поэтому анимировать их не
   нужно и нельзя: любой transition тут даст запаздывание, и
   вёрстка разъедется с 3D-сценой.
   ═══════════════════════════════════════════════════════════ */

:root {
  --rc-shake: 0;
  --rc-shake-x: 0px;
  --rc-shake-y: 0px;
}

/* Двигаем содержимое, а не сам html: смещение корня ломает
   position: fixed у шапки и кнопок, и они уезжают вместе с толчком.

   Сам кадр (main) здесь НЕ трясём: его transform каждый кадр пишет
   камера единого мира (rc-world.js), и второе правило на тот же
   элемент просто проиграло бы по специфичности. Толчок сложен с
   ходом камеры прямо там, а сюда остаётся всё, что живёт отдельно
   от общего кадра. */
/* Слой удара: сам по себе он ничего не рисует, всю картинку дают
   его псевдоэлементы. Здесь же живёт доля толчка (--rc-shake),
   которую пишет сцена. Раньше и доля, и псевдоэлементы висели на
   корне документа - от этого каждый кадр касания пересчитывал стиль
   всей страницы. Отдельный слой стоит один узел разметки.

   Заодно убрано правило для класса rc-shakeable: такого класса в
   разметке нет ни в одном файле, оно не совпадало ни с чем. */
.rc-quake-fx {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

/* Короткая засветка кадра от удара: не белая вспышка, а еле
   заметное свечение снизу, оттуда, где ударили опоры.

   Цвет тёплый, а не фирменный синий, и это не украшательство: в
   сцене на посадке контровой свет корабля тоже подменяется тёплым
   отсветом факела (rimLight в rc-rocket.js). Если вёрстка вспыхнет
   синим в тот самый миг, когда трёхмерный мир вспыхивает рыжим,
   удар распадётся на два разных события. Синий остаётся снаружи
   пятна - там, куда свет от сопла уже не достаёт. */
html.rc-quake .rc-quake-fx::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: calc(var(--rc-shake) * 0.5);
  background:
    radial-gradient(60% 34% at 50% 100%,
      rgba(255, 176, 104, .26), rgba(255, 176, 104, .07) 52%, transparent 78%),
    radial-gradient(120% 60% at 50% 100%,
      rgba(126, 200, 238, .16), rgba(126, 200, 238, .05) 45%, transparent 72%);
}

/* Пыль, поднятая ударом, доходит и до плоского слоя: нижняя кромка
   кадра на треть секунды слегка мутнеет. Это тот же приём, что и в
   сцене, - объём падает ОТ корабля, а не рисуется поверх него.
   Отдельного элемента не заводим: псевдоэлемент у того же класса
   стоит ноль узлов разметки. */
html.rc-quake .rc-quake-fx::before {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 34vh;
  z-index: 3;
  pointer-events: none;
  opacity: calc(var(--rc-shake) * 0.42);
  background: linear-gradient(to top,
    rgba(150, 168, 190, .17), rgba(150, 168, 190, .06) 46%, transparent);
}

/* Кому важнее покой, тот не трясётся: движение тут декоративное и
   выключается целиком, а посадка остаётся понятной и без него */
@media (prefers-reduced-motion: reduce) {
  html.rc-quake .rc-quake-fx::after,
  html.rc-quake .rc-quake-fx::before { display: none; }
}

/* Просевшие кадры: страница снимает украшения ступенями. Пыль у
   нижней кромки - самое дорогое здесь (полноэкранный полупрозрачный
   слой поверх всего), поэтому уходит первой, а вспышка от удара
   остаётся: без неё касание перестаёт быть событием. */
html[data-degrade="2"].rc-quake .rc-quake-fx::before,
html[data-degrade="3"].rc-quake .rc-quake-fx::before { display: none; }
html[data-degrade="3"].rc-quake .rc-quake-fx::after { display: none; }

/* Режим покоя выключает всё: там и самой посадки в 3D не бывает */
html.rc-reduced .rc-quake-fx::after,
html.rc-reduced .rc-quake-fx::before { display: none; }