/* Пекарня «Тихий жар» — история при прокрутке и объём через всю страницу (R9, сборка 04.10.2026).
   Светлое поле сайта сохранено: фон кадров = фон страницы. Кадры из Blender на холсте, прокрутка листает кадр. */

/* ── История: первый экран и путь буханки ── */
.film{position:relative;background:var(--paper);border-bottom:1px solid var(--line)}
.film-stage{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--paper);pointer-events:none}
.film-stage picture{display:contents}
.film-stage canvas,.film-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.film-stage + .film-step{margin-top:-100svh}
.film-step{position:relative;z-index:2;min-height:100svh;padding:max(92px,19svh) 0 0 max(20px,calc((100vw - var(--max)) / 2))}
.story-copy{position:sticky;top:max(92px,19svh);max-width:min(35vw,470px);opacity:0;transform:translateY(24px);transition:opacity .55s,transform .55s}
.film-step.on .story-copy{opacity:1;transform:none}
.story-copy h1{margin-bottom:22px}
.story-copy h2{font-size:clamp(2.1rem,3.8vw,3.4rem);line-height:1.02;margin:0 0 18px}
.story-copy p{margin:0;color:#6d4a42;font-size:1.06rem}
.story-copy .lead{margin-bottom:26px;color:var(--ink)}
.story-copy .button{margin-top:26px}
.story-copy .hero__actions .button{margin-top:0}
/* первый экран: текст компактнее и выше, чтобы целиком помещался под шапкой сайта */
.film-step--hero{padding-top:max(40px,7svh)}
.film-step--hero .story-copy{top:max(84px,12svh)}
.film-step--hero .eyebrow{margin-bottom:14px}
.film-step--hero .hero__actions{display:flex;align-items:center;gap:18px;flex-wrap:nowrap}
.film-step--hero .hero__note{margin:0;max-width:200px}
.film-no{display:block;font-size:.72rem;font-weight:600;letter-spacing:.14em;color:var(--accent);margin-bottom:16px;text-transform:uppercase}
.film-progress{position:absolute;right:max(18px,calc((100vw - var(--max)) / 2 - 34px));top:38%;height:24%;width:1px;background:rgba(82,44,37,.14)}
.film-progress i{display:block;width:100%;height:100%;background:var(--accent);transform-origin:top;transform:scaleY(0)}
@media (max-width:760px){
  /* телефон: предмет в квадрате сверху, текст под ним — та же история, свой рендер */
  /* квадрат не выше 56 % экрана: на широком узком окне (планшет, суженное окно браузера) под картинкой всегда остаётся место тексту */
  .film{--sq:min(100vw,56svh)}
  /* кадр во всю ширину окна, высотой не больше 56 % экрана (лишнее подрезается снизу) */
  .film-stage canvas,.film-poster{inset:auto;top:0;left:0;width:100%;height:var(--sq);aspect-ratio:auto;object-fit:cover;object-position:50% 22%}
  /* у шагов после первого отступа сверху нет: текст приходит снизу сразу за уходящим, без пустой паузы между сценами */
  .film-step{padding:0 15px 0}
  .story-copy{max-width:none;top:calc(var(--sq) + 14px)}
  .story-copy h1{font-size:clamp(1.85rem,8.6vw,2.45rem);margin-bottom:14px}
  .film-step--hero .eyebrow{margin-bottom:10px;font-size:.68rem}
  .film-step--hero .hero__actions{display:block}
  .film-step--hero .button{width:auto}
  .story-copy h2{font-size:clamp(1.8rem,8vw,2.4rem);margin-bottom:12px}
  .film-step--hero .lead,.film-step--hero .hero__note{display:none}
  .film-step--hero{padding-top:calc(var(--sq) + 14px)}
  .film-step--hero .story-copy{top:calc(var(--sq) + 14px)}
  .film-progress{display:none}
}
@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.8vw,26px);top:0;bottom:0;width:2px;pointer-events:none;z-index:6}
.thread::before{content:"";position:absolute;inset:0;background:rgba(192,48,1,.12)}
.thread i{position:absolute;left:0;top:0;width:100%;height:100%;background:var(--accent);transform-origin:top;transform:scaleY(var(--t,0))}
.thread b{position:absolute;left:50%;top:calc(var(--t,0) * 100%);width:38px;height:38px;margin:-19px 0 0 -19px;
  background:url(img/parts/loaf.webp) center/contain no-repeat;filter:drop-shadow(0 5px 7px rgba(82,44,37,.32))}
@media (max-width:760px){.thread{left:6px;width:1.5px}.thread b{width:16px;height:16px;margin:-8px 0 0 -5px}}

/* ── Разделы: следующий момент пути буханки ── */
.moment{margin:0 0 50px;overflow:hidden;border-radius:var(--radius);background:var(--paper)}
.moment img{display:block;width:100%;height:auto;object-fit:cover}
/* «Утро начинается раньше гостей»: лишний хлеб остывает на глазах — тёплый тон уходит по мере прокрутки */
.moment--cool img{aspect-ratio:16/7;
  /* только насыщенность: сепия красила и кремовое поле кадра, получался жёлтый прямоугольник; края кадра растворены маской */
  filter:saturate(calc(1 + (1 - var(--cool,1)) * 2.4));
  -webkit-mask-image:radial-gradient(ellipse 62% 70% at 50% 52%,#000 62%,transparent 100%);mask-image:radial-gradient(ellipse 62% 70% at 50% 52%,#000 62%,transparent 100%);
  transform:scale(calc(1.07 - var(--cool,1) * .07))}
.moment figcaption{padding:12px 2px 0;font-size:.78rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#8a6a60}
/* «Поставка отвечает на вопросы кухни»: ящик с выносками, наезд при появлении */
.moment--blueprint{margin-bottom:38px}
.moment--blueprint img{aspect-ratio:16/8;transform:scale(1.08);transition:transform 1.8s cubic-bezier(.2,.7,.2,1)}
.moment--blueprint.vis img{transform:none}
@media (max-width:760px){.moment{margin-bottom:34px}.moment--cool img{aspect-ratio:4/3}.moment--blueprint img{aspect-ratio:4/3}}
@media (prefers-reduced-motion:reduce){.moment--cool img{filter:none;transform:none}.moment--blueprint img{transform:none;transition:none}}

/* ── Форма: линия маршрута приходит в настоящую кнопку, буханка ложится в неё ── */
.contact{position:relative;overflow:hidden}
.contact .container{position:relative;z-index:1}
.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(255,249,242,.10)}
.lead-wire .lw-live{stroke:var(--apricot)}
.lead-spark{position:absolute;left:0;top:0;z-index:3;width:44px;height:44px;margin:-22px 0 0 -22px;pointer-events:none;opacity:0;will-change:transform,opacity;
  background:url(img/parts/loaf.webp) center/contain no-repeat;filter:drop-shadow(0 6px 10px rgba(0,0,0,.45))}
#lead-form .button{transition:background .45s,color .45s,box-shadow .45s,border-color .45s}
#lead-form.lead-lit .button{background:var(--apricot);border-color:var(--apricot);color:var(--ink);box-shadow:0 10px 40px rgba(254,191,111,.4)}
@media (max-width:760px){.lead-spark{width:26px;height:26px;margin:-13px 0 0 -4px}}
@media (prefers-reduced-motion:reduce){.lead-spark{display:none}}

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

/* ── Правка 04.10.2026: предметы у разделов и движение по прокрутке (замечания Эльхана: мало движения, мало картинок) ── */
/* --par: от −1 (блок внизу экрана) до 1 (ушёл вверх); задаёт film.js. Свойства translate/rotate/scale отдельные,
   поэтому не спорят с анимацией transform у фотографий. */
.obj{pointer-events:none;height:auto;z-index:2;filter:drop-shadow(0 16px 18px rgba(82,44,37,.22));
  translate:0 calc(var(--par,0) * -38px);rotate:calc(var(--par,0) * -6deg);will-change:translate,rotate}
.situations{margin-top:84px}
.situation{position:relative}
.situation__obj{position:absolute;right:14px;top:-66px;width:min(52%,230px)}
.day-step{position:relative}
.day-step__obj{position:absolute;right:0;top:50%;width:clamp(104px,11vw,156px);margin-top:calc(clamp(104px,11vw,156px) / -2)}
.day-step>h3,.day-step>p{padding-right:clamp(118px,13vw,176px)}
.motion-frame[data-par]>img{scale:1.16;translate:0 calc(var(--par,0) * -5.5%)}
.moment--blueprint[data-par] img{translate:0 calc(var(--par,0) * -14px)}
@media (max-width:760px){
  .situations{margin-top:60px}
  .situation__obj{width:132px;top:-46px;right:8px}
  .day-step__obj{width:86px;margin-top:-43px}
  .day-step>h3,.day-step>p{padding-right:96px}
}
@media (prefers-reduced-motion:reduce){.obj{translate:none;rotate:none}.motion-frame[data-par]>img{translate:none}}

/* телефон: буханка на линии не должна заезжать на текст у левого края (правка 04.10.2026) */
@media (max-width:760px){.thread b{width:13px;height:13px;margin:-6.5px 0 0 -6.5px}}

/* ── Правка 04.10.2026 (ночь), замечания Эльхана ── */
/* тонкая полоска-индикатор справа от кадра не нужна */
.film-progress{display:none}
/* Последняя сцена: текст уходит вверх вместе с кадром. Раньше он оставался приклеенным, кадр уезжал под ним,
   и линия из кадра перечёркивала заголовок. Нижний отступ шага = высота экрана − место текста − его высота. */
.film-step:last-of-type{padding-bottom:max(0px,calc(81svh - 16rem))}
@media (max-width:760px){.film-step:last-of-type{padding-bottom:max(0px,calc(100svh - var(--sq) - 14px - 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(192,48,1,.14);stroke-width:1.5}
.route-glow{stroke:rgba(254,191,111,.42);stroke-width:6}
.route-live{stroke:var(--accent);stroke-width:2}
.route-tip{position:absolute;left:0;top:0;z-index:7;width:40px;height:40px;margin:-20px 0 0 -20px;pointer-events:none;opacity:0;will-change:transform,opacity;
  background:url(img/parts/loaf.webp) center/contain no-repeat;filter:drop-shadow(0 5px 8px rgba(82,44,37,.38))}
@media (max-width:760px){.route-tip{width:20px;height:20px;margin:-10px 0 0 -10px}}
@media (prefers-reduced-motion:reduce){.route-tip{display:none}}


/* ── Плотный фильм (R9 «Правки 12.10.2026», решение Эльхана): кадр на весь экран, стеклянные карточки текста,
   телефон — вертикальный кадр 720×1280 на весь экран, карточка у нижнего края по своей высоте (--ch из film.js). ── */
.film-stage canvas,.film-poster{object-fit:cover}
.film-scrim{background:linear-gradient(90deg,rgba(255,249,242,.5) 0%,rgba(255,249,242,.2) 34%,rgba(255,249,242,0) 50%)}
.film .story-copy{background:rgba(255,249,242,.62);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);
  border:1px solid rgba(40,24,20,.12);border-radius:16px;padding:28px 30px 30px;box-shadow:0 20px 50px rgba(60,30,20,.14)}
@media (max-width:760px){
  .film{--sq:100svh}
  .film-stage canvas,.film-poster{inset:0;top:0;left:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:50% 30%}
  .film-scrim{background:linear-gradient(180deg,rgba(255,249,242,0) 55%,rgba(255,249,242,.5) 100%)}
  .film-step{padding:0 14px}
  .film .story-copy{max-width:none;top:max(34svh,calc(100svh - var(--ch,20rem) - 78px));padding:20px 20px 22px;border-radius:14px}
  .film .story-copy,.film .film-step .story-copy{transform:none!important}   /* без сдвига при появлении: карточка стоит ровно у нижнего края */
  .film-step:last-of-type{padding-bottom:max(0px,calc(100svh - var(--ch,20rem) - 94px))}
}