/* iKapitalist Private Markets — стили иммерсивных анимаций (экспорт).
   Все правила ограничены контейнером .ikx-scope: класс ставит сам скрипт на элементы,
   переданные в IKX.mount() и IKX.mountStory(). Глобальных правил для html, body,
   header, nav, a, * здесь нет. Шрифт Roboto подключает страница-хозяин. */

.ikx-scope {
  --ikx-ink: #132E48; --ikx-blue: #3097F4; --ikx-mute: #505965; --ikx-soft: #8A96A3;
  --ikx-line: #E3E8EE; --ikx-tint: #F4F8FC;
  --ikx-top: 0px;                                   /* высота закреплённой шапки сайта (ставит скрипт из опции offset) */
  --ikx-gut: max(24px, calc((100% - 1400px) / 2 + 72px));
  font-family: 'Roboto', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  color: var(--ikx-ink);
  line-height: 1.5;
}
.ikx-scope *, .ikx-scope *::before, .ikx-scope *::after { box-sizing: border-box; }
.ikx-scope a { color: inherit; text-decoration: none; }
.ikx-scope a:hover { color: var(--ikx-blue); }
.ikx-scope :focus-visible { outline: 2px solid var(--ikx-blue); outline-offset: 3px; border-radius: 4px; }
.ikx-scope .ikx-num { font-size: 14px; font-weight: 500; color: var(--ikx-blue); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.ikx-scope .ikx-kicker { margin: 0; font-size: 13px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ikx-blue); }
.ikx-scope .ikx-kicker span { text-transform: none; letter-spacing: 0.02em; }

/* ---------- оглавление кейсов (необязательно) ---------- */
.ikx-scope.ikx-idx { display: grid; border-top: 1px solid var(--ikx-line); }
.ikx-scope .ikx-idx__i { display: grid; grid-template-columns: 44px 1fr; column-gap: 12px; padding: 18px 4px; border-bottom: 1px solid var(--ikx-line); transition: background .2s ease, padding .2s ease; }
.ikx-scope .ikx-idx__i:hover { background: var(--ikx-tint); padding-left: 12px; }
.ikx-scope .ikx-idx__i .ikx-num { grid-row: span 2; align-self: start; padding-top: 3px; }
.ikx-scope .ikx-idx__t { font-size: 18px; font-weight: 500; line-height: 1.3; }
.ikx-scope .ikx-idx__c { font-size: 13px; color: var(--ikx-mute); margin-top: 2px; }

/* ---------- боковая навигация по кейсам (необязательно) ---------- */
.ikx-scope.ikx-rail { position: fixed; z-index: 40; right: 18px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 4px; }
.ikx-scope.ikx-rail a { display: block; padding: 4px 6px; font-size: 12px; font-weight: 500; color: var(--ikx-soft); border-right: 2px solid var(--ikx-line); text-align: right; font-variant-numeric: tabular-nums; }
.ikx-scope.ikx-rail a.is-on { color: var(--ikx-blue); border-right-color: var(--ikx-blue); }

/* ---------- кейс ---------- */
.ikx-scope .ikx-case { position: relative; background: #FFFFFF; }
.ikx-scope .ikx-case + .ikx-case .ikx-case__pin { border-top: 1px solid var(--ikx-line); }
.ikx-scope .ikx-case__pin {
  position: relative; height: calc(100vh - var(--ikx-top)); height: calc(100svh - var(--ikx-top)); overflow: hidden;
  display: grid; grid-template-columns: minmax(300px, 4fr) minmax(0, 7fr); gap: 48px; align-items: center;
  padding: 32px var(--ikx-gut) 28px; background: #FFFFFF;
}
.ikx-scope .ikx-case__text { position: relative; z-index: 2; }
.ikx-scope .ikx-case__head { margin: 0; display: flex; gap: 14px; align-items: baseline; }
.ikx-scope .ikx-cat { font-size: 13px; font-weight: 500; color: var(--ikx-mute); }
.ikx-scope .ikx-case__title { margin: 14px 0 0; font-size: clamp(30px, 3vw, 46px); font-weight: 400; line-height: 1.1; letter-spacing: -0.02em; color: var(--ikx-ink); }
.ikx-scope .ikx-case__title::after { content: ''; display: block; width: 48px; height: 3px; margin-top: 16px; background: var(--ikx-blue); border-radius: 2px; }
.ikx-scope .ikx-case__subj { margin: 16px 0 0; font-size: 15px; color: var(--ikx-mute); }
.ikx-scope .ikx-caps { position: relative; min-height: 112px; margin-top: 26px; }
.ikx-scope .ikx-cap { position: absolute; inset: 0 0 auto 0; margin: 0; font-size: 19px; line-height: 1.5; color: var(--ikx-ink); opacity: 0; visibility: hidden; }
.ikx-scope .ikx-cap.is-first { opacity: 1; visibility: visible; }
.ikx-scope .ikx-out { margin-top: 14px; padding-top: 20px; border-top: 1px solid var(--ikx-line); opacity: 0; visibility: hidden; }
.ikx-scope .ikx-out h3 { margin: 0; font-size: 13px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ikx-blue); }
.ikx-scope .ikx-out__work { margin: 8px 0 0; font-size: 16px; line-height: 1.5; color: var(--ikx-mute); }
.ikx-scope .ikx-ph { display: inline-block; padding: 3px 12px; border-radius: 999px; background: var(--ikx-tint); border: 1px dashed #C9D6E2; color: #6B7785; font-size: 14px; }
.ikx-scope .ikx-facts { display: grid; gap: 14px 22px; margin: 18px 0 0; }
.ikx-scope .ikx-facts--3 { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.ikx-scope .ikx-facts--3 > div { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 14px; align-items: baseline; padding-bottom: 10px; border-bottom: 1px solid var(--ikx-line); }
.ikx-scope .ikx-facts--3 dd { margin: 0; }
.ikx-scope .ikx-facts--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ikx-scope .ikx-facts--1 { grid-template-columns: minmax(0, 1fr); }
.ikx-scope .ikx-facts dt { font-size: clamp(24px, 2.1vw, 32px); font-weight: 300; line-height: 1.1; color: var(--ikx-ink); white-space: nowrap; }
.ikx-scope .ikx-facts dd { margin: 6px 0 0; font-size: 13px; line-height: 1.4; color: var(--ikx-mute); }
.ikx-scope .ikx-chips { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ikx-scope .ikx-chips li { display: inline-flex; gap: 8px; align-items: center; padding: 6px 12px; border-radius: 999px; background: var(--ikx-tint); border: 1px solid var(--ikx-line); font-size: 13px; }
.ikx-scope .ikx-chips em { font-style: normal; color: var(--ikx-soft); }
.ikx-scope .ikx-out__note { margin: 14px 0 0; font-size: 12px; line-height: 1.5; color: var(--ikx-soft); }
.ikx-scope .ikx-case__stage { position: relative; height: calc(100vh - var(--ikx-top) - 64px); height: calc(100svh - var(--ikx-top) - 64px); }
.ikx-scope .ikx-svg { display: block; width: 100%; height: 100%; max-width: none; }
.ikx-scope .ikx-case__disc { position: absolute; right: 0; bottom: 0; margin: 0; font-size: 12px; color: var(--ikx-soft); }

/* ---------- история по главам (главная Private Markets) ---------- */
.ikx-scope .ikx-story { position: relative; background: #FFFFFF; }
.ikx-scope .ikx-story__text { position: relative; z-index: 2; }
.ikx-scope .ikx-chaps { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 4px; }
.ikx-scope .ikx-chap { padding: 12px 0 10px; }
.ikx-scope .ikx-chap__bar { height: 2px; background: var(--ikx-line); border-radius: 2px; overflow: hidden; }
.ikx-scope .ikx-chap__bar i { display: block; height: 100%; background: var(--ikx-blue); transform: scaleX(0); transform-origin: 0 50%; }
.ikx-scope .ikx-chap__head { margin: 10px 0 0; display: flex; gap: 14px; align-items: baseline; font-size: 18px; font-weight: 500; color: var(--ikx-soft); transition: color .3s ease; }
.ikx-scope .ikx-chap.is-on .ikx-chap__head, .ikx-scope .ikx-chap.is-done .ikx-chap__head { color: var(--ikx-ink); }
.ikx-scope .ikx-chap.is-on .ikx-chap__head { font-size: 22px; }
.ikx-scope .ikx-chap__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s ease; }
.ikx-scope .ikx-chap__body > p { overflow: hidden; margin: 0; padding-left: 36px; font-size: 16px; line-height: 1.55; color: var(--ikx-mute); }
.ikx-scope .ikx-chap.is-on .ikx-chap__body { grid-template-rows: 1fr; }
.ikx-scope .ikx-chap.is-on .ikx-chap__body > p { padding-top: 8px; }
.ikx-scope .ikx-story__note { margin: 16px 0 0; font-size: 12px; line-height: 1.5; color: var(--ikx-soft); }

/* ---------- планшет ---------- */
@media (min-width: 900px) and (max-width: 1180px) {
  .ikx-scope .ikx-case__pin { grid-template-columns: minmax(280px, 5fr) minmax(0, 6fr); gap: 28px; }
  .ikx-scope .ikx-cap { font-size: 17px; }
  .ikx-scope.ikx-rail { display: none; }
}

/* ---------- телефон ---------- */
@media (max-width: 899.98px) {
  .ikx-scope { --ikx-gut: 20px; }
  .ikx-scope .ikx-case__pin { display: flex; flex-direction: column; gap: 6px; align-items: stretch; padding: 14px var(--ikx-gut) 14px; }
  .ikx-scope .ikx-case__text, .ikx-scope .ikx-story__text { display: contents; }
  .ikx-scope .ikx-case__head { order: 1; }
  .ikx-scope .ikx-case__title { order: 2; font-size: 25px; margin-top: 8px; }
  .ikx-scope .ikx-case__title::after { margin-top: 10px; width: 40px; }
  .ikx-scope .ikx-case__subj { order: 3; margin-top: 8px; font-size: 13px; }
  .ikx-scope .ikx-case__stage { order: 4; flex: none; height: auto; margin: 8px calc(var(--ikx-gut) * -1) 0; display: flex; flex-direction: column; }
  .ikx-scope .ikx-case__stage .ikx-svg { flex: 1; min-height: 0; }
  .ikx-scope .ikx-case__disc { position: static; padding: 2px var(--ikx-gut) 0; font-size: 11px; }
  .ikx-scope .ikx-swap { order: 5; position: relative; }
  .ikx-scope .ikx-caps { min-height: 92px; margin-top: 12px; }
  .ikx-scope .ikx-cap { font-size: 16px; }
  .ikx-scope .ikx-out { position: absolute; inset: 0 0 auto 0; margin-top: 12px; padding-top: 0; border-top: 0; background: #FFFFFF; }
  .ikx-scope .ikx-out__work { font-size: 14px; margin-top: 4px; }
  .ikx-scope .ikx-facts { gap: 8px 14px; margin-top: 10px; }
  .ikx-scope .ikx-facts dt { font-size: 22px; }
  .ikx-scope .ikx-facts dd { font-size: 12px; margin-top: 2px; }
  .ikx-scope .ikx-facts--3 { gap: 4px; }
  .ikx-scope .ikx-facts--3 > div { grid-template-columns: 122px minmax(0, 1fr); gap: 8px; padding-bottom: 4px; }
  .ikx-scope .ikx-out__note { display: none; }
  .ikx-scope .ikx-chips { margin-top: 10px; gap: 6px; }
  .ikx-scope .ikx-chips li { padding: 4px 10px; font-size: 12px; }
  .ikx-scope.ikx-rail { display: none; }
  .ikx-scope .ikx-story__text .ikx-kicker { order: 1; }
  .ikx-scope .ikx-story .ikx-case__stage { order: 2; }
  .ikx-scope .ikx-chaps { order: 3; margin-top: 10px; display: block; }
  .ikx-scope .ikx-chap { display: none; padding: 6px 0 0; }
  .ikx-scope .ikx-chap.is-on { display: block; }
  .ikx-scope .ikx-chap.is-on .ikx-chap__head { font-size: 19px; margin-top: 10px; }
  .ikx-scope .ikx-chap__body > p { padding-left: 0; font-size: 15px; }
  .ikx-scope .ikx-story__note { order: 4; font-size: 11px; }
}

/* ---------- без анимации: класс ikx-static ставит скрипт на контейнер ---------- */
.ikx-scope.ikx-static .ikx-case__pin { height: auto; overflow: visible; padding-top: 72px; padding-bottom: 72px; }
.ikx-scope.ikx-static .ikx-caps { min-height: 0; }
.ikx-scope.ikx-static .ikx-cap { position: static; opacity: 1; visibility: visible; margin-top: 10px; font-size: 17px; }
.ikx-scope.ikx-static .ikx-out { position: static; opacity: 1; visibility: visible; }
.ikx-scope.ikx-static .ikx-case__stage { height: 70vh; height: 70svh; }
.ikx-scope.ikx-static .ikx-out__note { display: block; }
.ikx-scope.ikx-static .ikx-chap__body { grid-template-rows: 1fr; }
.ikx-scope.ikx-static .ikx-chap__head { color: var(--ikx-ink); }
@media (max-width: 899.98px) {
  .ikx-scope.ikx-static .ikx-case__stage { height: auto; }
  .ikx-scope.ikx-static .ikx-chap { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  html:not(.adv-motion-on) .ikx-scope *, html:not(.adv-motion-on) .ikx-scope *::before, html:not(.adv-motion-on) .ikx-scope *::after { animation: none !important; transition: none !important; }
}
