/* Пекарня «Тихий жар» — сценарий на всю страницу (05.10.2026).
   Замечание Эльхана: «картинки не двигаются; дальше сайт тоже рассказывает историю — нужны другие картинки
   в 3D, показывающие другую часть истории». У каждого раздела своя короткая сцена, все разного устройства:
     1 «Утро начинается раньше гостей» — три сцены из Blender: ломти ложатся на доску, в корзину, буханки встают на полку;
     2 «Четыре линии» — четыре хлеба по очереди выходят вперёд, карточка под хлебом подсвечивается;
     3 «Печь работает ночью…» — ночь у печи сменяется утром у ворот;
     4 «У хлеба есть свой темп» — дуга суток: вечер, ночь, рассвет, утро, предмет шага меняется на столе;
     5 «Поставка отвечает на вопросы кухни» — ярлыки по очереди вылетают из ящика;
     6 форма — корзина наполняется, пока человек заполняет поля.
   Кадры сцен — с прозрачным фоном (WebP с альфой), листает их film.js (.scrub). Линия маршрута — trail.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}
.trail{position:fixed;inset:0;width:100%;height:100%;z-index:6;pointer-events:none}
.trail-tip{position:absolute;left:0;top:0;z-index:7;width:38px;height:38px;margin:-19px 0 0 -19px;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){.trail-tip{width:22px;height:22px;margin:-11px 0 0 -11px}}

/* ── 1. Три утра: сцена у каждой карточки ── */
.situations{margin-top:146px}
.situation__scene{position:absolute;right:4px;top:-128px;width:min(66%,300px);z-index:2;pointer-events:none;
  filter:drop-shadow(0 18px 20px rgba(82,44,37,.16))}
@media (max-width:760px){
  .situations{margin-top:28px}
  .situation{padding-top:14px}
  .situation__scene{position:relative;right:auto;top:auto;width:min(68%,250px);margin:0 -8px -6px auto}
  .situation__num{position:absolute;left:31px;top:31px;margin:0}
}

/* ── 2. Четыре линии ── */
.lineup{margin:0 0 6px;aspect-ratio:1440/460}
.lineup img{height:100%;object-fit:contain}
.product-card{transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s}
@media (min-width:1051px){
  .product-grid[data-on="0"] .product-card:nth-child(1),.product-grid[data-on="1"] .product-card:nth-child(2),
  .product-grid[data-on="2"] .product-card:nth-child(3),.product-grid[data-on="3"] .product-card:nth-child(4){
    transform:translateY(-12px);box-shadow:0 22px 34px rgba(82,44,37,.16)}
}
@media (max-width:760px){.lineup{aspect-ratio:1/1;margin-bottom:34px}}
/* телефон: между карточками — проходы для линии маршрута (она идёт змейкой: кафе → ресторан → лавка, и так же между хлебами и документами) */
@media (max-width:760px){
  .situations{gap:30px;border:0}
  .situation{border:1px solid var(--line);border-radius:var(--radius)}
  .product-grid,.docs-grid{gap:30px}
  .moment--blueprint{margin-bottom:34px}
}

/* ── 3. Ночь → утро ── */
/* Раздел задерживается на экране на высоту экрана: сначала видна печь, потом по мере прокрутки медленно входит утро
   (замечание Эльхана 05.10: смена шла слишком рано — пока долистаешь, картинка уже сменилась). */
.dawnpin{--mh:max(560px,min(760px,78vw));position:relative;height:calc(var(--mh) + 100svh)}
.dawnpin .manifesto{position:sticky;top:max(0px,calc((100svh - var(--mh)) / 2));height:var(--mh);min-height:0}
@media (max-width:1050px){.dawnpin{--mh:640px}}
@media (max-width:760px){.dawnpin{--mh:520px}}
@media (prefers-reduced-motion:reduce){.dawnpin{height:auto}.dawnpin .manifesto{position:relative;top:auto}}
.dawn__morning{position:absolute;inset:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(102deg,#000 calc(var(--dawn,0) * 135% - 22%),transparent calc(var(--dawn,0) * 135%));
          mask-image:linear-gradient(102deg,#000 calc(var(--dawn,0) * 135% - 22%),transparent calc(var(--dawn,0) * 135%))}
.dawn__morning img{width:100%;height:100%;object-fit:cover;scale:calc(1.12 - var(--dawn,0) * .1)}
.dawn__night>img{scale:calc(1.04 + var(--dawn,0) * .1) !important}
.manifesto h2{max-width:17ch}
.dawn__l1,.dawn__l2{display:block;transition:none}
/* ночная строка стоит сразу, утренняя приходит вместе с утром */
.dawn__l2{opacity:clamp(0,calc(var(--dawn,0) * 1.7 - .25),1);translate:calc((1 - min(1,var(--dawn,0) * 1.4)) * 30px) 0}
@media (prefers-reduced-motion:reduce){.dawn__morning{display:none}.dawn__l1,.dawn__l2{opacity:1;translate:none}}

/* ── 4. Сутки хлеба: дуга времени и стол ── */
.daydial{--day:0;position:relative;overflow:hidden;border-radius:var(--radius);background:var(--soft);isolation:isolate}
.daydial__sky{position:absolute;inset:0 0 auto 0;height:52%}
.daydial__sky::before,.daydial__sky::after{content:"";position:absolute;inset:0}
.daydial__sky::before{background:linear-gradient(180deg,#f3d9b4 0%,#f6ede3 100%)}                       /* вечер и утро */
.daydial__sky::after{background:linear-gradient(180deg,#2a1c2c 0%,#4a2b2a 70%,#6a3a2a 100%);opacity:var(--night,0)}   /* ночь */
.daydial__stars{position:absolute;inset:0;z-index:1;opacity:var(--night,0);
  background:
    radial-gradient(1.6px 1.6px at 12% 22%,#fff 50%,transparent 51%),radial-gradient(1.2px 1.2px at 27% 48%,#fff 50%,transparent 51%),
    radial-gradient(1.8px 1.8px at 41% 16%,#fff 50%,transparent 51%),radial-gradient(1.2px 1.2px at 58% 34%,#fff 50%,transparent 51%),
    radial-gradient(1.6px 1.6px at 72% 14%,#fff 50%,transparent 51%),radial-gradient(1.3px 1.3px at 86% 42%,#fff 50%,transparent 51%),
    radial-gradient(1.2px 1.2px at 93% 20%,#fff 50%,transparent 51%),radial-gradient(1.4px 1.4px at 6% 58%,#fff 50%,transparent 51%)}
.daydial__glow{position:absolute;inset:0;z-index:1;opacity:var(--glow,0);
  background:radial-gradient(ellipse 70% 90% at 82% 108%,rgba(254,191,111,.95) 0%,rgba(254,191,111,.35) 42%,transparent 72%)}
.daydial svg{position:absolute;inset:0;z-index:2;width:100%;height:100%;overflow:visible}
.daydial__arc{fill:none;stroke:color-mix(in srgb,rgba(255,249,242,.5) calc(var(--night,0) * 100%),rgba(82,44,37,.3));stroke-width:1.5;stroke-dasharray:3 7;stroke-linecap:round}
.daydial__run{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round}
.daydial__stop{fill:var(--paper);stroke:rgba(82,44,37,.4);stroke-width:1.5;transition:fill .4s,stroke .4s,r .4s}
.daydial__stop.is-on{fill:var(--accent);stroke:var(--accent)}
.daydial__sun{fill:var(--apricot);filter:drop-shadow(0 0 10px rgba(254,191,111,.9))}
.daydial__moon{fill:#fdf6ea;filter:drop-shadow(0 0 9px rgba(255,255,255,.75));opacity:var(--night,0)}
.daydial__ground{position:absolute;left:0;right:0;top:52%;bottom:0;z-index:2;background:linear-gradient(180deg,#ecdccb 0%,var(--soft) 26%);border-top:1px solid var(--line)}
.daydial__word{font-family:var(--serif);font-weight:600;font-size:38px;letter-spacing:-1px;text-anchor:middle;opacity:0;transition:opacity .45s;
  fill:color-mix(in srgb,var(--paper) calc(var(--night,0) * 100%),var(--ink))}
.daydial__word tspan{font-family:var(--sans);font-weight:600;font-size:13px;letter-spacing:2px;text-transform:uppercase;fill:color-mix(in srgb,var(--apricot) calc(var(--night,0) * 100%),var(--accent))}
.daydial__word.is-on{opacity:1}
.daydial__obj{position:absolute;left:50%;top:52%;z-index:4;width:min(74%,330px);height:auto;margin:0;translate:-50% -2%;
  opacity:0;transform:translateX(34%) rotate(9deg) scale(.82);transform-origin:50% 85%;
  transition:opacity .5s,transform .7s cubic-bezier(.2,.7,.2,1);filter:drop-shadow(0 20px 22px rgba(82,44,37,.24))}
.daydial__obj.was{transform:translateX(-34%) rotate(-9deg) scale(.82)}
.daydial__obj.is-on{opacity:1;transform:translateX(calc((var(--sub,.5) - .5) * -9%)) rotate(calc((var(--sub,.5) - .5) * -5deg)) scale(1)}
.day-step{transition:opacity .4s}
.day-steps.is-live .day-step{opacity:.42}
.day-steps.is-live .day-step.is-on{opacity:1}
.day-step>h3,.day-step>p{padding-right:0}
@media (min-width:1051px){.daydial{position:sticky;top:28px;height:min(680px,calc(100vh - 56px))}}
@media (max-width:1050px){
  /* планшет и телефон: дуга и стол в одной невысокой липкой полосе над шагами */
  /* в ширину текста и ниже линии по слоям: линия маршрута идёт по полю рядом с полосой и не прячется под ней */
  .daydial{position:sticky;top:0;z-index:5;height:228px;border-radius:var(--radius);border:1px solid var(--line)}
  .daydial__sky{inset:0 42% 0 0;height:auto}
  .daydial__ground{left:58%;top:0;border-top:0;border-left:1px solid var(--line);background:var(--soft)}
  .daydial__obj{left:79%;top:50%;width:min(40%,190px);translate:-50% -50%}
}
@media (prefers-reduced-motion:reduce){.daydial__obj,.daydial__word{transition:none}}

/* ── «Сначала один рабочий день»: пункты пробы отмечаются по мере прокрутки ── */
.checklist.is-live li{opacity:.5;transition:opacity .45s}
.checklist.is-live li::before{display:inline-block;scale:0;rotate:-40deg;transition:scale .5s cubic-bezier(.3,1.6,.5,1),rotate .5s}
.checklist.is-live li.is-on{opacity:1}
.checklist.is-live li.is-on::before{scale:1;rotate:0deg}
@media (prefers-reduced-motion:reduce){.checklist.is-live li,.checklist.is-live li::before{transition:none}}

/* ── 5. Ящик с ярлыками ── */
.moment--blueprint{margin:0 0 38px;aspect-ratio:1440/640;overflow:visible;background:none}
.moment--blueprint img{aspect-ratio:auto;height:100%;object-fit:contain;transform:none !important;translate:none !important}
@media (max-width:760px){.moment--blueprint{aspect-ratio:1/1}}

/* ── 6. Форма: корзина наполняется, пока заполняются поля ── */
.fill{position:relative;width:min(100%,360px);aspect-ratio:1/1;margin:34px 0 0;--n:0}
.fill img{position:absolute;display:block;height:auto}
.fill__back,.fill__front{left:0;bottom:0;width:100%}
.fill__front{z-index:3}
.fill__item--1{left:5%;bottom:31%;width:45%;--r:-8deg;--r0:-34deg}
.fill__item--2{left:46%;bottom:33%;width:47%;--r:7deg;--r0:30deg}
.fill__item--3{left:14%;bottom:19%;width:43%;--r:-5deg;--r0:-28deg}
.fill__item--4{left:50%;bottom:20%;width:40%;--r:10deg;--r0:32deg}
.fill__item{z-index:2;opacity:0;transform:translateY(-70%) rotate(var(--r0,-14deg));transition:opacity .35s,transform .8s cubic-bezier(.3,1.35,.5,1)}
.fill__item.is-in{opacity:1;transform:translateY(0) rotate(var(--r,0deg))}
.fill__note{margin:10px 0 0;font-size:.8rem;color:rgba(255,249,242,.7);min-height:1.3em}
@media (max-width:1050px){.fill{width:min(72%,300px);margin:26px auto 0}.fill__note{text-align:center}}
@media (prefers-reduced-motion:reduce){.fill__item{transition:none}}

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