/* ============================================================
   ПЕРВЫЙ ЭКРАН «РАЗРАБОТКИ САЙТОВ»: САЙТ СОБИРАЕТСЯ (30.09.2026)
   Секция выше окна, внутри липкая сцена: пока сцена стоит, прокрутка
   листает кадры сборки (--p от 0 до 1 ставит web-build.js). Фон сцены —
   чертёжная сетка, она гаснет по мере сборки: был чертёж — стал сайт.

   Кадры на белом (254, как --bg) и лежат на сетке через multiply. Работает,
   потому что сетка — в той же липкой сцене, что и кадр (один контекст
   наложения). Сквозь сцену до фона страницы multiply не достаёт — грабля 29.09.
   ============================================================ */
.wb{
  position:relative;
  height:calc(100vh + clamp(720px, 95vh, 1100px));
  background:var(--bg);
}
.wb__stage{
  position:sticky; top:0;
  height:100vh; min-height:640px;
  display:flex; align-items:center;
  padding-top:var(--header-h);
  background:var(--bg);
  overflow:hidden;
}
.wb__stage > .shell{ width:100%; }

/* чертёжная сетка: мелкая клетка + крупная, ярче у предмета, гаснет к краям
   и по мере сборки (--p) */
.wb__grid{
  position:absolute; inset:0;
  background:
    linear-gradient(rgba(var(--accent-rgb), .13) 1px, transparent 1px) 0 0 / 96px 96px,
    linear-gradient(90deg, rgba(var(--accent-rgb), .13) 1px, transparent 1px) 0 0 / 96px 96px,
    linear-gradient(rgba(var(--accent-rgb), .065) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(var(--accent-rgb), .065) 1px, transparent 1px) 0 0 / 24px 24px;
  -webkit-mask-image:radial-gradient(60% 75% at 72% 52%, #000 20%, transparent 78%);
          mask-image:radial-gradient(60% 75% at 72% 52%, #000 20%, transparent 78%);
  opacity:calc(1 - var(--p, 0) * .75);
  pointer-events:none;
}

.wb__inner{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr);
  align-items:center;
  gap:clamp(24px, 3vw, 60px);
}
.wb__title em{ white-space:nowrap; }
.wb__lead{ max-width:46ch; margin-bottom:clamp(22px, 2.4vw, 40px); }

.wb__proof{
  list-style:none; margin:clamp(22px, 2.2vw, 34px) 0 0; padding:0;
  display:grid; gap:10px;
}
.wb__proof li{
  position:relative; padding-left:30px;
  font-size:clamp(13.5px, .95vw, 15px); line-height:1.4; color:var(--fg-lead);
}
/* метка — «окошко браузера» с галочкой, в тему страницы */
.wb__proof li::before{
  content:""; position:absolute; left:0; top:-.05em;
  width:20px; height:18px; border-radius:4px;
  background:linear-gradient(var(--accent-1) 0 4px, var(--accent-wash) 4px);
  border:1px solid var(--accent-line);
}
.wb__proof li::after{
  content:""; position:absolute; left:6.5px; top:calc(-.05em + 7.5px);
  width:7px; height:3.5px; border:solid var(--accent-1); border-width:0 0 2px 2px; transform:rotate(-45deg);
}

/* ---------- сцена сборки ---------- */
.wb__media{ position:relative; margin-right:calc(var(--gutter) * -.5); }
.wb__art{
  position:relative;
  aspect-ratio:4 / 3;
  width:100%;
}
.wb__art img, .wb__art canvas{
  position:absolute; inset:0; width:100%; height:100%;
  mix-blend-mode:multiply;
}
.wb__art canvas{ opacity:0; }
.wb__art.is-live canvas{ opacity:1; }
.wb__art.is-live img{ opacity:0; }

/* три шага под картинкой: полоска заполняется вместе со сборкой */
.wb__steps{
  list-style:none; margin:clamp(4px, .6vw, 10px) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:clamp(12px, 1.4vw, 24px);
  position:relative; z-index:1;
}
.wb__step{ display:grid; gap:6px; align-content:start; }
.wb__bar{
  display:block; height:3px; border-radius:3px;
  background:rgba(var(--accent-rgb), .14); overflow:hidden;
}
.wb__bar i{
  display:block; height:100%; width:100%;
  background:linear-gradient(90deg, var(--accent-1), var(--accent-2));
  transform:scaleX(var(--sp, 0)); transform-origin:left;
}
.wb__step b{
  display:flex; align-items:baseline; gap:8px;
  margin-top:6px;
  font:600 clamp(14px, 1vw, 16.5px)/1.3 var(--font);
  color:var(--fg-mute);
  transition:color .35s var(--ease);
}
.wb__n{
  font:600 11.5px/1 var(--font-mono);
  letter-spacing:.06em; color:var(--fg-mute);
  transition:color .35s var(--ease);
}
.wb__s{
  font-size:clamp(12.5px, .86vw, 14px); line-height:1.45; color:var(--fg-mute);
  opacity:.75; transition:opacity .35s var(--ease), color .35s var(--ease);
}
.wb__step.is-on b, .wb__step.is-done b{ color:var(--fg); }
.wb__step.is-on .wb__n, .wb__step.is-done .wb__n{ color:var(--accent-1); }
.wb__step.is-on .wb__s, .wb__step.is-done .wb__s{ opacity:1; color:var(--fg-lead); }

/* подсказка «прокрутите»: колёсико мыши, пропадает, как только сборка пошла */
.wb__hint{
  position:absolute; left:50%; bottom:calc(100% - 6px);
  translate:-50% 0;
  display:flex; align-items:center; gap:10px;
  margin:0; padding:7px 12px;
  background:#fff; border:1px solid var(--line); border-radius:4px;
  box-shadow:var(--shadow-card);
  font-size:13px; color:var(--fg-lead); white-space:nowrap;
  opacity:calc(1 - var(--p, 0) * 12);
  pointer-events:none;
}
.wb__hint i{
  position:relative; width:14px; height:20px; border-radius:7px;
  border:1.5px solid var(--accent-1);
}
.wb__hint i::after{
  content:""; position:absolute; left:50%; top:4px; width:2px; height:5px; margin-left:-1px;
  border-radius:1px; background:var(--accent-1);
  animation:wb-wheel 1.6s var(--ease) infinite;
}
@keyframes wb-wheel{ 0%{ transform:translateY(0); opacity:1; } 70%{ transform:translateY(6px); opacity:0; } 100%{ opacity:0; } }
.wb:not(.is-live) .wb__hint{ display:none; }

@media (prefers-reduced-motion: reduce){
  .wb{ height:auto; }
  .wb__stage{ position:relative; height:auto; min-height:0; padding-bottom:clamp(48px, 5vw, 90px); }
  .wb__hint{ display:none; }
}