/* Живые сцены в трёх тёмных панелях блока «Getting started takes an afternoon».
   У шаблона там лежали статичные картинки: три одинаковые панели, на которых
   ничего не происходит. Здесь вместо каждой картинки — разметка, которая делает
   ровно то, что написано в заголовке под панелью.

   Единица размера — cqw, процент от ширины самой сцены. Благодаря этому сцена
   уменьшается на узких экранах ровно так же, как уменьшалась бы картинка,
   и высота панели не едет: пропорция задана через aspect-ratio по натуральному
   размеру исходного файла.

   Анимация запускается классом .is-live (его вешает journey.js) и полностью
   отключается при prefers-reduced-motion: там сразу показывается конечный кадр. */

/* Сцена встаёт ровно туда, где лежала картинка. Обёртка шаблона — это коробка
   с нулевой высотой и padding-top в процентах, которая держит пропорцию; сама
   картинка внутри лежала абсолютом по inset:0. Повторяем это один в один, тогда
   пропорция и высота панели остаются шаблонными, а не нашими. */
.jsc {
  container-type: inline-size;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--brand--neutral-dark);
  font-family: "Instrument Sans", sans-serif;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

.jsc__card {
  position: absolute;
  inset: 0;
  background: #fff;
  border-radius: 5cqw;
  padding: 6cqw;
  display: flex;
  flex-direction: column;
  gap: 3cqw;
  overflow: hidden;
}
.jsc--board .jsc__card { border-radius: 2.6cqw; padding: 3.4cqw; gap: 2cqw; }
.jsc--setup .jsc__card { justify-content: center; }

.jsc__label {
  font-size: 3.5cqw;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--brand--neutral-light);
}
.jsc--board .jsc__label { font-size: 1.9cqw; }

/* ── общие состояния появления ─────────────────────────────────────────────── */
.jsc__in { opacity: 0; transform: translateY(9%); }
.jsc.is-live .jsc__in { animation: jsc-in .5s cubic-bezier(.22,.61,.36,1) var(--d, 0s) both; }
.jsc.is-done .jsc__in { opacity: 1; transform: none; }
@keyframes jsc-in { to { opacity: 1; transform: none; } }

/* ═══════════════════════════════════════════════════════════════════════════
   1. Sign up and customize — карточка А: рабочее пространство заполняет себя
   ═══════════════════════════════════════════════════════════════════════════ */
.jsc__field {
  display: flex;
  align-items: center;
  gap: 2cqw;
  height: 12cqw;
  padding: 0 4cqw;
  border: .55cqw solid #0b161318;
  border-radius: 3cqw;
  font-size: 4.4cqw;
  font-weight: 600;
}
/* На поле висят два класса — jsc__in и jsc__field. Если объявить анимацию
   отдельным правилом, второе `animation` целиком вытеснит первое и элемент
   останется с opacity:0 от jsc__in. Поэтому обе записаны в одну строку. */
.jsc.is-live .jsc__field {
  animation: jsc-in .5s cubic-bezier(.22,.61,.36,1) var(--d, 0s) both,
             jsc-focus .4s 1.1s both;
}
@keyframes jsc-focus { to { border-color: var(--brand--neon-green); box-shadow: 0 0 0 .8cqw #2be8b633; } }
.jsc__caret {
  width: .5cqw;
  height: 5cqw;
  background: var(--brand--neutral-dark);
  opacity: 0;
}
.jsc.is-live .jsc__caret { animation: jsc-blink .9s 4 step-end .3s; }
@keyframes jsc-blink { 0%, 49% { opacity: 1 } 50%, 100% { opacity: 0 } }

.jsc__chips { display: flex; gap: 2cqw; }
.jsc__chip {
  padding: 1.6cqw 3.2cqw;
  border-radius: 99cqw;
  background: #0b16130d;
  font-size: 3.4cqw;
  font-weight: 600;
  white-space: nowrap;
}
.jsc__chip.is-on { background: var(--brand--neon-green); }

/* ── карточка Б: приглашения ──────────────────────────────────────────────── */
.jsc__row {
  display: flex;
  align-items: center;
  gap: 2.6cqw;
  font-size: 3.7cqw;
  font-weight: 600;
}
.jsc__ava {
  flex: none;
  width: 8.4cqw;
  height: 8.4cqw;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 3.1cqw;
  font-weight: 700;
  color: #fff;
  background: var(--brand--dark-green);
}
.jsc__ava.is-accent { background: var(--brand--neon-green); color: var(--brand--neutral-dark); }
.jsc__role {
  margin-left: auto;
  font-size: 3cqw;
  font-weight: 500;
  color: var(--brand--neutral-light);
}
.jsc__foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 2cqw;
  font-size: 3.6cqw;
  font-weight: 600;
}
.jsc__tick {
  width: 5.6cqw;
  height: 5.6cqw;
  border-radius: 50%;
  background: var(--brand--neon-green);
  display: grid;
  place-items: center;
}
.jsc__tick svg { width: 3.2cqw; height: 3.2cqw; }

/* ═══════════════════════════════════════════════════════════════════════════
   2. Integrate your data — карточка А: источники, провода, пакеты
   ═══════════════════════════════════════════════════════════════════════════ */
.jsc__sources { display: flex; flex-direction: column; gap: 2.2cqw; }
.jsc__src {
  display: flex;
  align-items: center;
  gap: 2.4cqw;
  padding: 2.4cqw 3cqw;
  border-radius: 2.6cqw;
  background: #0b16130a;
  font-size: 3.4cqw;
  font-weight: 600;
  opacity: 0;
  transform: translateX(-14%);
}
.jsc.is-live .jsc__src { animation: jsc-slide .45s cubic-bezier(.22,.61,.36,1) var(--d, 0s) both; }
.jsc.is-done .jsc__src { opacity: 1; transform: none; }
@keyframes jsc-slide { to { opacity: 1; transform: none; } }
.jsc__dot {
  width: 3.4cqw;
  height: 3.4cqw;
  border-radius: 50%;
  background: var(--brand--neon-green);
  flex: none;
}

.jsc__wires { width: 100%; height: 26cqw; display: block; }
.jsc__wire {
  fill: none;
  stroke: #0b161326;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
}
.jsc.is-live .jsc__wire { animation: jsc-draw .7s cubic-bezier(.4,0,.2,1) var(--d, 0s) both; }
.jsc.is-done .jsc__wire { stroke-dashoffset: 0; }
@keyframes jsc-draw { to { stroke-dashoffset: 0; } }
.jsc__packet { fill: var(--brand--neon-green); opacity: 0; offset-rotate: 0deg; }
.jsc.is-live .jsc__packet { animation: jsc-flow 1.5s linear var(--d, 0s) infinite; }
@keyframes jsc-flow {
  0%   { offset-distance: 0%;   opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}

.jsc__hub {
  margin: 0 auto;
  width: 17cqw;
  height: 17cqw;
  border-radius: 50%;
  background: var(--brand--neutral-dark);
  display: grid;
  place-items: center;
  position: relative;
}
.jsc__hub::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: .7cqw solid var(--brand--neon-green);
  opacity: 0;
}
.jsc.is-live .jsc__hub::after { animation: jsc-ring 1.6s 1.1s infinite; }
@keyframes jsc-ring {
  0%   { opacity: .9; transform: scale(1); }
  70%  { opacity: 0;   transform: scale(1.55); }
  100% { opacity: 0;   transform: scale(1.55); }
}
.jsc__hub-bars { display: flex; align-items: flex-end; gap: .8cqw; height: 6cqw; }
.jsc__hub-bars i { display: block; width: 1.5cqw; border-radius: .8cqw; background: #fff; }
.jsc__hub-bars i:nth-child(1) { height: 45%; }
.jsc__hub-bars i:nth-child(2) { height: 70%; }
.jsc__hub-bars i:nth-child(3) { height: 100%; background: var(--brand--neon-green); }

.jsc__count {
  margin-top: auto;
  text-align: center;
  font-size: 7.4cqw;
  font-weight: 700;
  letter-spacing: -.02em;
}

/* ── карточка Б: реестр набирается строками ───────────────────────────────── */
.jsc__ledger { flex: 1; display: flex; flex-direction: column; justify-content: space-evenly; gap: 1.8cqw; }
.jsc__line {
  display: flex;
  align-items: center;
  gap: 2cqw;
  font-size: 3.3cqw;
  font-weight: 600;
  opacity: 0;
  transform: translateY(22%);
}
.jsc.is-live .jsc__line { animation: jsc-in .38s cubic-bezier(.22,.61,.36,1) var(--d, 0s) both; }
.jsc.is-done .jsc__line { opacity: 1; transform: none; }
.jsc__cat {
  padding: .9cqw 2.2cqw;
  border-radius: 99cqw;
  background: #0b16130d;
  font-size: 2.8cqw;
  font-weight: 500;
  color: var(--brand--neutral);
}
.jsc__amt { margin-left: auto; white-space: nowrap; }
.jsc__total {
  margin-top: auto;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-top: 3cqw;
  border-top: .55cqw solid #0b161314;
  font-weight: 700;
}
.jsc__total span:first-child { font-size: 3.4cqw; color: var(--brand--neutral-light); font-weight: 500; }
.jsc__total span:last-child  { font-size: 6cqw; letter-spacing: -.02em; }

/* ═══════════════════════════════════════════════════════════════════════════
   3. Start managing efficiently — приборная панель собирается
   ═══════════════════════════════════════════════════════════════════════════ */
.jsc__tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw; }
.jsc__tile {
  padding: 2.2cqw 2.4cqw;
  border-radius: 2cqw;
  background: #0b16130a;
  display: flex;
  flex-direction: column;
  gap: .6cqw;
}
.jsc__tile b { font-size: 3.9cqw; font-weight: 700; letter-spacing: -.02em; }
.jsc__tile span { font-size: 1.8cqw; font-weight: 500; color: var(--brand--neutral-light); }
.jsc__tile.is-flag { background: var(--brand--neon-green); }
.jsc__tile.is-flag span { color: #0b1613aa; }

.jsc__chart {
  flex: 1;
  display: flex;
  align-items: flex-end;
  gap: 1.4cqw;
  padding-top: 1cqw;
}
.jsc__bar {
  flex: 1;
  border-radius: 1cqw 1cqw .3cqw .3cqw;
  background: #0b161318;
  height: var(--h);
  transform: scaleY(0);
  transform-origin: 50% 100%;
}
.jsc__bar.is-peak { background: var(--brand--neon-green); }
.jsc.is-live .jsc__bar { animation: jsc-grow .6s cubic-bezier(.22,.61,.36,1) var(--d, 0s) both; }
.jsc.is-done .jsc__bar { transform: none; }
@keyframes jsc-grow { to { transform: none; } }
.jsc__axis { display: flex; gap: 1.4cqw; }
.jsc__axis span { flex: 1; text-align: center; font-size: 1.7cqw; color: var(--brand--neutral-light); }

@media (prefers-reduced-motion: reduce) {
  .jsc *, .jsc *::after { animation: none !important; transition: none !important; }
  .jsc .jsc__in, .jsc .jsc__src, .jsc .jsc__line { opacity: 1 !important; transform: none !important; }
  .jsc .jsc__bar { transform: none !important; }
  .jsc .jsc__wire { stroke-dashoffset: 0 !important; }
  .jsc .jsc__caret { opacity: 0 !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Ревил перенесённого блока тарифов
   ═══════════════════════════════════════════════════════════════════════════
   Блок трёх карточек перенесён на главную со страницы тарифов. Его элементы несут
   инлайновое предсостояние ревила (opacity:0 плюс сдвиг), но интерактив, который это
   предсостояние снимает, движок шаблона на главной не знает — блок просто оставался
   невидимым. Предсостояние снято при переносе, а появление сделано своим: та же
   длительность и кривая, что у ревилов шаблона — 700 мс outQuart, ступень задержки
   100 мс. */
[data-reveal] { opacity: 0; transform: translateY(15%); }
[data-reveal].is-in { animation: arvo-reveal .7s cubic-bezier(.165,.84,.44,1) var(--d, 0s) both; }
@keyframes arvo-reveal { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Фон тёмных панелей
   ═══════════════════════════════════════════════════════════════════════════
   У шаблона панель — пустая заливка #0b1613, и вокруг макетов остаётся большое
   чёрное поле. Кладём на него точечную сетку акцентом #2be8b6 шагом 26px:
   макеты как будто лежат на миллиметровке. Выбор владельца из шести вариантов,
   снятых с живой сборки (tools/bg-variants.mjs, tools/bg-choice.mjs).

   Рисуем псевдоэлементом, а не фоном самой панели: так фон отделён от заливки
   шаблона, и правка не спорит с её background-color. ::before идёт первым в
   порядке документа, а обёртки макетов позиционированы, поэтому карточки
   остаются поверх сетки. */
.journey_card-image-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background-image: radial-gradient(#2be8b62e 1.4px, #0000 1.5px);
  background-size: 26px 26px;
}