/* История при прокрутке: кадры из Blender на холсте (R9, раздел 7). Устройство — эталон 3D-истории, цвета — сталь и жёлтый ON. */
.film{position:relative;background:var(--steel);border-top:1px solid var(--line)}
.film-stage{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--steel)}
.film-stage canvas,.film-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.film-stage picture{display:contents}
.film-scrim{position:absolute;inset:0;pointer-events:none;transition:opacity .5s;
  background:linear-gradient(90deg,rgba(13,14,16,.92) 0%,rgba(13,14,16,.78) 30%,rgba(13,14,16,0) 52%),
             linear-gradient(0deg,rgba(13,14,16,.85) 0%,rgba(13,14,16,0) 20%)}
.film.bare .film-scrim{opacity:0}
.film-progress{position:absolute;right:18px;top:40%;height:20%;width:1px;background:rgba(242,243,244,.14)}
.film-progress i{display:block;width:100%;height:100%;background:var(--yellow);transform-origin:top;transform:scaleY(0)}
.film-stage + .film-step{margin-top:-100svh}
.film-step{position:relative;z-index:2;min-height:100svh;padding:max(110px,22svh) clamp(20px,5vw,72px) 100px;max-width:min(720px,50vw)}
.film-gap{min-height:150svh}
.story-copy{opacity:0;transform:translateY(26px);transition:opacity .6s,transform .6s;position:sticky;top:max(110px,22svh)}
.film-step.on .story-copy{opacity:1;transform:none}
.story-copy .no{display:block;font-size:12.5px;letter-spacing:.2em;color:var(--yellow);margin-bottom:18px}
.story-copy h2{font-size:clamp(32px,3.8vw,54px);font-weight:500;line-height:1.08;letter-spacing:-.02em;margin:0 0 18px}
.story-copy p{color:var(--grey);font-size:17px;line-height:1.6;max-width:40ch}
.story-copy .btn{margin-top:28px}
@media (max-width:760px){
  /* кадр во всю ширину окна, высотой не больше 54 % экрана (лишнее подрезается сверху и снизу): под картинкой остаётся место тексту,
     а на суженном окне шире телефона картинка не стоит узким квадратом посередине */
  .film{--sq:min(100vw,54svh)}
  .film-stage canvas,.film-poster{inset:auto;top:62px;left:0;width:100%;height:var(--sq);aspect-ratio:auto;object-fit:cover;object-position:50% 46%}
  .film-scrim{background:linear-gradient(180deg,rgba(13,14,16,0) 40%,rgba(13,14,16,.96) 56%)}
  .film-progress{display:none}
  .film-step{max-width:none;padding:0 22px}
  .story-copy{top:calc(62px + var(--sq) + 18px);transition:opacity .15s,transform .6s}
  .film-step.on .story-copy{transition:opacity .5s,transform .5s}
  .story-copy h2{font-size:28px;margin-bottom:10px}
  .story-copy p{font-size:15px}
  .story-copy .btn{margin-top:16px}
}
@media (prefers-reduced-motion:reduce){
  .film-stage canvas{display:none}
  .story-copy{opacity:1;transform:none}
}

/* Сквозная нить: ось по левому краю, дорисовывается прокруткой до формы; головка — марка оси */
.thread-wrap{position:relative}
.thread{position:absolute;left:clamp(8px,1.6vw,24px);top:0;bottom:0;width:2px;pointer-events:none;z-index:3}
.thread::before{content:"";position:absolute;inset:0;background:rgba(242,243,244,.07)}
.thread i{position:absolute;left:0;top:0;width:100%;height:100%;background:var(--yellow);transform-origin:top;transform:scaleY(var(--t,0));
  box-shadow:0 0 10px rgba(255,212,0,.45)}
.thread b{position:absolute;left:50%;top:calc(var(--t,0) * 100%);width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;
  border:2px solid var(--yellow);background:var(--steel);box-shadow:0 0 12px rgba(255,212,0,.5)}
@media (max-width:760px){.thread{left:6px;width:1.5px}.thread b{width:10px;height:10px;margin:-5px 0 0 -5px}}

/* «Здание должно работать вместе с производством»: кадр боли полосой в начале раздела */
.pain-band{position:relative;height:min(70vh,700px);margin:0 0 -4vh;overflow:hidden}
.pain-band img{width:100%;height:100%;object-fit:cover;object-position:62% 40%;display:block}
.pain-band::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,var(--steel) 0%,rgba(13,14,16,0) 14%,rgba(13,14,16,0) 58%,var(--steel) 100%)}
#approach{padding-top:0}
#approach>.wrap{position:relative;z-index:2}
@media (max-width:760px){.pain-band{height:46vh;margin-bottom:0}.pain-band img{object-position:44% 40%}}

/* «Что держим в поле зрения»: рама в чертёжном режиме */
.check-fig{margin:40px 0 0;position:relative;overflow:hidden;border-radius:16px;border:1px solid var(--line);background:var(--steel)}
.check-fig img{width:100%;height:auto;display:block;transform:scale(1.06);transition:transform 1.8s cubic-bezier(.2,.7,.2,1)}
.check-fig.vis img{transform:none}
@media (prefers-reduced-motion:reduce){.check-fig img{transform:none;transition:none}}

/* Карточки «Фиксируем не только тонны металла»: у каждой свой предмет */
.card .part{width:120px;height:120px;object-fit:contain;margin:-6px 0 10px -8px;filter:drop-shadow(0 10px 22px rgba(0,0,0,.5));transition:transform .5s}
@media(hover:hover){.card:hover .part{transform:translateY(-5px) rotate(-3deg)}}

/* Форма: ось страницы приходит в НАСТОЯЩУЮ кнопку, профиль балки встаёт в неё — кнопка загорается */
#request{position:relative}
.lead-wire{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;overflow:visible}
.lead-wire path{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lead-wire .lw-base{stroke:rgba(242,243,244,.07)}
.lead-wire .lw-live{stroke:var(--yellow);filter:drop-shadow(0 0 6px rgba(255,212,0,.5))}
.lead-spark{position:absolute;left:0;top:0;z-index:3;width:30px;height:22px;margin:-11px 0 0 -15px;pointer-events:none;opacity:0;will-change:transform,opacity;
  background:linear-gradient(var(--yellow),var(--yellow)) top/100% 5px no-repeat,linear-gradient(var(--yellow),var(--yellow)) bottom/100% 5px no-repeat,
             linear-gradient(var(--yellow),var(--yellow)) center/5px 100% no-repeat;filter:drop-shadow(0 0 8px rgba(255,212,0,.65))}
#request form .btn{transition:transform .2s,box-shadow .45s}
#request form.lead-lit .btn{box-shadow:0 0 0 2px rgba(255,212,0,.55),0 0 0 8px rgba(255,212,0,.12),0 10px 44px rgba(255,212,0,.45)}
#request form textarea{transition:border-color .4s}
#request form.lead-row textarea{border-bottom-color:var(--yellow)}
@media (prefers-reduced-motion:reduce){.lead-spark{display:none}}
@media (max-width:760px){.lead-spark{width:22px;height:16px;margin:-8px 0 0 -4px}}

/* ── Правка 04.10.2026 (ночь), замечания Эльхана ── */
/* тонкая полоска-индикатор справа от кадра не нужна */
.film-progress{display:none}
/* Последняя сцена: текст уходит вверх вместе с кадром. Раньше он оставался приклеенным, кадр уезжал под ним,
   и линия из кадра перечёркивала заголовок. Нижний отступ шага = высота экрана − место текста − его высота. */
.film-step:last-of-type{padding-bottom:max(0px,calc(80svh - 16rem))}
@media (max-width:760px){.film-step:last-of-type{padding-bottom:max(0px,calc(100svh - var(--sq) - 80px - 14rem))}}

/* ── Гуляющая линия расчёта (route.js): одна линия от начала страницы до настоящей кнопки, между разделами переходит с края на край ── */
.thread{display:none}
.route{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:6;overflow:visible}
.route path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.route-base{stroke:rgba(242,243,244,.09);stroke-width:1.5}
.route-glow{stroke:rgba(255,212,0,.22);stroke-width:7}
.route-live{stroke:var(--yellow);stroke-width:2}
.route-tip{position:absolute;left:0;top:0;z-index:7;width:44px;height:44px;margin:-22px 0 0 -22px;pointer-events:none;opacity:0;will-change:transform,opacity;
  background:url(assets/parts/ibeam.webp) center/contain no-repeat;filter:drop-shadow(0 0 10px rgba(255,212,0,.55)) drop-shadow(0 6px 10px rgba(0,0,0,.6))}
@media (max-width:760px){.route-tip{width:26px;height:26px;margin:-13px 0 0 -13px}}
@media (prefers-reduced-motion:reduce){.route-tip{display:none}}

/* ── Движение по прокрутке (--par задаёт film.js). translate/rotate/scale отдельные — не спорят с анимациями transform ── */
.kb[data-par]>img{scale:1.12;translate:0 calc(var(--par,0) * -5%)}
.texbg[data-par]>img{scale:1.1;translate:0 calc(var(--par,0) * -4%)}
.pain-band[data-par] img{translate:0 calc(var(--par,0) * -22px)}
.check-fig[data-par] img{translate:0 calc(var(--par,0) * -16px)}
.card .part[data-par]{translate:0 calc(var(--par,0) * -22px);rotate:calc(var(--par,0) * -7deg)}
.obj{pointer-events:none;height:auto;z-index:2;filter:drop-shadow(0 18px 26px rgba(0,0,0,.6));
  translate:0 calc(var(--par,0) * -44px);rotate:calc(var(--par,0) * -6deg);will-change:translate,rotate}
@media (prefers-reduced-motion:reduce){.obj,.card .part[data-par]{translate:none;rotate:none}}

/* Полоса прокрутки в цветах сайта */
html{scrollbar-color:var(--yellow) #17181b}
@supports not (scrollbar-color:auto){::-webkit-scrollbar{width:12px}::-webkit-scrollbar-track{background:#17181b}::-webkit-scrollbar-thumb{background:var(--yellow);border-radius:8px;border:3px solid #17181b}}

/* ── Предметы у шагов и у примера задачи (картинки Codex, 04.10.2026) ── */
#steps .step{position:relative}
#steps .step.has-obj{min-height:150px}
.step__obj{position:absolute;right:0;top:50%;width:clamp(120px,14vw,200px);margin-top:calc(clamp(120px,14vw,200px) / -2)}
#steps .step>p,#steps .step>.t{max-width:min(100%,640px)}
.example .wrap{position:relative}
.example__obj{position:absolute;right:0;top:-34px;width:clamp(130px,15vw,220px)}
@media (max-width:900px){
  .step__obj{width:92px;margin-top:-46px}
  #steps .step.has-obj>p,#steps .step.has-obj>.t{padding-right:104px}
  .example__obj{position:static;display:block;width:132px;margin:0 0 6px auto}
}

/* крюк узкий и высокий: держим его рядом с заголовком, над карточками цифр */
.example__obj{width:clamp(64px,7vw,98px);top:-70px;right:24px}
@media (max-width:900px){.example__obj{width:72px;margin:0 8px 0 auto}}
/* телефон: текст блока «100 м²» прилипал к левому краю экрана */
@media (max-width:760px){.giant>.wrap{padding-left:16px;padding-right:16px}}

/* предметы у соседних шагов не должны наезжать друг на друга */
.step__obj{width:clamp(96px,8.5vw,140px);margin-top:calc(clamp(96px,8.5vw,140px) / -2)}
#steps .step.has-obj{min-height:156px}


/* ── Фильм как у образцов владельца (12.10.2026: oporasibiri.ru, 24ist.ru) ──
   480 кадров вместо 100, кадр на весь экран без полос (cover), у телефона свой вертикальный кадр 720×1280,
   текст шагов — стеклянные карточки поверх идущего фильма. Остальная страница не менялась. */
.film-stage canvas,.film-poster{object-fit:cover}
.film-scrim{background:linear-gradient(90deg,rgba(13,14,16,.55) 0%,rgba(13,14,16,.25) 34%,rgba(13,14,16,0) 50%),
                      linear-gradient(0deg,rgba(13,14,16,.6) 0%,rgba(13,14,16,0) 16%)}
.story-copy{background:rgba(13,14,16,.5);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);
  border:1px solid rgba(242,243,244,.12);border-radius:16px;padding:28px 30px 30px;max-width:560px;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.story-copy .no{display:flex;justify-content:space-between;gap:12px;margin-bottom:16px}
.story-copy .no::after{content:"монтаж каркаса";color:var(--grey);letter-spacing:.14em}
@media (max-width:760px){
  .film{--sq:100svh}
  .film-stage canvas,.film-poster{inset:0;top:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
  .film-scrim{background:linear-gradient(180deg,rgba(13,14,16,0) 50%,rgba(13,14,16,.55) 100%)}
  .film-step{padding:0 14px}   /* без верхнего отступа: карточка входит снизу и стоит на месте почти весь шаг */
  .story-copy{top:max(45svh,calc(100svh - 20rem));padding:20px 20px 22px;border-radius:14px}
  .film-step:last-of-type{padding-bottom:max(0px,calc(100svh - 22rem))}
}