/* =========================================================================
   Тестовая главная (variants/codex-test): неподвижный видеофон до блока
   «Дизайн-проект», этапы ролика вместо ленты портфолио, мини-расчёт на
   движке калькулятора, редакционное проявление фотографий.
   Подключается только на главной.
   ========================================================================= */

/* ---------- 1. Сцена: видео стоит на месте, контент едет поверх ---------- */
/* overflow: clip — не даёт залипающему слою (у него отрицательный нижний отступ)
   вылезти под блок «Дизайн-проект»; в отличие от hidden, липкость не ломает. */
.home-stage { position: relative; isolation: isolate; overflow: clip; }
@supports not (overflow: clip) { .home-stage { clip-path: inset(0); } }
.stage-media {
  position: sticky;
  top: 0;
  z-index: -1;
  height: 100vh;
  height: 100lvh;              /* не прыгает, когда в мобильном браузере прячется адресная строка */
  margin-bottom: -100vh;
  margin-bottom: -100lvh;
  overflow: hidden;
  background: var(--bg-stage);
  pointer-events: none;
}
/* Тон видео — как в первом экране Codex (тестовая страница /test/video/ на 5176) */
.stage-media__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.85) contrast(1.04);
}
/* Затемнение и светлая подложка едут вместе со своими блоками, видео стоит:
   первый экран — тёмный, как в Codex; блоки ниже — светлые, видео просвечивает.
   Белый текст всегда на тёмном, тёмный — на светлом, серой середины нет. */
.home-stage > .section { background: rgb(var(--cream-rgb) / .8); }
.home-stage .stat-row__item { border-top-color: rgb(var(--walnut-rgb) / .5); }

/* ---------- 2. Шапка: над первым экраном — светлый текст, как в Codex;
   после прокрутки — полупрозрачная, видео просвечивает ---------- */
.site-header--stage[data-transparent="true"].is-scrolled {
  background: rgb(var(--card-rgb) / .84);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
}

/* ---------- 3. Первый экран ---------- */
/* То же затемнение, что у .home-hero .hero-video__scrim в Codex */
.stage-hero {
  position: relative;
  background: linear-gradient(180deg, rgb(var(--ink-rgb) / .65) 0%, rgb(var(--ink-rgb) / .53) 35%, rgb(var(--ink-rgb) / .68) 72%, rgb(var(--ink-rgb) / .94) 100%);
}
.stage-hero__inner {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: max(700px, 100svh);
  padding-top: calc(var(--header-h) + 32px);
  padding-bottom: 26px;
}
.stage-hero__text { margin: auto auto 52px; max-width: 860px; text-align: center; }
.stage-hero .eyebrow { color: rgb(var(--paper-rgb) / .88); font-size: var(--fs-xs); letter-spacing: .19em; margin-bottom: 18px; }
.stage-hero h1 {
  max-width: 17ch;
  margin: 0 auto;
  color: var(--paper);
  font-size: var(--fs-display);
  line-height: 1.09;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.stage-hero__subtitle {
  max-width: 610px;
  margin: 22px auto 28px;
  color: rgb(var(--paper-rgb) / .9);
  font-size: var(--fs-hero-lead);
  text-wrap: pretty;
}
.stage-hero__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 30px; }
.stage-hero :focus-visible { outline-color: var(--paper); }

/* ---------- 4. Этапы ролика: подписи живут в HTML, а не во вшитом тексте ---------- */
.stage-steps { width: 100%; }
.stage-steps__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: 6px;
  color: rgb(var(--paper-rgb) / .82);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.stage-steps__head a { color: var(--paper); border-bottom: 1px solid rgb(var(--paper-rgb) / .5); padding-bottom: 2px; }
.stage-steps__tools { display: flex; align-items: center; gap: 18px; }
/* Кнопка паузы: оформление Codex, только без абсолютного позиционирования */
.stage-steps .video-toggle { position: static; width: 36px; height: 36px; }
.stage-steps__list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-1-5); margin: 0; padding: 0; list-style: none; }
.stage-step {
  position: relative;
  display: grid;
  gap: 10px;
  width: 100%;
  padding: 14px 0 6px;
  border: 0;
  background: none;
  color: var(--paper);
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}
.stage-step__bar { display: block; height: 2px; overflow: hidden; background: rgb(var(--paper-rgb) / .22); border-radius: var(--radius-xs); }
.stage-step__fill {
  display: block;
  height: 100%;
  background: var(--paper);
  transform: scaleX(0);
  transform-origin: left center;
}
.stage-step.is-done .stage-step__fill { transform: scaleX(1); background: rgb(var(--paper-rgb) / .5); }
.stage-step__meta { display: flex; align-items: baseline; gap: var(--space-1); }
/* бордовый на тёмном почти не читается — номер в тёплом светлом тоне */
.stage-step__num { color: var(--accent-light); font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .12em; }
.stage-step__label { font-size: var(--fs-md); line-height: 1.3; opacity: .72; transition: opacity var(--dur-base) var(--ease-out); }
.stage-step[aria-current="step"] .stage-step__label { opacity: 1; }
.stage-step:focus-visible { outline: 2px solid var(--paper); outline-offset: 4px; }
.stage-steps__now { display: none; }
@media (hover: hover) and (pointer: fine) {
  .stage-step:hover .stage-step__label { opacity: 1; }
  .stage-steps__head a:hover { border-color: var(--paper); }
}

@media (max-width: 767px) {
  .stage-hero__inner { min-height: max(640px, 100svh); padding-top: calc(var(--header-h-mobile) + 28px); padding-bottom: 18px; }
  .stage-hero__text { margin-bottom: 36px; }
  .stage-hero .eyebrow { font-size: var(--fs-2xs); letter-spacing: .14em; }
  .stage-hero h1 { max-width: 13ch; font-size: var(--fs-display); }
  .stage-hero__subtitle { margin: 18px auto 22px; font-size: var(--fs-ui); line-height: 1.5; }
  .stage-hero__cta .btn { width: 100%; }
  .stage-steps__head > span { display: none; }
  .stage-steps__head { justify-content: flex-end; }
  .stage-steps .video-toggle { width: 44px; height: 44px; }
  /* На телефоне — шесть сегментов, как у «историй», и подпись текущего этапа */
  .stage-steps__list { gap: var(--space-0-5); }
  .stage-step { min-height: 44px; padding: var(--space-2-5) 0 0; align-content: start; }
  .stage-step__meta { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .stage-steps__now { display: block; margin-top: 2px; color: var(--paper); font-size: var(--fs-md); }
  .stage-steps__now b { color: var(--accent-light); font-size: var(--fs-2xs); letter-spacing: .12em; margin-right: 6px; }
}

/* ---------- 5. Проявление фотографий: «шторка» снизу вверх, один раз ---------- */
/* Шторка закрыта только вместе с js-reveal (style.css §19): если появление не
   запустилось, страховка снимает js-reveal — и фото открыты. */
@media (prefers-reduced-motion: no-preference) {
  .js-reveal.has-stage-js .home-stage .service-featured__frame img,
  .js-reveal.has-stage-js .home-stage .service-tile img,
  .js-reveal.has-stage-js .home-stage .pf-feature__frame img,
  .js-reveal.has-stage-js .home-stage .pf-feature__detail img,
  .js-reveal.has-stage-js .home-stage .pf-card__frame img {
    clip-path: inset(0 0 100% 0);
    transition: clip-path var(--dur-reveal) var(--ease-out), transform var(--dur-slow) var(--ease-out), filter var(--dur-base) var(--ease-out);
  }
  .has-stage-js .home-stage .is-visible .service-featured__frame img,
  .has-stage-js .home-stage .service-tile.is-visible img,
  .has-stage-js .home-stage .pf-feature.is-visible .pf-feature__frame img,
  .has-stage-js .home-stage .pf-feature.is-visible .pf-feature__detail img,
  .has-stage-js .home-stage .pf-secondary.is-visible .pf-card__frame img { clip-path: inset(0 0 0 0); }
  .has-stage-js .home-stage .pf-feature.is-visible .pf-feature__detail img { transition-delay: 180ms; }
  .has-stage-js .home-stage .pf-secondary.is-visible .pf-card:nth-child(2) .pf-card__frame img { transition-delay: 90ms; }
  .has-stage-js .home-stage .pf-secondary.is-visible .pf-card:nth-child(3) .pf-card__frame img { transition-delay: 180ms; }
}

/* ---------- 6. Мини-расчёт: те же формулы, что в калькуляторе ---------- */
.estimator { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
.estimator__intro .body-lead { margin: var(--space-2) 0 28px; max-width: 460px; }
.estimator__intro .caption { margin-top: 18px; max-width: 420px; }
.estimator__panel {
  padding: clamp(22px, 3vw, 38px);
  background: var(--bg-card);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-2);
}
.estimator__field { margin: 0; padding: 0; border: 0; min-width: 0; }
.estimator__field + .estimator__field { margin-top: 22px; }
.estimator__legend, .estimator__field > label {
  display: block;
  margin-bottom: 10px;
  padding: 0;
  color: var(--text-muted);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.estimator__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-1-5); }
.estimator__area { font-family: var(--font-serif); font-size: var(--fs-2xl); font-variant-numeric: tabular-nums; }
.estimator__area small { color: var(--text-muted); font-family: var(--font-sans); font-size: var(--fs-sm); }

.estimator__range { --p: 25%; width: 100%; height: 28px; margin: var(--space-0-5) 0 0; background: none; -webkit-appearance: none; appearance: none; cursor: pointer; }
.estimator__range::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--accent-maroon) 0 var(--p), rgb(var(--graphite-rgb) / .16) var(--p) 100%);
}
.estimator__range::-moz-range-track { height: 3px; border-radius: var(--radius-sm); background: rgb(var(--graphite-rgb) / .16); }
.estimator__range::-moz-range-progress { height: 3px; border-radius: var(--radius-sm); background: var(--accent-maroon); }
.estimator__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  margin-top: -10.5px;
  border-radius: var(--radius-round);
  background: var(--accent-maroon);
  border: 4px solid var(--bg-card);
  box-shadow: 0 0 0 1px rgb(var(--maroon-rgb) / .45), var(--shadow-1);
  transition: transform var(--dur-fast) var(--ease-out);
}
.estimator__range::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: var(--radius-round);
  background: var(--accent-maroon);
  border: 4px solid var(--bg-card);
  box-shadow: 0 0 0 1px rgb(var(--maroon-rgb) / .45), var(--shadow-1);
}
.estimator__range:active::-webkit-slider-thumb { transform: scale(1.12); }
.estimator__range:focus-visible { outline: 2px solid var(--accent-maroon); outline-offset: 4px; border-radius: var(--radius-sm); }

.estimator__seg { display: flex; flex-wrap: wrap; gap: 6px; }
.estimator__seg label { position: relative; cursor: pointer; }
.estimator__seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.estimator__seg span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-2);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-pill);
  background: rgb(var(--paper-rgb) / .5);
  font-size: var(--fs-md);
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.estimator__seg input:checked + span { background: var(--text-graphite); border-color: var(--text-graphite); color: var(--bg-card); }
.estimator__seg input:focus-visible + span { outline: 2px solid var(--accent-maroon); outline-offset: 2px; }
.estimator__seg label:active span { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .estimator__seg label:hover input:not(:checked) + span { border-color: var(--text-graphite); }
}

.estimator__result { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line-hairline); }
.estimator__label { color: var(--text-muted); font-size: var(--fs-sm); }
.estimator__total {
  margin: var(--space-0-5) 0 var(--space-2);
  font-family: var(--font-serif);
  font-size: var(--fs-figure);
  line-height: 1.1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.estimator__bar { display: flex; gap: 2px; height: 8px; overflow: hidden; border-radius: var(--radius-sm); }
.estimator__bar span { flex: 0 0 auto; transition: flex-basis var(--dur-base) var(--ease-out); }
.estimator__part--service { background: var(--accent-maroon); }
.estimator__part--works { background: var(--wood-walnut); }
.estimator__part--materials { background: var(--wood-oak); }
.estimator__part--furnishing { background: var(--sand); }
.estimator__parts { display: grid; gap: var(--space-1); margin: var(--space-2) 0 0; }
.estimator__parts div { display: flex; justify-content: space-between; gap: var(--space-1-5); font-size: var(--fs-md); }
.estimator__parts dt { display: flex; align-items: center; gap: 10px; color: var(--text-soft); }
.estimator__parts dt i { flex: none; width: 8px; height: 8px; border-radius: var(--radius-xs); }
.estimator__parts dd { margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.estimator__note { margin-top: var(--space-2); color: var(--text-muted); font-size: var(--fs-xs); line-height: 1.5; }
@media (max-width: 1023px) {
  .estimator { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 430px) {
  .estimator__parts div { font-size: var(--fs-sm); }
  .estimator__seg span { padding: 0 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .estimator__bar span, .estimator__seg span, .stage-step__label { transition: none; }
}

/* ---------- 7. Шаги «Как мы работаем» доступны с клавиатуры ---------- */
.process-horizontal--interactive .process-col { cursor: pointer; }
.process-horizontal--interactive .process-col:focus-visible { outline: 2px solid var(--accent-maroon); outline-offset: 4px; }