/* Rocket CDN / RocketVPN · одна марка в кабине и один выход на сайт

   Здесь лежит ровно то, что добавляет rc-vpn.js: вход в продукт в
   мобильном меню, поведение голограммы марки как органа управления,
   помеха при смене марки и кнопка выхода из космоса на сайт.

   Сама голограмма (.rcf-holo) рисуется в rc-flight.css: там её место
   у кромки пульта, луч проектора снизу, циановый тон проекции и
   развёртка строк. Мы её вид не переписываем, только доводим до
   состояния кнопки. Файл подключён в index.html ПОСЛЕ rc-flight.css,
   поэтому хватает той же силы селектора, без !important.

   Второго логотипа RocketVPN в воздухе (.rc-vpn-projector) и отдельной
   панели RocketVPN (.rc-vpn-holo) больше нет: заказчик просил одну
   голограмму, которая по клику меняет марку, и ничего сверх этого. */

/* ── Вход в продукт в мобильном меню ─────────────────────────
   Единственное место вне космоса, где марку можно переключить
   заранее: человек выбирает продукт ещё на сайте, и космос откроется
   уже его марки. */
.rc-vpn-entry {
  width: 100%;
  min-height: 66px;
  margin: 7px 0 12px;
  padding: 8px 11px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 11px;
  color: var(--tx);
  text-align: left;
  border: 1px solid rgba(88, 145, 255, .28);
  border-radius: 15px;
  background:
    linear-gradient(110deg, rgba(36, 80, 154, .16), rgba(7, 17, 31, .72)),
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(117, 173, 255, .025) 3px 4px);
  box-shadow: inset 0 1px rgba(255,255,255,.05), 0 10px 32px rgba(2, 10, 25, .18);
  cursor: pointer;
}
.rc-vpn-entry-mark {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: radial-gradient(circle, rgba(91, 139, 255, .14), transparent 70%);
}
.rc-vpn-entry img { width: 46px; height: 46px; object-fit: contain; }
.rc-vpn-entry > span:nth-child(2) { display: grid; gap: 3px; min-width: 0; }
.rc-vpn-entry b { font-size: 14px; letter-spacing: .03em; }
.rc-vpn-entry i { color: var(--tx-2); font-size: 11px; font-style: normal; line-height: 1.25; }
.rc-vpn-entry em {
  width: 9px;
  height: 9px;
  border: 1px solid #6d94ff;
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(88, 136, 255, .55);
}
.rc-vpn-entry.on {
  border-color: rgba(110, 156, 255, .66);
  box-shadow: inset 0 0 28px rgba(58, 100, 205, .14), 0 0 24px rgba(55, 102, 218, .12);
}
.rc-vpn-entry.on em { background: #7ca1ff; box-shadow: 0 0 18px #628aff; }

/* ── Голограмма марки как орган управления ───────────────────
   Раньше .rcf-holo была чистой проекцией: pointer-events: none, клики
   сквозь неё уходили в космос. Теперь по ней щёлкают, поэтому она
   ловит палец и указатель. Площадь остаётся её собственной - 92 точки
   на мониторе, 44 на телефоне, и стоит она у кромки пульта, а не под
   потолком: прежний невидимый круг переключателя висел в правой
   верхней четверти окна и молча съедал клики по планетам. */
.rc-flight .rcf-holo.rc-vpn-mark {
  z-index: 9;
  pointer-events: auto;
  cursor: pointer;
  border-radius: 12px;
  transition: filter .2s linear;
  /* Марка и её подпись стоят в ОДНОЙ коробке голограммы: сама
     проекция занимает верхнюю долю, подпись - остаток внизу. Доля
     объявлена переменной, потому что её знают трое: картинка, канвас
     помехи и подпись, и расходиться им нельзя.

     Раньше подпись висела под коробкой (top: 100% + 13px) и потому
     читалась отдельным парящим ярлыком, а на обоих размерах экрана
     ложилась на кромку пульта: замер давал 667 точек площади нахлёста
     на мониторе и 610 на телефоне. Оба следствия - одна причина.

     Коробку заодно поднимаем в размере: подпись съела часть высоты,
     и без этого сама марка стала бы заметно мельче прежней. Растёт
     она вверх - низ держит правило bottom из rc-flight.css, то есть
     основание проекции остаётся на кромке пульта, как просил
     заказчик. */
  --rc-vpn-лого-в: 74%;
  --rcf-holo-разм: clamp(60px, 7.6vw, 102px);
  width: var(--rcf-holo-разм);
}
/* Картинка отдаёт низ коробки подписи. object-fit: contain из
   rc-flight.css остаётся в силе, поэтому марка просто вписывается в
   новый прямоугольник, не искажая пропорций. */
.rc-flight .rcf-holo.rc-vpn-mark > img {
  height: var(--rc-vpn-лого-в);
}
/* Пока стекло занято другой проекцией, марка не ловит клики: под
   раскрытым меню, досье, справкой и брифингом её всё равно не видно,
   а попадания она забирала бы себе. */
.rc-flight:has(.rcf-menu.on) > .rcf-holo.rc-vpn-mark,
.rc-flight:has(.rcf-dos.on) > .rcf-holo.rc-vpn-mark,
.rc-flight:has(.rcf-help.on) > .rcf-holo.rc-vpn-mark,
.rc-flight:has(.rcf-brief:not(.off)) > .rcf-holo.rc-vpn-mark {
  pointer-events: none;
}
.rc-flight .rcf-holo.rc-vpn-mark:hover,
.rc-flight .rcf-holo.rc-vpn-mark:focus-visible {
  filter: drop-shadow(0 0 16px rgba(var(--int-cyan-rgb, 66,178,220), .75));
}
.rc-flight .rcf-holo.rc-vpn-mark:focus-visible {
  outline: 1px solid rgba(var(--int-lit-rgb, 207,233,245), .8);
  outline-offset: 5px;
}

/* Подпись марки стоит ВНУТРИ коробки голограммы, в её нижней доле,
   под самой проекцией и над её основанием. Так подпись и проекция -
   один предмет: они вместе дышат, вместе гаснут в режиме сцены,
   вместе принимают клик и вместе съезжают, когда кабина меняет
   раскладку. Отдельного фона у подписи нет - это свет, а не
   карточка. */
.rc-flight .rcf-holo .rc-vpn-mark-cap {
  position: absolute;
  left: 50%;
  top: auto;
  bottom: 4%;
  width: max-content;
  max-width: 150px;
  transform: translateX(-50%);
  color: rgba(var(--int-lit-rgb, 207,233,245), .82);
  font: 600 9px/1 "Golos Text", system-ui, sans-serif;
  letter-spacing: .17em;
  white-space: nowrap;
  /* Две тени, а не одна: циановая делает подпись светом, тёмная держит
     её читаемой на светлой кромке пульта. На телефоне марка садится
     прямо на эту кромку, и без тёмной тени слово тонуло в блике. */
  text-shadow: 0 0 12px rgba(var(--int-cyan-rgb, 66,178,220), .85),
               0 1px 3px rgba(0, 0, 0, .9);
  pointer-events: none;
}
/* Волосок между маркой и подписью. Он и есть то, что превращает две
   вещи в одну: у проекции появляется низ, а у подписи - крепление к
   ней, вместо просто текста, оказавшегося рядом. */
.rc-flight .rcf-holo .rc-vpn-mark-cap::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: calc(100% + 3px);
  width: 118%;
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent,
    rgba(var(--int-cyan-rgb, 66,178,220), .8), transparent);
}

/* Холст помехи. Лежит ровно на месте картинки марки - той же ширины и
   той же доли высоты, - потому что в момент сбоя он картинку и
   подменяет: настоящая гаснет, а кадры рисует код. В покое холста нет
   ни на глаз, ни для указателя.

   Та же гребёнка развёртки, что у картинки в rc-flight.css: без неё
   помеха читалась бы чужим слоем поверх проекции, а не самой
   проекцией. */
.rc-flight .rcf-holo .rc-vpn-mark-fx {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: var(--rc-vpn-лого-в, 74%);
  opacity: 0;
  pointer-events: none;
  -webkit-mask-image: repeating-linear-gradient(180deg, #000 0 2px, rgba(0,0,0,.55) 2px 4px);
  mask-image: repeating-linear-gradient(180deg, #000 0 2px, rgba(0,0,0,.55) 2px 4px);
}
/* Пока идёт помеха, настоящая картинка уступает место холсту. Меняем
   их одним классом, чтобы между ними не было кадра с двумя марками
   разом или с пустотой. */
.rc-flight .rcf-holo.rc-vpn-fx > img { opacity: 0; }
.rc-flight .rcf-holo.rc-vpn-fx .rc-vpn-mark-fx { opacity: .95; }

/* Слой помехи поверх проекции. В покое его нет совсем: он оживает
   только на те доли секунды, пока марка меняется. */
.rc-flight .rcf-holo .rc-vpn-mark-noise {
  position: absolute;
  inset: -6%;
  opacity: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(var(--int-lit-rgb, 207,233,245), .5) 0 1px, transparent 1px 4px),
    linear-gradient(90deg, transparent 0 30%, rgba(var(--int-cyan-rgb, 66,178,220), .45) 50%, transparent 70%);
  mix-blend-mode: screen;
}

/* ── Помеха при смене марки ──────────────────────────────────
   Дёргается только сигнал бренда: сама проекция, её подпись и марка в
   меню. Геометрия кабины, текст сайта и кнопки стоят на месте. */
.rcf-holo.rc-vpn-flick img,
html.rc-product-glitch .rc-vpn-entry-mark {
  animation: rcVpnGlitch .16s steps(2, end) 4;
}
.rcf-holo.rc-vpn-flick .rc-vpn-mark-noise {
  animation: rcVpnNoise .16s steps(3, end) 4;
}
.rcf-holo.rc-vpn-flick .rc-vpn-mark-cap {
  animation: rcVpnCapFlick .16s steps(2, end) 4;
}

@keyframes rcVpnGlitch {
  0%   { transform: translate(0) skewX(0); filter: hue-rotate(0deg) drop-shadow(0 0 4px #679bff); }
  25%  { transform: translate(3px,-1px) skewX(4deg); filter: hue-rotate(35deg) drop-shadow(-4px 0 #52d6ff); }
  50%  { transform: translate(-2px,2px) skewX(-3deg); filter: hue-rotate(-28deg) drop-shadow(4px 0 #8a59f6); }
  75%  { transform: translate(1px,-2px) skewX(2deg); }
  100% { transform: translate(0) skewX(0); }
}
@keyframes rcVpnNoise {
  0%   { opacity: 0; transform: translateY(0); }
  30%  { opacity: .85; transform: translateY(-4px); }
  60%  { opacity: .35; transform: translateY(5px); }
  100% { opacity: 0; transform: translateY(0); }
}
@keyframes rcVpnCapFlick {
  0%   { opacity: .2; transform: translateX(-50%) translateX(4px); }
  40%  { opacity: 1;  transform: translateX(-50%) translateX(-3px); }
  100% { opacity: .85; transform: translateX(-50%); }
}

/* ── Выход из космоса на сайт ────────────────────────────────
   Кнопка стоит рядом с крестиком полёта и подписана тем сайтом, куда
   уведёт: имя меняется вместе с маркой в голограмме. Это и есть связь,
   которую просил заказчик - какая марка горит, на тот сайт и выход. */
.rc-flight .rc-vpn-exit {
  position: absolute;
  z-index: 19;
  top: clamp(12px, 3vh, 28px);
  /* Слева от крестика: его ширина 44 точки плюс тот же отступ от
     кромки, что и у него, плюс просвет между ними. */
  right: calc(clamp(12px, 3vw, 28px) + 44px + 9px);
  min-height: 44px;
  padding: 0 13px 0 11px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--int-lit, #CFE9F5);
  background: rgba(var(--int-deep-rgb, 5,12,21), .6);
  border: 1px solid rgba(var(--int-cyan-rgb, 66,178,220), .35);
  border-radius: 22px;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .25s, box-shadow .25s;
}
.rc-flight .rc-vpn-exit:hover,
.rc-flight .rc-vpn-exit:focus-visible {
  border-color: rgba(var(--int-cyan-rgb, 66,178,220), .8);
  box-shadow: 0 0 24px -6px rgba(var(--int-cyan-rgb, 66,178,220), .7);
}
.rc-flight .rc-vpn-exit svg { width: 19px; height: 19px; flex: 0 0 auto; }
.rc-flight .rc-vpn-exit span { display: grid; gap: 2px; min-width: 0; }
.rc-flight .rc-vpn-exit i {
  color: rgba(var(--int-lit-rgb, 207,233,245), .58);
  font: 600 8px/1 "Golos Text", system-ui, sans-serif;
  font-style: normal;
  letter-spacing: .18em;
}
.rc-flight .rc-vpn-exit b {
  font: 700 11px/1.1 "Golos Text", system-ui, sans-serif;
  letter-spacing: .09em;
  white-space: nowrap;
}
/* В режиме сцены пульт погашен целиком, и выход гаснет вместе с ним:
   иначе он остаётся висеть один поверх пустого кадра. Погашенное не
   должно ловить и клавиатуру - то же правило, что у крестика. */
.rc-flight.rcf-stage .rc-vpn-exit {
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 760px) {
  /* На телефоне у верхней кромки места на две строки нет: оставляем
     дверь и имя сайта, служебную строку убираем. */
  /* Высоту оставляем 44. Тесно на телефоне не по вертикали, а по
     ширине, и лечится это снятой служебной строкой и уменьшенными
     полями - они ниже. Два пикселя у верхней кромки ничего не
     решают, а сорок четыре это порог, ниже которого палец начинает
     промахиваться: обмер нашёл эту кнопку среди мелких целей. */
  .rc-flight .rc-vpn-exit { padding: 0 12px 0 10px; gap: 7px; }
  .rc-flight .rc-vpn-exit i { display: none; }
  .rc-flight .rc-vpn-exit b { font-size: 10.5px; letter-spacing: .06em; }
  /* Коробка голограммы на телефоне задана в rc-flight.css жёсткой
     сорокачетвёркой, поэтому переменную мало объявить - надо заново
     назвать и ширину, иначе она останется прежней.
     Пятьдесят четыре вместо сорока четырёх: подпись забирает нижнюю
     треть, и без прибавки сама марка стала бы мельче, чем была. Низ
     коробки на месте, растёт она вверх - основание проекции остаётся
     на кромке пульта. Заодно палец получает цель в 54 точки вместо
     44, а это ровно тот размер, который проект держит для клавиш. */
  .rc-flight .rcf-holo.rc-vpn-mark {
    --rcf-holo-разм: 54px;
    width: 54px;
    /* Доля под марку меньше: на пятидесяти четырёх точках подписи в
       девять точек нужна та же полоса, что на ста двух, а в долях
       это заметно больше. */
    --rc-vpn-лого-в: 64%;
  }
  /* Девять точек, а не восемь. Проект сам объявил девятку нижней
     границей читаемого (см. комментарий в rc-flight.css у правила
     для узких экранов), и подпись марки была единственным местом,
     которое опустилось ниже собственной границы команды. Разрядку
     чуть убавляем, чтобы подпись не стала шире марки. */
  /* Разрядка меньше, чем на мониторе, по замеру, а не на глаз: марка
     стоит у самой правой кромки остекления, подпись шире её и
     центрирована по ней, поэтому каждая сотая доля разрядки уходит
     за проём. При .10em правый край подписи не доходил до кромки
     восемь десятых точки - запас, которого нет. При .06em остаётся
     около шести точек. */
  .rc-flight .rcf-holo .rc-vpn-mark-cap { bottom: 6%; font-size: 9px; letter-spacing: .06em; }
  .rc-flight .rcf-holo .rc-vpn-mark-cap::before { bottom: calc(100% + 2px); }
}
@media (max-width: 390px) {
  .rc-flight .rc-vpn-exit svg { width: 17px; height: 17px; }
  .rc-flight .rc-vpn-exit b { font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  /* Помеху не отменяем - без неё смена марки становится непонятной
     подменой картинки, - но растягиваем и снимаем рывки. */
  .rcf-holo.rc-vpn-flick img,
  html.rc-product-glitch .rc-vpn-entry-mark,
  .rcf-holo.rc-vpn-flick .rc-vpn-mark-noise,
  .rcf-holo.rc-vpn-flick .rc-vpn-mark-cap {
    animation-duration: .3s;
    animation-iteration-count: 1;
  }
}

/* ═══ Стыковочный узел: выход из космоса с выбором причала ═══
   Коридор перед кораблём с двумя причалами. Живёт поверх кабины, но
   ниже крестика выхода: короткий ход у человека должен оставаться
   доступным всегда. Слой держит собственный фон, потому что за ним
   идёт живая сцена, и без подложки слова по ней не читаются. */
.rcf-dock {
  position: absolute;
  inset: 0;
  z-index: 22;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 4vh, 40px);
  padding: clamp(16px, 4vh, 48px) clamp(14px, 4vw, 56px);
  background:
    radial-gradient(120% 90% at 50% 78%, rgba(4, 10, 18, .62), rgba(2, 5, 12, .94) 68%),
    rgba(2, 5, 12, .72);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .34s ease, visibility 0s linear .34s;
}
.rcf-dock.рчл-видно {
  opacity: 1;
  visibility: visible;
  transition: opacity .34s ease, visibility 0s;
}

.rcf-dock-line {
  margin: 0;
  font: 600 clamp(12px, 1.5vw, 15px)/1.2 "Golos Text", system-ui, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(207, 233, 245, .72);
}

.rcf-dock-row {
  display: flex;
  gap: clamp(14px, 3vw, 42px);
  align-items: stretch;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
  max-width: 900px;
}

/* Причал. Трапеция намеренно: это створ дока, а не карточка. Скос
   уводит взгляд внутрь, к марке. */
.rcf-berth {
  position: relative;
  flex: 1 1 240px;
  max-width: 380px;
  min-height: 176px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: clamp(18px, 3vh, 30px) clamp(14px, 2vw, 26px);
  cursor: pointer;
  color: #EAF6FF;
  background: linear-gradient(180deg, rgba(18, 26, 34, .92), rgba(8, 13, 19, .96));
  border: 1px solid rgba(120, 160, 190, .28);
  border-radius: 14px;
  clip-path: polygon(6% 0, 94% 0, 100% 100%, 0 100%);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.rcf-berth:hover,
.rcf-berth:focus-visible {
  transform: translateY(-4px);
  outline: none;
}
.rcf-berth b {
  font: 700 clamp(15px, 1.9vw, 20px)/1.15 "Golos Text", system-ui, sans-serif;
  letter-spacing: .04em;
}
.rcf-berth i {
  font: 400 clamp(11px, 1.3vw, 13px)/1.35 "Golos Text", system-ui, sans-serif;
  font-style: normal;
  color: rgba(203, 224, 240, .72);
  text-align: center;
}
/* Марки на причалах садятся в ОДИН квадрат и вписываются в него
   целиком. Разные файлы имеют разные пропорции, и без общего квадрата
   один знак выходит крупнее другого - на причалах это читается
   разнобоем, а не парой. */
.rcf-berth-mark {
  width: clamp(46px, 6vw, 64px);
  height: clamp(46px, 6vw, 64px);
  object-fit: contain;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .55));
}
/* Свет причала: он и есть цвет марки. Полоса снизу, как посадочный
   огонь, и мягкое зарево от неё вверх. */
.rcf-berth-glow {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 0;
  height: 3px;
  border-radius: 3px;
  transition: box-shadow .22s ease, opacity .22s ease;
}
.рчл-бирюза .rcf-berth-glow {
  background: #42B2DC;
  box-shadow: 0 0 18px 2px rgba(66, 178, 220, .55);
}
.рчл-индиго .rcf-berth-glow {
  background: #6078D8;
  box-shadow: 0 0 18px 2px rgba(96, 120, 216, .55);
}
.рчл-бирюза:hover,
.рчл-бирюза:focus-visible { border-color: rgba(66, 178, 220, .8); box-shadow: 0 18px 46px -18px rgba(66, 178, 220, .75); }
.рчл-индиго:hover,
.рчл-индиго:focus-visible { border-color: rgba(96, 120, 216, .85); box-shadow: 0 18px 46px -18px rgba(96, 120, 216, .8); }

/* Швартовка: выбранный причал разгорается и заливает кадр своим
   светом, второй уходит в тень. Пауза короткая, но без неё переход
   читается обрывом. */
.rcf-berth.рчл-идёт { transform: translateY(-6px) scale(1.03); }
.rcf-berth.рчл-идёт .rcf-berth-glow { height: 100%; opacity: .22; border-radius: 14px; }
.rcf-dock[data-швартовка] .rcf-berth:not(.рчл-идёт) { opacity: .25; }
.rcf-dock[data-швартовка] .rcf-dock-back { opacity: .25; pointer-events: none; }

.rcf-dock-back {
  min-height: 44px;
  padding: 0 18px;
  cursor: pointer;
  color: rgba(203, 224, 240, .8);
  background: transparent;
  border: 1px solid rgba(120, 160, 190, .3);
  border-radius: 10px;
  font: 500 13px/1 "Golos Text", system-ui, sans-serif;
  transition: border-color .2s ease, color .2s ease;
}
.rcf-dock-back:hover,
.rcf-dock-back:focus-visible { color: #EAF6FF; border-color: rgba(120, 160, 190, .6); }

/* Узкий экран: причалы встают друг под друга, но остаются причалами.
   Скос при этом убираем: на узкой карточке он съедает угол подписи. */
@media (max-width: 560px) {
  .rcf-berth { min-height: 132px; clip-path: none; }
  .rcf-dock { gap: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .rcf-dock, .rcf-berth, .rcf-berth-glow { transition: none; }
  .rcf-berth.рчл-идёт { transform: none; }
}

/* ── Прокол: переход на сайт RocketVPN через пространство ─────
   Холст стоит выше всего, что есть на странице, включая тамбур рубки
   (950) и загрузочный экран (900): прокол это последнее, что человек
   видит на этом сайте, и перекрывать его нечему.

   Событий не ловит. Отмены у прокола нет по замыслу, а невидимая
   ловушка щелчков поверх страницы на полторы секунды это лишний
   способ сломать чужой сценарий. */
.rc-prokol {
  position: fixed; inset: 0;
  z-index: 990;
  pointer-events: none;
  display: block;
}

/* Пока идёт прокол, страница под ним не прокручивается: человек уже
   уходит, и движение фона за светом читается сбоем. */
html.rc-prokol-idet, html.rc-prokol-idet body { overflow: hidden; }