/* ============================================================
   БЛОК 2 — «Kompleksowe centrum usług» (scroll-driven)
   Figma 2.x_block (560:755 / 560:815 / 560:873 + 2.1). Эталон 1440×848.
   Pinned-секция: 4 состояния. При скролле меняются центральная сцена,
   призрачная цифра (запечена в сцену), правый блок и прогресс-бар.
   ============================================================ */
.b2 { position: relative; background: var(--dark-1100); }

/* трек прокрутки — 4 состояния × 100vh */
.b2-scroll { position: relative; height: 400vh; }

.b2-pin {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 100%),
    var(--dark-1100);
}

/* сцена 1440×800 (Figma 900:1934), масштабируется под экран (вписывается целиком) */
.b2-stage {
  position: relative; width: 1440px; height: 800px; flex: none;
  transform: scale(var(--b2-scale, 1)); transform-origin: center center;
}

/* blur→чёткость reveal при входе секции (лёгкое: opacity+filter, разово) */
.b2-reveal {
  opacity: 0; filter: blur(12px); transform: translateY(10px);
  transition: opacity .7s ease, filter .7s ease, transform .7s cubic-bezier(.22,.61,.36,1);
}
.b2.is-in .b2-reveal { opacity: 1; filter: blur(0); transform: none; }
.b2.is-in .b2-reveal--2 { transition-delay: .12s; }
.b2.is-in .b2-reveal--3 { transition-delay: .22s; }
@media (prefers-reduced-motion: reduce) {
  .b2-reveal { opacity: 1; filter: none; transform: none; transition: none; }
}

/* ---- вертикальные линии-паттерн (9 шт., шаг 158.11, первая x≈87.5) ---- */
.b2-lines { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
/* ровно 9 вертикальных линий на точных x из Figma 900:1935 — без repeat, без дрейфа/лишних полос */
.b2-lines::before {
  content: ""; position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  width: 1440px; height: 100%;
  --l: rgba(255,255,255,.045);
  background-image:
    linear-gradient(90deg, transparent 91px,   var(--l) 91px,   var(--l) 92px,   transparent 92px),
    linear-gradient(90deg, transparent 248px,  var(--l) 248px,  var(--l) 249px,  transparent 249px),
    linear-gradient(90deg, transparent 405px,  var(--l) 405px,  var(--l) 406px,  transparent 406px),
    linear-gradient(90deg, transparent 562px,  var(--l) 562px,  var(--l) 563px,  transparent 563px),
    linear-gradient(90deg, transparent 720px,  var(--l) 720px,  var(--l) 721px,  transparent 721px),
    linear-gradient(90deg, transparent 877px,  var(--l) 877px,  var(--l) 878px,  transparent 878px),
    linear-gradient(90deg, transparent 1034px, var(--l) 1034px, var(--l) 1035px, transparent 1035px),
    linear-gradient(90deg, transparent 1191px, var(--l) 1191px, var(--l) 1192px, transparent 1192px),
    linear-gradient(90deg, transparent 1348px, var(--l) 1348px, var(--l) 1349px, transparent 1349px);
  background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 100%);
}

/* ---- заголовок (постоянный) ---- */
.b2-head {
  position: absolute; top: 88px; left: 402px;   /* фикс-координата: transform занят reveal-анимацией */
  width: 636px; margin: 0; z-index: 4; text-align: center;   /* Figma 899:1895: 636×144 (2×72) */
  font-family: var(--ff-display); font-weight: 700; font-style: italic;
  font-size: 72px; line-height: 72px; text-transform: uppercase;
  background: linear-gradient(180deg, #ffffff 38.834%, #787674 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: normal; }
/* пунктирная линия под заголовком (Line 15: 667px, наклон −1.83°), поднята на 26px */
.b2-line15 {
  position: absolute; top: 223px; left: 50%;
  transform: translate(-50%, -50%) rotate(-1.83deg);
  width: 667px; height: 1px; z-index: 1; pointer-events: none;
}
.b2-line15 svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* ---- подзаголовок слева (постоянный) ---- */
.b2-sub {
  position: absolute; left: 88px; top: 300px; width: 259px; z-index: 4; margin: 0;   /* Figma 900:1922 */
  font-family: var(--ff-body); font-weight: 400; font-size: 32px; line-height: 40px;
  color: var(--light-1000);
}
.b2-sub b { font-weight: 700; letter-spacing: normal; }

/* ---- центральная сцена = ОТДЕЛЬНЫЕ СЛОИ ----
   щит-свечение (постоянное) + цифра (live, отдельно) + изображение (меняется).
   Цифра НЕ запечена в фото → смена цифры не трогает пропорции картинки. */
.b2-scenes { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
/* щит «lg bg» — янтарное V-свечение позади гаража (Figma 899:1883: 280×368 @ 580,288) */
.b2-glow {
  position: absolute; left: 50%; top: 288px; margin-left: -140px;
  width: 280px; height: 368px; max-width: none; z-index: 1;
  mix-blend-mode: screen; pointer-events: none;
}
/* цифра — тёмная гигант-цифра, live-слой (Figma 899:1893: 280px @ y=226, градиент 0e→06) */
.b2-num {
  position: absolute; left: 50%; top: 226px; transform: translateX(-50%);
  z-index: 2; margin: 0;
  font-family: var(--ff-display); font-weight: 700; font-style: normal;
  font-size: 280px; line-height: 280px; letter-spacing: -6px;
  background: linear-gradient(180deg, #0e0e0e 17.491%, #060606 75.925%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  user-select: none; pointer-events: none; white-space: nowrap;
}
/* постоянный гараж-база (Figma 899:1898: 571 ширина @ x=424, y=264) — НЕ двигаем */
.b2-garage {
  position: absolute; left: 424px; top: 264px;
  width: 571px; height: auto; max-width: none; z-index: 3;
}
/* накладки состояний (команда / авто+шины+Bosch / геометрия) — 1710×804 в одном
   масштабе с гаражом (461px). Опущены на 80px (bottom 202→122) и сдвинуты вправо на 24px. */
.b2-layer {
  position: absolute; left: 491px; bottom: 122px;     /* −12px к центру (503→491) */
  width: 461px; height: auto; max-width: none; z-index: 4;
  opacity: 0; transition: opacity .5s ease;
  will-change: opacity;
}
.b2-layer.is-active { opacity: 1; }

/* ---- правый блок-описание (Figma 900:1946: x=1093, y=288, 259) ---- */
.b2-desc { position: absolute; left: 1093px; top: 288px; width: 259px; min-height: 252px; z-index: 4; }
.b2-card {
  position: absolute; left: 0; top: 0; width: 259px;
  display: flex; flex-direction: column; gap: 24px;
  opacity: 0; transform: translateY(18px);
  transition: opacity .5s ease, transform .55s cubic-bezier(.22,.61,.36,1);
  pointer-events: none;
}
.b2-card.is-active { opacity: 1; transform: none; pointer-events: auto; }
.b2-ico {
  width: 64px; height: 64px; flex: none; border-radius: 8px;
  background: var(--light-40); color: var(--light-1000);
  display: flex; align-items: center; justify-content: center;
}
.b2-ico svg { width: 32px; height: 32px; display: block; }
.b2-ico img { width: 32px; height: 32px; display: block; object-fit: contain; }
.b2-card__text { display: flex; flex-direction: column; gap: 16px; }
.b2-card__title {
  margin: 0; font-family: var(--ff-body); font-weight: 700;
  font-size: 28px; line-height: 35px; text-transform: uppercase; color: var(--light-1000); letter-spacing: normal; }
.b2-card__desc {
  margin: 0; font-family: var(--ff-body); font-weight: 400;
  font-size: 18px; line-height: 26px; letter-spacing: var(--ls-body); color: rgba(255,255,255,.63);   /* Figma 900:1928: h78 = 3×26 */
}

/* ---- прогресс-бар ---- */
.b2-progress {
  position: absolute; left: 446px; top: 684px; width: 548px; height: 28px; z-index: 4;   /* Figma 900:1916 */
  display: flex; align-items: center; gap: 16px;
}
.b2-pnum {
  font-family: var(--ff-body); font-weight: 400; font-size: 18px; line-height: 28px;
  letter-spacing: var(--ls-body); color: rgba(255,255,255,.63); white-space: nowrap;
}
.b2-bar { flex: 1 1 0; min-width: 0; height: 6px; background: #161616; border-radius: 100px; overflow: hidden; }
.b2-bar-fill { height: 6px; width: 25%; background: var(--light-1000); border-radius: 100px; transition: width .12s linear; }

/* появление сцены при входе блока (вместе с blur-reveal текста):
   гараж «приезжает снизу и фиксируется», свечение и цифра проявляются.
   Лёгкое: только transform+opacity, разово по .is-in (sticky-pin держит блок). */
.b2-garage { transition: opacity .85s ease, transform .9s cubic-bezier(.22,.61,.36,1); }
.b2-glow   { transition: opacity 1s ease .1s; }
.b2-num    { transition: opacity .9s ease, transform .9s cubic-bezier(.22,.61,.36,1); }
.b2:not(.is-in) .b2-garage { opacity: 0; transform: translateY(70px) scale(1.06); }
.b2:not(.is-in) .b2-glow   { opacity: 0; }
.b2:not(.is-in) .b2-num    { opacity: 0; transform: translateX(-50%) translateY(48px); }

@media (prefers-reduced-motion: reduce) {
  .b2-layer, .b2-card, .b2-garage, .b2-glow, .b2-num { transition: none; }
  .b2:not(.is-in) .b2-garage { opacity: 1; transform: none; }
  .b2:not(.is-in) .b2-glow { opacity: 1; }
  .b2:not(.is-in) .b2-num { opacity: 1; transform: translateX(-50%); }
}

/* ============================================================
   АДАПТИВ — второй блок на мобайле (≤768px).
   Та же scroll-механика (JS переключает состояния), но контент
   перекомпонован в колонку: заголовок → сцена → описание → прогресс.
   Масштаб (--b2-scale) отключаем — раскладываем нормальным потоком.
   ============================================================ */
@media (max-width: 768px) {
  .b2-scroll { height: 420vh; }
  .b2-pin {
    height: 100svh; height: 100dvh;   /* dvh = живая высота вьюпорта iOS: не вылазит за тулбар Safari (раньше 100vh давал чёрную полосу при скролле вверх) */
    align-items: stretch;
  }
  .b2-stage {
    transform: none; width: 100%; height: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 22px 16px 26px;
  }
  .b2-lines::before { background-position: 24px 0; background-size: 120px 100%; }
  /* dash под заголовком (Figma 941:4019): ширина ~326, наклон −2.09°, прижат под тайтл */
  .b2-line15 { position: static; transform: rotate(-2.09deg); width: min(326px, calc(100% - 14px)); margin: 2px auto 0; }

  .b2-head {
    position: static; transform: none; width: 100%; max-width: 420px;   /* контейнер чуть шире */
    font-size: 40px; line-height: 40px; margin: 4px 0 0;   /* Figma 941:4020 — Druk 40/40 */
  }
  /* десктопный <br> (после «usług») даёт 3 строки на мобайле → убираем,
     естественный перенос укладывает заголовок в 2 строки */
  .b2-head br { display: none; }
  .b2-sub {
    position: static; width: 100%; max-width: 343px; margin: 12px 0 0;
    font-size: 18px; line-height: 26px; letter-spacing: var(--ls-body);   /* Figma 941:4021 — 18/26 */
    text-align: center; color: var(--light-600);
  }
  .b2-sub b { color: var(--light-1000); }

  /* сцена — фикс-высота (дети absolute → нужна явная высота), слои по центру */
  .b2-scenes {
    position: relative; left: auto; right: auto; bottom: auto; top: auto;
    width: 100%; height: 34vh; flex: none; margin: 12px 0;
  }
  .b2-glow {
    left: 50%; top: auto; bottom: 6%; margin-left: 0; transform: translateX(-50%);
    width: 170px; height: 224px;   /* Figma 941:4068 — фоновый щит 170×224 */
  }
  .b2-num {
    left: 50%; top: 50%; transform: translate(-50%, -64%);
    font-size: 150px; line-height: 150px;
  }
  .b2-garage {
    left: 50%; top: auto; bottom: 4%; transform: translateX(-50%);
    width: auto; max-width: 100%; max-height: 96%;
  }
  .b2-layer {
    left: 50%; bottom: 7%; transform: translateX(-50%);
    width: auto; max-width: 92%; max-height: 86%;
  }

  /* описание — фикс-высота под самую длинную карточку, кроссфейд по центру */
  /* блок-преимущество (Figma 941:4052): по центру, gap 24, иконка 64 + backdrop-blur */
  .b2-desc {
    position: relative; left: auto; top: auto;
    width: 100%; max-width: 360px; height: 224px; min-height: 0;
  }
  .b2-card { justify-content: center; }
  .b2-card {
    /* база: position:absolute; left:0; width:259px → карточка липла к левому краю.
       На мобайле тянем на всю ширину .b2-desc → контент строго по центру. */
    left: 0; right: 0; width: 100%;
    align-items: center; text-align: center; gap: 24px;
  }
  .b2-card.is-active { transform: translate(0, 0); }
  .b2-ico {
    width: 64px; height: 64px;
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  }
  .b2-ico svg { width: 32px; height: 32px; }
  .b2-ico img { width: 32px; height: 32px; }
  .b2-card__text { align-items: center; gap: 12px; }
  .b2-card__title { font-size: 20px; line-height: 28px; letter-spacing: .02em; }   /* +трекинг: на мобилке жирный аплкейс налазил при −6% (как в услугах) */
  .b2-card__desc { font-size: 16px; line-height: 24px; letter-spacing: var(--ls-body); }

  /* прогресс — снизу, на всю ширину */
  .b2-progress {
    position: static; width: 100%; max-width: 340px; height: auto; margin-top: 14px;
  }
  .b2-pnum { font-size: 15px; line-height: 22px; }

  .b2-footer { display: none; }
}