/* =========================================================
   Ростехнопоисk — LAB: кинематографический слой главной
   Подключается ТОЛЬКО на index.html поверх style.css.
   Принцип: без JS страница остаётся обычным читаемым сайтом
   (постеры вместо видео), JS добавляет скролл-кино.
   ========================================================= */

:root {
  --lab-dim: 0;                 /* затемнение кино-слоя (ставит JS) */
  --hud-mono: ui-monospace, 'Cascadia Code', 'JetBrains Mono', Consolas, monospace;
}

html { scroll-behavior: auto; } /* плавность отдаёт Lenis; без JS — нативный скролл */

/* жёсткий запрет горизонтального увода страницы на мобильных:
   clip не создаёт scroll-контейнер (в отличие от hidden) и не ломает sticky */
html { overflow-x: clip; }
body { overflow-x: clip; touch-action: pan-y pinch-zoom; }
@supports not (overflow: clip) { body { overflow-x: hidden; } }

/* =========================================================
   КИНО-СЛОЙ: фиксированный canvas за контентом
   ========================================================= */
.cinema {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none;
  background: var(--bg);
  display: none;                /* включает JS, когда кадры готовы */
}
html.lab-on .cinema { display: block; }

.cinema__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* затемнение для читаемости контентных секций (управляет JS) */
.cinema__dim {
  position: absolute; inset: 0;
  background: #050706;
  opacity: var(--lab-dim);
  transition: opacity .25s linear;
}

/* виньетка + лёгкий градиент снизу */
.cinema__vignette {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 120% 90% at 50% 45%, transparent 55%, rgba(3, 5, 4, .55) 100%),
    linear-gradient(180deg, rgba(5, 7, 6, .35) 0%, transparent 18%, transparent 78%, rgba(5, 7, 6, .55) 100%);
}

/* =========================================================
   HUD-микродетали (декор, десктоп)
   ========================================================= */
.hud {
  position: fixed; inset: 0; z-index: 55; pointer-events: none; display: none;
  font-family: var(--hud-mono); font-size: .62rem; letter-spacing: .14em;
  color: rgba(153, 163, 155, .6); text-transform: uppercase;
}
@media (min-width: 1100px) { html.lab-on .hud { display: block; } }

.hud__corner { position: absolute; display: grid; gap: 4px; }
.hud__corner--tr { top: 92px; right: 30px; text-align: right; }
.hud__corner--br { bottom: 26px; right: 30px; text-align: right; }
.hud__corner--bl { bottom: 26px; left: 28px; }
.hud b { font-weight: 400; color: var(--accent-2); }
.hud__ready { color: rgba(153, 163, 155, .35); transition: color .4s var(--ease), text-shadow .4s var(--ease); }
.hud__ready.is-on { color: var(--accent-2); text-shadow: 0 0 10px var(--accent-glow); }

/* =========================================================
   BOOT-ЭКРАН: запуск лаборатории (поверх стилей style.css)
   ========================================================= */
.boot__title {
  font-family: var(--font-display); font-weight: 700; letter-spacing: .34em;
  font-size: .95rem; color: var(--text); margin-bottom: 8px; text-transform: uppercase;
}
.boot__sub {
  font-family: var(--hud-mono); font-size: .66rem; letter-spacing: .22em;
  color: var(--muted-2); text-transform: uppercase; margin-bottom: 26px;
}
.boot__core {
  margin-top: 14px; font-family: var(--hud-mono); font-size: .66rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--muted-2);
}
.boot__core b { font-weight: 400; color: var(--accent-2); text-shadow: 0 0 10px var(--accent-glow); }
/* страховка: при любой ошибке JS оверлей закрывается сам через 5с
   (при штатной работе он к этому моменту уже давно скрыт) */
@media (scripting: none) { .boot { display: none !important; } }
.boot { animation: bootAutoHide 0.5s 5s forwards; }
@keyframes bootAutoHide { to { opacity: 0; visibility: hidden; pointer-events: none; } }

/* =========================================================
   ОБЩЕЕ ДЛЯ СЕКЦИЙ ПОВЕРХ КИНО
   ========================================================= */
main { position: relative; z-index: 10; }

/* без JS / reduced-motion: постеры этапов как фон секций */
.stage-poster {
  position: absolute; inset: 0; z-index: -1; overflow: hidden; display: none;
}
.stage-poster img { width: 100%; height: 100%; object-fit: cover; opacity: .38; }
.stage-poster::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--bg) 0%, transparent 22%, transparent 70%, var(--bg) 100%);
}
html:not(.lab-on) .stage-poster { display: block; }

/* =========================================================
   HERO — DESCENT
   ========================================================= */
.hero--lab { min-height: 100svh; padding: 0; display: block; overflow: visible; }
.hero__sticky {
  position: sticky; top: 0; min-height: 100svh; min-height: 100dvh;
  display: flex; align-items: center; overflow: hidden;
}
html:not(.lab-on) .hero__sticky { position: relative; }

/* крупная фоновая типографика, не перекрывает робота по центру */
.hero__bgword {
  position: absolute; left: 50%; bottom: 4vh; transform: translateX(-50%);
  z-index: 0; pointer-events: none; user-select: none; white-space: nowrap;
  font-family: var(--font-display); font-weight: 700; letter-spacing: .06em;
  font-size: clamp(3rem, 10.5vw, 10rem); line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(241, 244, 240, .07);
  opacity: .8;
}

.hero--lab .hero__inner { max-width: 760px; }
.hero--lab .hero__title { text-wrap: balance; }
.hero--lab .hero__lead { max-width: 560px; }

.hero__scrollhint {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-family: var(--hud-mono); font-size: .62rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--muted-2);
}
.hero__scrollhint::after {
  content: ''; width: 1px; height: 34px;
  background: linear-gradient(180deg, var(--accent), transparent);
  animation: hintDrop 1.8s var(--ease) infinite;
}
@keyframes hintDrop { 0% { transform: scaleY(0); transform-origin: top; } 55% { transform: scaleY(1); } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* =========================================================
   МАНИФЕСТ — ASSEMBLY: фразы по одной поверх сборки
   ========================================================= */
.manifest { position: relative; }
.manifest__sticky {
  position: sticky; top: 0; min-height: 100svh; min-height: 100dvh;
  display: grid; place-items: center; align-content: center; overflow: hidden;
}
.manifest__phrase {
  grid-area: 1 / 1; text-align: center; padding: 0 24px;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.9rem, 5.4vw, 4.2rem); letter-spacing: -0.02em; line-height: 1.08;
  opacity: 0; transform: translateY(26px) scale(.985);
  will-change: opacity, transform;
}
.manifest__phrase .accent { animation: none; } /* без пёстрого шиммера в кино */
.manifest__num {
  display: block; margin-bottom: 18px;
  font-family: var(--hud-mono); font-weight: 400; font-size: .68rem;
  letter-spacing: .3em; color: var(--accent-2); text-transform: uppercase;
}
/* без JS фразы показываются списком */
html:not(.lab-on) .manifest__sticky { min-height: 0; padding: clamp(70px, 10vw, 130px) 0; }
html:not(.lab-on) .manifest__phrase {
  position: static; opacity: 1; transform: none; grid-area: auto;
  margin: 28px 0;
}

/* =========================================================
   УСЛУГИ — лабораторные модули
   ========================================================= */
.section--lab { background: transparent; }
.section--lab .card {
  background: rgba(14, 18, 15, .82);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.card__code {
  font-family: var(--hud-mono); font-size: .6rem; letter-spacing: .18em;
  color: var(--muted-2); text-transform: uppercase; display: block; margin-bottom: 6px;
}
.card.is-open .card__code, .card:hover .card__code { color: var(--accent-2); }

/* =========================================================
   КЛИЕНТЫ — контур подключённых систем
   ========================================================= */
.section--clients-lab .client {
  background: rgba(14, 18, 15, .82);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  position: relative;
}
.client__status {
  position: absolute; top: 12px; right: 14px; display: flex; align-items: center; gap: 6px;
  font-family: var(--hud-mono); font-size: .56rem; letter-spacing: .16em;
  color: var(--muted-2); text-transform: uppercase;
}
.client__status::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 7px var(--accent);
}

/* Клиент в ожидании подключения: логотип приглушён, пока нет
   официального согласия на размещение. Чтобы вернуть обычный вид,
   убрать класс client--pending и заменить текст бейджа на Online. */
.client--pending img { filter: grayscale(1); opacity: .28; }
.client--pending:hover img { opacity: .36; }
.client--pending .client__status { color: var(--muted-2); opacity: .7; }
.client--pending .client__status::before {
  background: var(--muted-2); box-shadow: none;
}

/* =========================================================
   ПОДХОД — ORCHESTRATION: принципы по одному
   ========================================================= */
.approach-lab { position: relative; }
.approach-lab__sticky {
  position: sticky; top: 0; min-height: 100svh; min-height: 100dvh;
  display: grid; place-items: center; align-content: center; overflow: hidden;
}
.approach-lab__head {
  position: absolute; top: clamp(84px, 12vh, 130px); left: 0; right: 0; text-align: center;
}
.principle {
  grid-area: 1 / 1; max-width: 640px; padding: 0 24px; text-align: center;
  opacity: 0; transform: translateY(26px);
  will-change: opacity, transform;
}
.principle__num {
  font-family: var(--hud-mono); font-size: .7rem; letter-spacing: .3em;
  color: var(--accent-2); text-transform: uppercase;
}
.principle__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.7rem, 4.6vw, 3.2rem); letter-spacing: -0.02em; margin: 16px 0 14px;
}
.principle__text { color: var(--muted); font-size: clamp(1rem, 1.6vw, 1.13rem); max-width: 560px; margin: 0 auto; }
html:not(.lab-on) .approach-lab__sticky { min-height: 0; padding: clamp(70px, 10vw, 130px) 0 40px; display: block; }
html:not(.lab-on) .approach-lab__head { position: static; margin-bottom: 50px; }
html:not(.lab-on) .principle { opacity: 1; transform: none; margin: 0 auto 44px; }

/* =========================================================
   ЭТАПЫ РАБОТЫ: техническая линия прогресса
   ========================================================= */
.steps--lab .step {
  background: rgba(14, 18, 15, .82);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
@media (max-width: 1024px) {
  .steps--lab { grid-template-columns: 1fr; position: relative; padding-left: 26px; }
  .steps--lab::before {
    content: ''; position: absolute; left: 8px; top: 20px; bottom: 20px; width: 2px;
    background: linear-gradient(180deg, var(--accent), rgba(52, 211, 153, .25));
    box-shadow: 0 0 12px var(--accent-glow);
  }
}

/* =========================================================
   ФИНАЛЬНЫЙ CTA — DEPLOYMENT
   ========================================================= */
.cta-lab { position: relative; padding: clamp(120px, 16vw, 220px) 0 clamp(80px, 10vw, 140px); }
.cta-lab__head { text-align: center; margin-bottom: clamp(60px, 8vw, 110px); }
.cta-lab__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.3rem, 6.4vw, 5rem); line-height: 1.04; letter-spacing: -0.03em;
  text-wrap: balance;
}
.cta-lab__lead { color: var(--muted); font-size: clamp(1.02rem, 1.9vw, 1.25rem); max-width: 560px; margin: 22px auto 34px; }

.section--contact-lab { background: transparent; border-top: none; }
.section--contact-lab .form {
  background: rgba(14, 18, 15, .88);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}

/* подвал поверх тёмной подложки, чтобы кино не мешало */
.footer { position: relative; z-index: 10; background: rgba(9, 10, 9, .92); }

/* =========================================================
   ВЫСОТЫ КИНО-СЕКЦИЙ (только при включённом кино)
   ========================================================= */
html.lab-on .hero--lab { height: 300vh; }
html.lab-on .manifest { height: 320vh; }
html.lab-on .approach-lab { height: 340vh; }
@media (max-width: 820px) {
  html.lab-on .hero--lab { height: 240vh; }
  html.lab-on .manifest { height: 260vh; }
  html.lab-on .approach-lab { height: 280vh; }
}

/* =========================================================
   МОБИЛЬНАЯ ВЕРСИЯ
   ========================================================= */
@media (max-width: 1099px) {
  .hud { display: none !important; }
  .hero__bgword { font-size: clamp(2.2rem, 11vw, 4.6rem); bottom: 9vh; }
}
@media (max-width: 560px) {
  .manifest__phrase { font-size: clamp(1.7rem, 8.4vw, 2.3rem); }
  .principle__title { font-size: clamp(1.5rem, 7.4vw, 2.1rem); }
  .cta-lab__title { font-size: clamp(1.9rem, 8.6vw, 2.6rem); }
  .hero--lab .hero__title { font-size: clamp(2rem, 10vw, 3.2rem); }
  .hero--lab .hero__lead { font-size: 1.12rem; }
  .hero__scrollhint { bottom: 16px; font-size: .58rem; }
  .hero__scrollhint::after { height: 26px; }
}

/* =========================================================
   ДОСТУПНОСТЬ / REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  html.lab-on .cinema { display: none; }
  html.lab-on .hud { display: none !important; }
  .stage-poster { display: block !important; }
  .hero__sticky, .manifest__sticky, .approach-lab__sticky { position: relative !important; min-height: 0 !important; }
  .manifest__sticky { padding: clamp(70px, 10vw, 130px) 0; display: block; }
  .manifest__phrase { position: static; opacity: 1 !important; transform: none !important; margin: 28px 0; }
  .approach-lab__sticky { padding: clamp(70px, 10vw, 130px) 0 40px; display: block; }
  .approach-lab__head { position: static; margin-bottom: 50px; }
  .principle { opacity: 1 !important; transform: none !important; margin: 0 auto 44px; }
  .hero__scrollhint { display: none; }
}