/* ═══════════════════════════════════════════════════════════
   Rocket CDN · оформление внутреннего акта

   Холст рубки лежит под содержимым, а не над ним: текст, вопросы
   и форма остаются обычной вёрсткой, с которой работают клавиатура,
   автозаполнение и экранная читалка. Трёхмерная сцена только даёт
   им пространство, в котором они висят.

   Раскладку карточек по кругу салона держит rc-cinema.css: здесь
   только материал - стекло панелей, свет тамбура, вид пульта.
   ═══════════════════════════════════════════════════════════ */

/* ── Холст рубки ─────────────────────────────────────────── */
.rc-int-canvas {
  position: fixed; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  opacity: 0; pointer-events: none;
  transition: opacity .5s var(--ease);
}
.rc-int-canvas.on { opacity: 1; }
html.rc-reduced .rc-int-canvas { display: none !important; }

/* Ракета припаркована: наружная сцена отдала свой слот интерьеру.
   Специфичность здесь нарочно высокая: правила видимости холста
   в основном файле стоят на классе has-rocket и на теме, и без
   двойного селектора мы бы им проиграли. */
html.rc-rocket-parked.has-rocket #rocketCanvas,
html.rc-rocket-parked #rocketCanvas,
html[data-theme="light"].rc-rocket-parked.has-rocket #rocketCanvas {
  opacity: 0 !important; transition: opacity .45s var(--ease);
}

/* ── Тамбур ──────────────────────────────────────────────────
   Две створки люка сходятся к центру, между ними полоса света.
   Ровно под этим перекрытием меняются сцены.

   Створок мало, чтобы вход читался как вход: закрытая дверь -
   это ещё не «я прошёл внутрь». Поэтому весь тамбур наезжает на
   зрителя вместе с камерой, которая в этот момент действительно
   едет вперёд (--int-enter приходит из rc-interior.js: ноль -
   мы снаружи, единица - мы в центре рубки). Створки растут,
   свет по стыку разгорается, и движение говорит то же, что и
   звук: это проход, а не склейка. */
.rc-int-lock {
  position: fixed; inset: 0; z-index: 950; pointer-events: none;
  opacity: 0; transition: opacity .18s linear;
  perspective: 900px;
}
.rc-int-lock.on { opacity: 1; }
.rc-lock-l, .rc-lock-r {
  position: absolute; top: 0; bottom: 0; width: 52%;
  background:
    linear-gradient(90deg, #050C15 0%, #0B1725 76%, #12283C 100%),
    repeating-linear-gradient(0deg, rgba(226,232,240,.05) 0 2px, transparent 2px 26px);
  box-shadow: 0 0 60px 10px rgba(0,0,0,.8);
  transform: translateX(-102%);
  transition: transform .4s cubic-bezier(.55,0,.25,1);
}
.rc-lock-r { right: 0; transform: translateX(102%);
  background:
    linear-gradient(270deg, #050C15 0%, #0B1725 76%, #12283C 100%),
    repeating-linear-gradient(0deg, rgba(226,232,240,.05) 0 2px, transparent 2px 26px);
}
.rc-lock-l { left: 0; }
/* Проход: обшивка тамбура наезжает на зрителя ровно настолько,
   насколько камера уже вошла внутрь. */
.rc-int-lock.on .rc-lock-l {
  transform: scale(calc(1 + var(--int-enter, 0) * .16));
  transform-origin: 22% 50%;
}
.rc-int-lock.on .rc-lock-r {
  transform: scale(calc(1 + var(--int-enter, 0) * .16));
  transform-origin: 78% 50%;
}
/* Уплотнители: пока створки сомкнуты, по стыку идёт живая полоса
   света. Если интерьер задержался, человек видит работу механизма,
   а не зависшую страницу. */
.rc-int-lock::after {
  content: ''; position: absolute; left: 50%; top: 0; bottom: 0;
  width: calc(3px + var(--int-enter, 0) * 26px);
  transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, var(--cyan), rgba(138,89,246,.8), transparent);
  opacity: 0; animation: rcSeal 1.1s ease-in-out infinite;
  filter: blur(calc(var(--int-enter, 0) * 6px));
}
.rc-int-lock.on::after { opacity: .9; }
@keyframes rcSeal {
  0%, 100% { filter: brightness(.7); transform: translateX(-50%) scaleY(.92) }
  50%      { filter: brightness(1.5); transform: translateX(-50%) scaleY(1) }
}
/* Гравировка на внутренней стороне люка. Она уезжает вместе с
   проходом: буквы уходят за спину, как надпись над дверью. */
.rc-lock-tx {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(calc(1 + var(--int-enter, 0) * .5));
  font-size: 11px; letter-spacing: .42em; font-weight: 600;
  color: rgba(226,232,240,.30);
  text-shadow: 0 1px 0 rgba(0,0,0,.9), 0 -1px 0 rgba(226,232,240,.10);
  white-space: nowrap;
  opacity: calc(1 - var(--int-enter, 0) * .8);
}

/* ── Внутри рубки ────────────────────────────────────────────
   Содержимое второй половины страницы получает настоящее стекло
   панелей. Живой фильтр здесь оправдан: под ним действительно
   движется сцена. */
html.rc-inside #reliability .card,
html.rc-inside #faq .faq,
html.rc-inside #contact .form-card {
  background: linear-gradient(158deg, rgba(12,26,42,.72), rgba(8,17,28,.62));
  border-color: rgba(66,178,220,.22);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  box-shadow:
    inset 0 1px 0 rgba(226,232,240,.16),
    0 30px 60px -34px rgba(0,0,0,.9),
    0 0 50px -26px rgba(66,178,220,.55);
}
html[data-theme="light"].rc-inside #reliability .card,
html[data-theme="light"].rc-inside #faq .faq,
html[data-theme="light"].rc-inside #contact .form-card {
  background: linear-gradient(158deg, rgba(255,255,255,.9), rgba(240,246,252,.82));
  border-color: rgba(10,88,151,.2);
}

/* Панели салона стоят друг за другом по кругу, и настоящее
   размытие фона под каждой из них - это четыре полноэкранных
   фильтра на кадр. Здесь оно и не нужно: за панелью не страница,
   а наша же сцена, свет которой мы задаём сами. Поэтому стекло
   тут рисованное - подложка цветом сцены, светлая грань сверху,
   косой блик. Заодно возвращается объём: backdrop-filter
   схлопывает слои внутри карточки в плоскость. */
html.rc-inside #reliability .cin-item,
#reliability .cin-ring > .cin-item {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background:
    linear-gradient(158deg, rgba(16,33,52,.93), rgba(8,17,28,.9));
  border-color: rgba(66,178,220,.26);
  box-shadow:
    inset 0 1px 0 rgba(226,232,240,.16),
    0 30px 60px -34px rgba(0,0,0,.92);
}
html[data-theme="light"] #reliability .cin-ring > .cin-item {
  background: linear-gradient(158deg, rgba(255,255,255,.95), rgba(238,245,252,.9));
  border-color: rgba(10,88,151,.22);
}
/* Косой блик по верхнему ребру: стекло, а не крашеная плита */
#reliability .cin-ring > .cin-item::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(112deg, transparent 34%, rgba(207,233,245,.10) 48%, transparent 60%);
  opacity: var(--cin-vis, 1);
}

/* Пока мы внутри, фон страницы уступает место сцене */
html.rc-inside #spaceBg { opacity: .25; transition: opacity .6s var(--ease); }
html.rc-inside section { position: relative; z-index: 1; }

/* ── Пульт: форма заявки в носу корабля ──────────────────────
   Никакого трёхмерного рисования полей. Пазы, фаски и гравировка -
   это рамка вокруг обычной формы, поля остаются нативными.
   Правило железное: transform на предке и активная форма никогда
   не встречаются, иначе ломается позиционирование при подъёме
   клавиатуры на телефоне. */
html.rc-inside #contact .form-card {
  border-radius: var(--r-lg);
  outline: 1px solid rgba(226,232,240,.06);
  outline-offset: 6px;
}
html.rc-inside #contact .form-card::before {
  content: ''; position: absolute; inset: -14px -14px auto -14px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(66,178,220,.5), transparent);
  pointer-events: none;
}
/* Как только человек встал в поле, сцена замирает и все украшения
   вокруг формы снимаются: ввод важнее кино. */
html.rc-form-active .rc-int-canvas { opacity: .35; }
html.rc-form-active #contact .form-card {
  backdrop-filter: none; -webkit-backdrop-filter: none;
  background: var(--bg-2);
}

@media (max-width: 860px) {
  /* На телефоне живой фильтр на длинных блоках слишком дорог */
  html.rc-inside #faq .faq { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--bg-3); }
}

@media (prefers-reduced-motion: reduce) {
  .rc-int-lock, .rc-int-canvas { display: none !important; }
}