/* Цех ON — сценарий на всю страницу (06.10.2026, по образцу 07). После главной истории страница продолжает
   рассказывать тем же каркасом; у разделов свои сцены разного устройства:
     «Здание должно работать вместе с производством» — балку опускают, а опоры под ней нет          (кадры Blender)
     «100 м²» — пятно застройки растёт от 10×10 м                                                    (чертёж на стилях)
     «Пять зон исходных данных» — пять зон по очереди ложатся на каркас, сцена приклеена рядом со списком (кадры Blender)
     «Фиксируем не только тонны металла» — четыре детали собираются у карточек                      (кадры Blender)
     «Цена становится предметной» — вилка цены сужается с каждым зафиксированным пунктом            (стили)
     «Как вводные складываются в одну задачу» — пятно 24×48, высота, кран, срок                     (кадры Blender)
     «От задачи до согласованного состава работ» — шаги загораются по оси                          (стили)
     «Что держим в поле зрения» — узлы рамы проверяются по очереди, у четвёртого изменение          (кадры Blender)
     форма — схема рамы собирается, пока человек заполняет поля                                     (стили)
   Кадры листает film.js (.scrub). Линия страницы — axis.js. */

.scrub{position:relative}
.scrub>canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
.scrub img{display:block;width:100%;height:auto}

/* ── Ось расчёта: штрихпунктир впереди, сплошная линия позади, марки осей, двутавр на голове линии ── */
.route,.route-tip{display:none}
.axis-line{position:fixed;inset:0;width:100%;height:100%;z-index:6;pointer-events:none}
.axis-tip{position:absolute;left:0;top:0;z-index:7;width:42px;height:42px;margin:-21px 0 0 -21px;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){.axis-tip{width:24px;height:24px;margin:-12px 0 0 -12px}}
@media (prefers-reduced-motion:reduce){.axis-tip{display:none}}

/* ── Балка без опоры: полоса в начале раздела, кадры на всю ширину ── */
.pain-band.scrub>canvas{object-fit:cover;object-position:62% 40%}
.pain-band.scrub img{height:100%;object-fit:cover}
@media (max-width:760px){.pain-band.scrub{height:min(100vw,56vh)}.pain-band.scrub>canvas{object-position:50% 50%}.pain-band.scrub img{object-position:50% 50%}}

/* ── «100 м²»: пятно застройки растёт от десяти на десять ── */
.plan{--g:0;width:300px;max-width:100%;justify-self:end}
.plan svg{display:block;width:100%;height:auto;overflow:visible}
.plan rect,.plan line{fill:none;vector-effect:non-scaling-stroke}
.plan .p0{stroke:var(--yellow);stroke-width:2;fill:rgba(255,212,0,.1)}
.plan .p1,.plan .p2{stroke:rgba(242,243,244,.55);stroke-width:1.2;stroke-dasharray:10 4 2 4}
.plan .p1{opacity:clamp(0,calc((var(--g) - .25) * 5),1)}
.plan .p2{opacity:clamp(0,calc((var(--g) - .6) * 5),1)}
.plan .grid{stroke:rgba(242,243,244,.07);stroke-width:1}
.plan text{font-family:var(--font);font-size:13px;fill:var(--yellow);font-weight:600}
.plan .t1{fill:var(--grey);font-weight:400;opacity:clamp(0,calc((var(--g) - .7) * 5),1)}
.plan .dot{fill:var(--yellow);stroke:none;transform-box:fill-box;transform-origin:center;scale:clamp(0,calc((var(--g) - var(--at,0)) * 8),1)}
@media (min-width:920px){.giant .in{grid-template-columns:auto minmax(0,1fr) 300px}}
@media (max-width:919px){.plan{justify-self:start;width:min(100%,280px)}}

/* ── Пять зон: сцена приклеена рядом со списком ── */
.split--zones{align-items:start}
.zones{position:sticky;top:92px;aspect-ratio:1/1;border-radius:18px;overflow:hidden;border:1px solid var(--line);background:var(--steel)}
.zones img{height:100%;object-fit:cover}
.list.is-live .li5{opacity:.42;transition:opacity .4s,background .25s}
.list.is-live .li5.is-on{opacity:1}
@media (max-width:959px){
  /* в одну колонку — невысокая липкая полоса над списком; в ширину текста, чтобы ось расчёта шла по полю рядом и не пряталась под ней */
  .zones{top:58px;z-index:5;aspect-ratio:16/10;border-radius:14px}
  .zones>canvas{object-fit:cover}
  .split--zones{gap:22px}
}

/* ── Детали у карточек ── */
.card .part.scrub{width:120px;height:120px;margin:-6px 0 10px -8px;filter:drop-shadow(0 10px 22px rgba(0,0,0,.5))}

/* ── Вилка цены сужается ── */
.fork{--p:0;position:relative;height:86px;margin:38px 0 0;max-width:900px}
.fork__track{position:absolute;left:0;right:0;top:42px;height:1px;background:repeating-linear-gradient(90deg,rgba(242,243,244,.3) 0 12px,transparent 12px 17px,rgba(242,243,244,.3) 17px 19px,transparent 19px 24px)}
.fork__range{position:absolute;top:26px;height:33px;left:calc(var(--p) * 46%);right:calc(var(--p) * 46%);
  border:2px solid var(--yellow);border-top-width:0;border-bottom-width:0;background:rgba(255,212,0,calc(.05 + var(--p) * .16));box-shadow:0 0 calc(var(--p) * 26px) rgba(255,212,0,.35)}
.fork__range::before,.fork__range::after{content:"";position:absolute;top:0;bottom:0;width:9px;border:2px solid var(--yellow);border-left-width:0;border-right-width:0}
.fork__range::before{left:0}.fork__range::after{right:0}
.fork__cap{position:absolute;font-size:11px;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
.fork__cap--wide{left:0;top:0;color:var(--grey);opacity:calc(1 - var(--p) * 1.4)}
.fork__cap--fix{left:50%;translate:-50% 0;bottom:0;color:var(--yellow);opacity:clamp(0,calc((var(--p) - .72) * 4),1)}
.rows.is-live .row3{opacity:.42;transition:opacity .4s,background .25s}
.rows.is-live .row3.is-on{opacity:1}

/* ── Пример: вводные складываются в здание ── */
.exm{margin-top:38px;aspect-ratio:1440/560;border-radius:18px;overflow:hidden;border:1px solid var(--line);background:var(--steel)}
.exm img{height:100%;object-fit:cover}
.metrics{margin-top:16px}
.metric{transition:transform .5s cubic-bezier(.2,.7,.2,1),border-color .4s,box-shadow .4s}
.metrics[data-on="0"] .metric:nth-child(1),.metrics[data-on="1"] .metric:nth-child(2),.metrics[data-on="2"] .metric:nth-child(3),.metrics[data-on="3"] .metric:nth-child(4){
  border-color:var(--yellow);box-shadow:0 0 0 1px rgba(255,212,0,.35),0 14px 40px rgba(255,212,0,.12)}
@media (min-width:900px){
  .metrics[data-on="0"] .metric:nth-child(1),.metrics[data-on="1"] .metric:nth-child(2),.metrics[data-on="2"] .metric:nth-child(3),.metrics[data-on="3"] .metric:nth-child(4){transform:translateY(-8px)}
}
@media (max-width:760px){.exm{aspect-ratio:1/1}}

/* ── Порядок работы: шаги загораются по оси ── */
.axis{--ax:0}
.axis::after{content:"";position:absolute;left:6px;top:8px;width:1px;height:calc((100% - 16px) * var(--ax));background:var(--yellow);box-shadow:0 0 8px rgba(255,212,0,.5)}
.axis.is-live .step{opacity:.42;transition:opacity .45s}
.axis.is-live .step.is-on{opacity:1}
.axis.is-live .step::before{transition:background .4s,box-shadow .4s}
.axis.is-live .step.is-on::before{background:var(--yellow);box-shadow:0 0 12px rgba(255,212,0,.6)}
.axis.is-live .step__obj{scale:.72;transition:scale .6s cubic-bezier(.3,1.5,.5,1)}
.axis.is-live .step.is-on .step__obj{scale:1}

/* ── Проверка: узлы рамы по очереди ── */
.check-fig.scrub{aspect-ratio:1440/810}
.check-fig.scrub img{height:100%;object-fit:cover;transform:none !important;translate:none !important;transition:none}
.cards--check .card{transition:transform .3s,border-color .5s,opacity .5s}
.cards--check.is-live .card{opacity:.45}
.cards--check.is-live .card.is-on{opacity:1;border-color:rgba(255,212,0,.4)}
.cards--check.is-live .card.is-chg{border-color:rgba(255,138,92,.7)}
@media (max-width:760px){.check-fig.scrub{aspect-ratio:1/1}}

/* ── Форма: схема рамы собирается, пока человек заполняет поля ── */
.asm{margin:30px 0 0;max-width:340px}
.asm svg{display:block;width:100%;height:auto;overflow:visible}
.asm path,.asm circle{fill:none;vector-effect:non-scaling-stroke}
.asm .ghost path,.asm .ghost circle{stroke:rgba(160,166,172,.4);stroke-width:1;stroke-dasharray:9 4 2 4}
.asm .live path,.asm .live circle{stroke:var(--yellow);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .9s cubic-bezier(.3,.7,.2,1);filter:drop-shadow(0 0 5px rgba(255,212,0,.5))}
.asm .live g.is-in path,.asm .live g.is-in circle{stroke-dashoffset:0}
.asm__note{margin:10px 0 0;font-size:12.5px;letter-spacing:.04em;color:var(--grey);min-height:1.4em}
@media (max-width:959px){.asm{margin:6px auto 0;max-width:300px}.asm__note{text-align:center;margin-bottom:18px}}
@media (prefers-reduced-motion:reduce){.asm .live path,.asm .live circle{transition:none}}

/* телефон: между карточками — проходы для оси расчёта (она обходит карточки под прямыми углами) */
@media (max-width:760px){.cards,.metrics{gap:30px}.metrics{margin-top:34px}}

/* предмет на голове линии у края экрана не должен давать странице горизонтальную прокрутку */
.thread-wrap{overflow-x:clip}

/* маленький телефон (360 px): шапка была на 3 px шире экрана и давала горизонтальную прокрутку */
@media (max-width:400px){header .bar{gap:6px}.logo{padding:9px 11px;font-size:14px;gap:7px}.hd-cta{padding:9px 12px;font-size:13.5px}}
/* и слово «производственное» в заголовке первого экрана при 38 px не помещалось в 320 px ширины — отсюда были лишние 3 px */
@media (max-width:400px){.hero h1{font-size:34px}}