/* ==========================================================================
   AMIR PARAMOUNT — путешествие по заводам и стройкам

   Страница зафиксирована. Сцена занимает экран и никуда не едет: скролл
   ведёт камеру над единой изометрической панорамой и меняет подписи, фон
   и акт. Три акта повторяют плоскости знака — Sand (замысел) -> Sage
   (инженерия) -> Basalt (построенное), фон идёт светлое -> тёмное.

   Прокрутка нативная: пустой высокий блок даёт ход, колесо не
   перехватывается. Поэтому работают клавиатура, трекпад, тач и полоса.
   ========================================================================== */

:root{
  --basalt:#2A2E2C;
  --sage:#7F8B85;
  --sand:#D8CBB8;
  --paper:#F2EEE7;

  --bg:var(--paper);
  --ink:var(--basalt);
  --ink-soft:#6F7671;
  --line:#D5CFC4;
  --accent:var(--sage);

  --disp:'Jost','Futura','Montserrat',sans-serif;
  --text:'Montserrat','Futura PT','Helvetica Neue',Arial,sans-serif;
  --shear:16%;
}

*{box-sizing:border-box;margin:0;padding:0}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--text);
  font-weight:300;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:background-color 1.2s ease, color 1.2s ease;
}

/* --- АКТЫ ---------------------------------------------------------------- */
/* --bg-rgb нужен отдельно: подложка под текстом обязана быть ПОЛУпрозрачной.
   Заливка сплошным var(--bg) закрывала мир целиком. */
/* --ink-soft подобран под контраст 4.5:1 (AA) к фону своего акта и проверен
   расчётом: 5.18 / 5.06 / 5.26. Прежние #6F7671 и #454D48 давали 4.03 и 4.28
   — наборный текст не дотягивал до нормы. */
body[data-act="1"]{ --bg:#F2EEE7; --bg-rgb:242,238,231; --ink:#2A2E2C; --ink-soft:#5E6560; --line:#D5CFC4; --accent:#7F8B85 }
body[data-act="2"]{ --bg:#AEB8B2; --bg-rgb:174,184,178; --ink:#232725; --ink-soft:#3B423E; --line:#93A099; --accent:#2A2E2C }
body[data-act="3"]{ --bg:#2A2E2C; --bg-rgb:42,46,44;    --ink:#F2EEE7; --ink-soft:#9AA29C; --line:#3E4441; --accent:#D8CBB8 }

/* --- Типографика --------------------------------------------------------- */
h1,h2,h3,.lbl{font-family:var(--disp);font-weight:200;letter-spacing:.08em}
h1{font-size:clamp(1.15rem,2.1vw,1.95rem);line-height:1.35;text-transform:uppercase;letter-spacing:.1em;max-width:22ch;margin:0 auto}
h2{font-size:clamp(1.35rem,2.1vw,2.15rem);line-height:1.22;margin-bottom:.9rem;max-width:19ch}
h3{font-size:.9rem;letter-spacing:.14em;text-transform:uppercase;font-weight:400;margin-bottom:.3rem}
p{font-size:clamp(.88rem,.92vw,1.02rem);max-width:42ch;margin-bottom:.8rem}
/* Метка набрана мелко, поэтому НЕ акцентом: sage на светлом даёт контраст
   2.9:1 — наш же бренд-бук запрещает им мелкий текст. */
.lbl{font-size:.66rem;letter-spacing:.34em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:1rem;display:block}
strong{font-weight:500}
em{font-style:italic}

/* --- Навигация ----------------------------------------------------------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;
     align-items:center;padding:1.4rem clamp(1.2rem,3vw,2.6rem);pointer-events:none}
.nav__logos{position:relative;display:block;width:38px;height:38px;pointer-events:auto}
.nav__logo{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity 1.2s ease}
.nav__logo--d{opacity:0}
body[data-act="3"] .nav__logo--l{opacity:0}
body[data-act="3"] .nav__logo--d{opacity:1}

/* --- СЦЕНА: зафиксирована ------------------------------------------------ */
.stage{position:fixed;inset:0;overflow:hidden;z-index:1}
.world{position:absolute;inset:0}
.world__svg{width:100%;height:100%;display:block}
/* камерой двигает скрипт через атрибут transform — каждый кадр, без переходов */
.cam{will-change:transform}

/* Ход прокрутки. Блок пустой: страница стоит, едет только камера. */
.scroll{position:relative;z-index:0;height:900svh}

/* --- Подписи ------------------------------------------------------------- */
.caps{position:absolute;inset:0;z-index:2;pointer-events:none}
.cap{position:absolute;opacity:var(--o,0);pointer-events:none;
     padding:clamp(1rem,2vw,2rem)}
.cap.is-live{pointer-events:auto}
/* Подложка прижата к своему краю и растворяется к центру кадра: текст
   читается, а сцена не залеплена пятном. */
.cap::before{content:"";position:absolute;z-index:-1;pointer-events:none;
             transition:background 1.2s ease}
/* Плотная часть скрима обязана лежать ПОД подписью, а растворяться — к центру
   кадра. Отступ наружу держим маленьким: уведёшь коробку за экран — плотная
   зона уйдёт вместе с ней, и под текстом останется только хвост градиента. */
.cap--left::before  {inset:-16vh -16vw -16vh -8vw;
  background:linear-gradient(90deg,  rgba(var(--bg-rgb),.92) 0 62%, rgba(var(--bg-rgb),0) 100%)}
.cap--right::before {inset:-16vh -8vw -16vh -16vw;
  background:linear-gradient(270deg, rgba(var(--bg-rgb),.92) 0 62%, rgba(var(--bg-rgb),0) 100%)}
/* герой и центровые подписи: мир должен просвечивать, а не исчезать */
.cap--center::before{inset:-16vh -18vw;
  background:radial-gradient(ellipse at center, rgba(var(--bg-rgb),.82) 0 38%, rgba(var(--bg-rgb),0) 84%)}
/* содержимое всплывает по мере проявления — отсюда ощущение плавного прилёта */
.cap > *{transform:translateY(calc((1 - var(--o,0)) * 22px))}

.cap--left  {left:clamp(1.5rem,5vw,5.5rem);top:50%;transform:translateY(-50%);max-width:min(42ch,42vw)}
.cap--right {right:clamp(1.5rem,5vw,5.5rem);top:50%;transform:translateY(-50%);max-width:min(42ch,42vw)}
.cap--center{left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;
             max-width:min(74ch,86vw)}
.cap--center p{margin-left:auto;margin-right:auto}

.cap__logo{width:min(190px,30vw);margin-bottom:1.6rem}
.cap__sub{color:var(--ink-soft);margin:1.2rem auto 0;max-width:38ch}
.cap__mark{width:64px;margin-bottom:1.2rem}
.cap__todo{font-size:.8rem;color:var(--ink-soft);border-left:2px solid var(--accent);
           padding-left:.9rem;text-align:left;max-width:52ch}

/* --- Индикатор маршрута и подсказка -------------------------------------- */
.rail{position:absolute;left:6vw;right:6vw;bottom:86px;height:1px;background:var(--line);z-index:3;
      transition:background-color 1.2s ease}
.rail__fill{display:block;height:100%;background:var(--accent);width:calc(var(--pp,0) * 100%);
            transition:background-color 1.2s ease}
.hint{position:absolute;left:50%;bottom:116px;transform:translateX(-50%);z-index:3;
      font-family:var(--disp);font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;
      color:var(--ink-soft);opacity:var(--hint,1);transition:opacity .5s ease}

/* --- Сборка и разборка площадки ------------------------------------------
   Скролл не возит камеру по готовому миру, а строит объект. На старте пятно
   пустое — только разбивочная сетка. Дальше объекты встают по очереди, потом
   уходят, и на их месте собирается следующая площадка.                     */
.plot{opacity:.7}
.site{pointer-events:none}
/* Кривые без перелёта: пружина читается как дребезг, а не как премиум.
   Сборка — длинная плавная остановка, разборка — мягкий уход. */
.site .obj{opacity:0;transform:translateY(16px);
           transform-box:view-box;transform-origin:center;
           transition:opacity .42s cubic-bezier(.4,0,.6,1),
                      transform .42s cubic-bezier(.4,0,.6,1)}
.site.is-on .obj{opacity:1;transform:none;
           transition:opacity .72s cubic-bezier(.22,1,.36,1),
                      transform .78s cubic-bezier(.22,1,.36,1);
           transition-delay:calc(var(--i,0) * .055s)}

/* --- Мир: грани = плоскости знака ----------------------------------------
   ЧЁТКОСТЬ ЛИНИЙ. Обводка в юнитах SVG масштабируется вместе с камерой: при
   крупности 4.5 линия 0.5 даёт 2.25px, при 8.1 — уже 4px. Толщина скакала от
   площадки к площадке, а на наездах линии жирнели и мылились.
   non-scaling-stroke задаёт толщину в ЭКРАННЫХ пикселях — одна и та же при
   любом зуме. Ниже все значения уже в px.                                  */
.world__svg polygon,
.world__svg line,
.world__svg rect,
.world__svg circle{vector-effect:non-scaling-stroke}
.world__svg{shape-rendering:geometricPrecision}

.world__svg polygon{stroke:var(--bg);stroke-width:1.15;stroke-linejoin:round;
                    transition:stroke 1.2s ease, fill 1.2s ease}
.f-t{fill:var(--sand)}
.f-l{fill:var(--sage)}
.f-r{fill:var(--basalt)}
.f-slab{fill:var(--sage);opacity:.16;stroke:none}
.f-road{fill:var(--basalt);opacity:.4;stroke:none}
.road-mark line{stroke:var(--paper);stroke-width:1.5;opacity:.8;stroke-linecap:round}
.grid line{stroke:var(--line);stroke-width:.9}
.sleeper line{stroke:var(--basalt);stroke-width:1.3;opacity:.5;stroke-linecap:round}
.railline{stroke:var(--basalt);stroke-width:1.3;stroke-linecap:round}
.lattice line{stroke:var(--paper);stroke-width:.9;opacity:.6}
.tie line{stroke:var(--basalt);stroke-width:1.1;stroke-linecap:round}
.hoist line{stroke:var(--basalt);stroke-width:.9}
.det line{stroke:var(--paper);stroke-width:.85;opacity:.55}
.pipe line{stroke:var(--sand);stroke-width:1.8;stroke-linecap:round}
.fence line{stroke:var(--sage);stroke-width:.9;opacity:.7}

body[data-act="3"] .f-r{fill:#474E4A}
body[data-act="3"] .f-l{fill:#6E7A73}
body[data-act="3"] .railline,
body[data-act="3"] .sleeper line,
body[data-act="3"] .tie line,
body[data-act="3"] .hoist line{stroke:#8A938D}
body[data-act="3"] .det line{stroke:#2A2E2C;opacity:.45}
body[data-act="3"] .f-road{fill:#121514;opacity:.5}
body[data-act="3"] .f-slab{opacity:.22}

/* --- Плоскость-окно ------------------------------------------------------ */
.plane{width:100%;aspect-ratio:5/4;position:relative;overflow:hidden;
       clip-path:polygon(0 var(--shear), 100% 0, 100% calc(100% - var(--shear)), 0 100%)}
.plane img{width:100%;height:100%;object-fit:cover;display:block}
.plane--sand{background:var(--sand)}
.plane--sage{background:var(--sage)}
.plane--basalt{background:var(--basalt)}
.plane__empty{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:1rem;
              font-family:var(--disp);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;
              color:rgba(42,46,44,.5)}

/* --- Списки -------------------------------------------------------------- */
.steps{display:grid;gap:.9rem;max-width:42ch}
.step{display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:start}
.step__n{font-family:var(--disp);font-size:.66rem;letter-spacing:.2em;color:var(--accent);padding-top:.25rem}
.step__b{border-left:1px solid var(--line);padding-left:.9rem}
.step__b p{margin:0;font-size:.85rem;color:var(--ink-soft)}

.dirs{display:grid;gap:.9rem;max-width:42ch}
.dir{border-top:1px solid var(--line);padding-top:.7rem}
.dir p{margin:0;font-size:.85rem;color:var(--ink-soft)}

/* --- Объекты: крупные окна под реальные фотографии ------------------------
   Форма окна — плоскость знака: изображение видно через её срез. */
.cap--wide{max-width:min(1080px,92vw)}
.works{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;margin:1.8rem 0 1.2rem}
.work{text-align:left}
/* Окно повторяет форму плоскости знака: снимок виден через её срез */
.work__img{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--sage);
      clip-path:polygon(0 var(--shear), 100% 0, 100% calc(100% - var(--shear)), 0 100%);
      transition:transform .6s cubic-bezier(.22,1,.36,1)}
.work:nth-child(2) .work__img{background:var(--sand)}
.work:hover .work__img{transform:translateY(-4px)}
.work__img img{width:100%;height:100%;object-fit:cover;display:block}
.work__empty{position:absolute;inset:0;display:grid;place-items:center;
             font-family:var(--disp);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;
             color:rgba(42,46,44,.45)}
.work__cap{display:grid;gap:.15rem;margin-top:.85rem;padding-top:.7rem;
           border-top:1px solid var(--line)}
.work__n{font-family:var(--disp);font-size:.58rem;letter-spacing:.3em;color:var(--ink-soft)}
.work__name{font-family:var(--disp);font-weight:400;font-size:.92rem;letter-spacing:.06em}
.work__meta{font-size:.74rem;color:var(--ink-soft);line-height:1.4}
.works__note{max-width:64ch;margin:0 auto;padding:.7rem 1.1rem;border-left:2px solid var(--accent);
             font-size:.8rem;color:var(--ink-soft);text-align:left}

/* --- Контакты ------------------------------------------------------------ */
.contacts{font-style:normal;display:grid;gap:.8rem;max-width:38ch}
.contacts a{display:block;color:var(--ink);text-decoration:none;font-size:.94rem;line-height:1.45;
            border-top:1px solid var(--line);padding-top:.65rem;transition:color .2s ease}
.contacts a:hover,.contacts a:focus-visible{color:var(--accent)}
.contacts__k{display:block;font-family:var(--disp);font-size:.58rem;letter-spacing:.3em;
             text-transform:uppercase;color:var(--ink-soft);margin-bottom:.25rem}

/* --- Подпись студии ------------------------------------------------------
   Знак DevCore в двух версиях: чёрная на светлых актах, белая на basalt.
   Одной не обойтись — белый логотип исчезнет на светлом фоне. */
/* Подпись живёт только на последнем экране: класс at-end вешает скрипт.
   Пока не дошли до финала — она не мешает сцене. */
/* по центру: translateX(-50%) держит центровку, а всплытие идёт по Y —
   поэтому обе части живут в одном transform */
.credit{position:absolute;left:50%;bottom:34px;z-index:3;display:flex;align-items:center;gap:.5rem;
        text-decoration:none;opacity:0;pointer-events:none;
        transform:translate(-50%, 6px);
        transition:opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1)}
body.at-end .credit{opacity:.75;pointer-events:auto;transform:translate(-50%, 0)}
body.at-end .credit:hover,
body.at-end .credit:focus-visible{opacity:1}
.credit__by{font-family:var(--disp);font-size:.56rem;letter-spacing:.22em;text-transform:uppercase;
            color:var(--ink-soft);transition:color 1.2s ease}
.credit__logos{position:relative;display:block;width:63px;height:15.5px}
.credit__logo{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
              transition:opacity 1.2s ease}
.credit__logo--paper{opacity:0}
body[data-act="3"] .credit__logo--ink{opacity:0}
body[data-act="3"] .credit__logo--paper{opacity:1}

/* --- Планшет ------------------------------------------------------------- */
@media (max-width:1023px){
  .cap--left,.cap--right{max-width:min(38ch,54vw)}
  .works{gap:.8rem}
}

/* --- Мобильный ----------------------------------------------------------- */
@media (max-width:767px){
  .cap--left,.cap--right{left:1.2rem;right:1.2rem;max-width:none;top:auto;bottom:11vh;transform:none}
  .cap--center{max-width:92vw}
  /* на телефоне подпись внизу — скрим тянем снизу вверх */
  .cap--left::before,.cap--right::before{inset:-8vh -10vw -16vh -10vw;
    background:linear-gradient(0deg, rgba(var(--bg-rgb),.95) 0 52%, rgba(var(--bg-rgb),0) 100%)}
  .cap--center::before{inset:-10vh -12vw;
    background:radial-gradient(ellipse at center, rgba(var(--bg-rgb),.88) 0 50%, rgba(var(--bg-rgb),0) 90%)}
  .works{grid-template-columns:1fr 1fr;gap:.6rem}
  .works .work:nth-child(3){display:none}
  .contacts{max-width:none}
  .credit{bottom:26px}
  h2{font-size:1.3rem}
}

/* --- Доступность --------------------------------------------------------- */
/* Полёт камеры отключить нельзя — это единственный способ увидеть контент,
   поэтому при reduced-motion гасим сглаживание: камера встаёт на точку
   мгновенно, без инерции, а подписи не всплывают. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  .cap > *{transform:none !important}
}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px}