/* The original hero keeps its layout; its one canvas travels out of the scene. */
.hero{z-index:2}
html.journey-enabled,.journey-enabled body{overflow-x:clip}
#bottle{transform-origin:50% 50%}
.journey-active #bottle{cursor:default}
.journey-active .composition .bottle-shadow{opacity:0}
/* Своей подкраски у истории нет. Лист держит ровно тот же цвет, что первый экран
   при смене масла (`:root` и `body::before` в first-screen.css): бутылка
   доворачивается к маслу этапа, `--oil-*` меняются — и доска уходит в тот же
   оттенок, что и верх страницы. Ни ярче, ни бледнее. */
/* Переключатель уходит вместе с остальной подписью экрана: иначе он остаётся
   висеть поверх бутылки, которая уже улетела в историю. */
.hero .story-jump,.hero .oil-switcher{opacity:var(--journey-footer-opacity,1);transition:opacity .12s linear}
.hero.journey-footer-hidden .story-jump,.hero.journey-footer-hidden .oil-switcher{visibility:hidden;pointer-events:none}
/* Нижней панели больше нет, поэтому ссылка в историю опустилась к самому низу
   экрана и набрана чуть крупнее. */
.story-jump{position:absolute;bottom:26px;left:clamp(24px,4vw,80px);display:inline-flex;align-items:center;gap:18px;color:var(--oil-ink);font-size:14px;text-decoration:none}
.story-jump span{font-size:23px}
.production-story{position:relative;width:min(1440px,calc(100% - 96px));margin:80px auto 0;padding-bottom:180px}
.is-loading .production-story{opacity:0;visibility:hidden}

/* ЭТАП — общий язык досок. Доска объявляет своё масло (--board-ink/-accent),
   своё место для бутылки (--bottle-*) и получает --arrival от сценария.
   Чернила и акцент берутся у сцены (--oil-*), как на первом экране; статичный
   цвет в var() — запасной, для случая без WebGL. Текст при этом остаётся
   нейтральным, тоже как наверху: цвет масла живёт в акцентах и подписях. */
.story-board{
  --arrival:1;
  --board-title:#2f2b26;
  --board-lead:#2f2b26cc;
  --board-text:#2f2b26a8;
  --board-quiet:var(--board-ink);
  --board-line:color-mix(in srgb,var(--board-ink) 30%,transparent);
  position:relative;min-height:840px;height:100svh;
  border-top:1px solid var(--board-line);color:var(--board-text);
}
.story-eyebrow{margin:0 0 24px;font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--board-accent)}
.story-heading{position:absolute;left:5%;top:54px;max-width:640px}
.story-heading .story-eyebrow{margin-bottom:16px}
.story-heading h2{margin:0;font-size:clamp(36px,3.5vw,54px);font-weight:500;line-height:1.06;letter-spacing:-.045em;color:var(--board-title)}
.story-heading h2 span{color:var(--board-accent)}
.story-lead{font-size:clamp(20px,1.8vw,27px);line-height:1.35;letter-spacing:-.02em;color:var(--board-lead);margin:0 0 22px}
.story-mobile-copy{display:none}

/* Бутылка не стоит по центру: у каждого этапа своё место в кадре. */
.story-bottle-anchor{position:absolute;left:var(--bottle-x);top:var(--bottle-y);transform:translate(-50%,-50%);width:34%;height:var(--bottle-h);pointer-events:none}
.story-bottle-poster{width:100%;height:100%;object-fit:contain}
.journey-enabled .story-bottle-poster{visibility:hidden}
.story-ground{position:absolute;left:var(--bottle-x);top:calc(var(--bottle-y) + var(--bottle-h)/2 - 16px);transform:translateX(-50%);width:160px;height:16px;border-radius:50%;background:var(--board-ink);filter:blur(12px);opacity:calc(var(--arrival)*(1 - var(--departure,0))*.2)}
/* Подпись ставит смену этикетки в историю: этап показан на другом масле.
   Её заполняет сценарий — без сцены на доске стоит подсолнечный постер. */
.story-bottle-caption{position:absolute;left:var(--bottle-x);top:calc(var(--bottle-y) + var(--bottle-h)/2 + 14px);transform:translateX(-50%);margin:0;display:flex;flex-direction:column;align-items:center;gap:7px;white-space:nowrap;opacity:calc(var(--arrival)*(1 - var(--departure,0)))}
.story-bottle-caption span{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--board-quiet)}
.story-bottle-caption strong{font-size:14px;font-weight:500;color:var(--board-lead)}
.story-bottle-caption[hidden]{display:none}
.story-signature{position:absolute;left:50%;bottom:1%;transform:translateX(-50%);margin:0;font-size:10px;letter-spacing:.14em;white-space:nowrap;color:var(--board-quiet)}
/* На каждой доске негромко нарисовано сырьё этапа — семя, косточка, орех. */
.story-seeds{position:absolute;width:145px;height:auto;color:var(--board-ink);opacity:.42;pointer-events:none}
/* Списки фактов на досках набраны одинаково, отличается только раскладка. */
.story-facts{margin:0;padding:0;list-style:none}
.story-facts li{display:grid;grid-template-columns:28px 1fr;gap:10px;font-size:15px;line-height:1.4}
.story-facts li>span{font-size:10px;color:var(--board-accent);padding-top:3px}
.story-facts h3{margin:0;font-size:inherit;font-weight:500;color:var(--board-title)}
.story-facts p{margin:6px 0 0;font-size:13px;line-height:1.55;color:var(--board-text)}

/* 01 — хранение семян. Подсолнечник, бутылка правее центра. */
.storage-board{--board-ink:var(--oil-ink,#806a38);--board-accent:var(--oil-accent,#c9a24a);
  --bottle-x:60%;--bottle-y:54%;--bottle-h:min(64svh,570px)}
.storage-copy{position:absolute;left:5%;top:30%;width:25%;max-width:330px}
.storage-copy p:not(.story-lead){font-size:15px;line-height:1.75;margin:0}
.storage-copy p+p:not(.story-lead){margin-top:18px}
.storage-figure{position:absolute;right:2%;top:10%;width:25%;margin:0}
.storage-figure img{width:100%;height:min(30svh,280px);object-fit:contain;display:block}
.storage-figure figcaption{padding:12px 0;border-top:1px solid var(--board-line);font-size:10px;line-height:1.5;letter-spacing:.08em;color:var(--board-quiet)}
.storage-note{position:absolute;left:5%;bottom:8%;width:25%;padding-top:18px;border-top:1px solid var(--board-line)}
.storage-note span{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--board-quiet);margin-bottom:12px}
.storage-note p{margin:0;max-width:240px;font-size:17px;line-height:1.5;color:var(--board-lead)}
.storage-facts{position:absolute;right:2%;bottom:7%;width:25%}
.storage-facts li{padding:13px 0;border-bottom:1px solid var(--board-line)}
.storage-facts p{max-width:330px}
.storage-seeds{left:33%;bottom:14%}
.storage-copy,.storage-figure,.storage-note,.storage-facts{opacity:calc(.3 + var(--arrival)*.7)}

@media(max-width:1100px) and (min-width:851px){
  .production-story{width:calc(100% - 64px)}
  .story-heading{left:2%}
  .storage-copy,.storage-note{left:2%;width:26%}
  .storage-figure,.storage-facts{right:0;width:26%}
  .storage-copy p:not(.story-lead),.story-facts li{font-size:13px}
  .story-facts p{font-size:12px}
}
@media(max-width:850px){
  .story-jump{left:0;bottom:16px}
  .production-story{width:calc(100% - 40px);padding-bottom:100px}
  /* Ссылка на следующую доску и подпись прижаты к низу поверх сетки. На узком
     экране они уже не расходятся по ширине, поэтому встают друг над другом,
     а нижний отступ держит под них полосу — иначе накрывают последний блок. */
  .story-board{height:auto;min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:30px 20px;padding:36px 0 112px}
  .story-heading{position:static;grid-column:1/-1;max-width:100%}
  .story-heading h2{font-size:38px}
  .story-lead{font-size:19px;margin-bottom:16px}
  .story-bottle-anchor{position:relative;grid-column:2;grid-row:2;left:auto;top:auto;transform:none;width:100%;height:380px}
  .story-ground{display:none}
  .story-bottle-caption{position:relative;grid-column:2;grid-row:3;left:auto;top:auto;transform:none;align-self:start}
  .story-signature{bottom:14px;font-size:9px}
  .story-facts li{grid-template-columns:22px 1fr}
  .storage-copy{position:static;grid-column:1;grid-row:2;width:auto;max-width:none;align-self:center}
  .storage-copy p:not(.story-lead){font-size:13px;line-height:1.65}
  .storage-copy p+p:not(.story-lead){margin-top:14px}
  .storage-figure{position:static;grid-column:1/-1;grid-row:4;width:min(100%,320px);justify-self:center;align-self:center}
  .storage-figure img{height:auto}
  .storage-facts{position:static;grid-column:1/-1;grid-row:5;width:auto;align-self:center}
  .storage-facts li{font-size:15px;padding:14px 0}
  .storage-facts p{font-size:13px;max-width:none}
  .storage-note{position:static;grid-column:1/-1;width:auto}
  .storage-note p{max-width:100%;font-size:17px}
  .storage-seeds{width:70px;left:45%;top:440px;bottom:auto}
}
@media(prefers-reduced-motion:reduce){
  .storage-copy,.storage-figure,.storage-note,.storage-facts{opacity:1}
}

/* Шапка сайта прячется по скроллу за 0.45 с, а страница ведёт прокрутку
   перелётами — шапка ловилась в середине своей анимации и выглядела
   обрезанной. На этой странице она остаётся на месте. */
/* Шапка живёт только на первом экране: после первого движения прокрутки она
   уходит и не мигает в середине своей анимации на каждом перелёте. */
.journey-enabled .nav-header{transition:transform .35s ease,opacity .3s ease}
.journey-enabled.page-top .nav-header{transform:none!important;opacity:1!important}
.journey-enabled:not(.page-top) .nav-header{transform:translateY(-140%)!important;opacity:0!important;pointer-events:none}
/* На сайте сверху ещё шапка: первый экран считает высоту с её учётом, иначе
   переключатель масел и ссылка в историю уезжают за нижний край. */
.journey-enabled .hero,.hero{height:calc(100svh - 104px);min-height:660px}
@media(max-width:850px){.journey-enabled .hero,.hero{height:auto;min-height:calc(100svh - 104px)}}

/* На сайте у body свой непрозрачный фон из style.css. Он не только гасил
   подкраску масла с :root, но и закрывал пятна `body::before` — те самые, что
   дают глубину на прототипе. Поэтому фон body здесь снимается, а цвет остаётся
   ровно там же, где был: на :root в first-screen.css. */
body:has(.production-story){background:transparent}


/* Второй, меньший набор сырья на каждой доске — чтобы фон не пустовал. */
.story-seeds+.story-seeds{width:78px;opacity:.3}
.storage-seeds-extra{left:auto;right:32%;top:14%;bottom:auto;transform:rotate(24deg)}
.press-seeds-extra{left:auto;right:6%;top:auto;bottom:12%;transform:rotate(-18deg)}
.value-seeds-extra{right:auto;left:24%;top:auto;bottom:10%;transform:rotate(16deg)}
.shelf-seeds-extra{left:auto;right:7%;bottom:auto;top:16%;transform:rotate(-12deg)}

html{scroll-behavior:smooth}

/* Одна одинаковая левая кнопка в каждом блоке, без плавающего дубля. */
.story-jump{padding:10px 0;min-height:44px;border:0;border-radius:0;background:none;box-shadow:none;gap:14px;font-weight:500;color:color-mix(in srgb,var(--oil-ink,#806647) 65%,#29251f)}
.story-jump:hover{background:none;color:#29251f}
.story-board .story-jump{left:5%;bottom:12px;z-index:3}
/* Узкий экран: кнопка и подпись доски больше не расходятся по ширине —
   кнопка встаёт над подписью. Правило идёт после базового: у них одна
   специфичность, и в медиазапросе выше по файлу оно бы проиграло. */
@media(max-width:850px){.story-board .story-jump{bottom:46px}}
.flour-block .story-jump{position:static;grid-column:1/-1;justify-self:start;margin:0}

/* На сайте у html включён smooth-скролл. Сценарий истории двигает страницу сам,
   и браузерная плавность накладывалась на неё — прокрутка «залипала» и уезжала
   не туда. Здесь она выключена, отдельные переходы просят плавность сами. */
html.journey-enabled{scroll-behavior:auto}