/* ============================================================
   S3 · НЕ ЛЮБИШЬ ПЕРЕМЕНЫ? РАБОТАЙ ГДЕ УДОБНО
   горизонтальная галерея живых мокапов
   ============================================================ */
.space { padding: 0; }
.space__pin {
  position: relative; height: 100vh; height: 100svh; overflow: hidden;
  display: flex; align-items: center;
}

/* фаза 1: тьма; персонаж — постоянный житель сцены (слой над тьмой):
   открывает ноутбук по скроллу, затем бесконечно печатает, и из его
   ноутбука рождаются окна-интерфейсы */
.space__dark {
  position: absolute; inset: 0; z-index: 3;
  background:
    radial-gradient(85% 90% at 68% 62%, #171310 0%, #0b0a09 52%, #050505 100%);
}
.space__actor {
  position: absolute; right: 2vw; bottom: 0; z-index: 4;
  height: 96%; aspect-ratio: 3 / 4;
  /* кадр полностью растворяется в фон по всем краям */
  -webkit-mask-image: radial-gradient(58% 68% at 50% 60%, #000 38%, transparent 86%);
  mask-image: radial-gradient(58% 68% at 50% 60%, #000 38%, transparent 86%);
  opacity: 0;
  will-change: opacity, filter;
}
.space__actor canvas { width: 100%; height: 100%; display: block; }
.space__phrases {
  position: absolute; z-index: 6;
  left: var(--pad); top: 50%; transform: translateY(-60%);
  display: grid; gap: 18px; text-align: left;
  max-width: min(46vw, 640px);
}
.space__ask {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(20px, 2.6vw, 34px);
  color: #4e4b44;
}
.space__answer {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(34px, 5vw, 80px); line-height: 1.06;
  color: #7d786e; opacity: 0; transform: translateY(30px);
  transition: color .6s, text-shadow .6s;
}
.space__answer em { font-style: normal; color: #7d6a3e; transition: color .6s; }
/* свет открытого ноутбука «заливает» текст */
.space__answer.is-lit { color: var(--text); text-shadow: 0 0 60px rgba(255,163,0,.35); }
.space__answer.is-lit em { color: var(--amber); }

@media (max-width: 900px) {
  .space__story { right: 50%; transform: translateX(50%); height: 74%; }
  .space__phrases { left: 20px; right: 20px; top: 12%; transform: none; max-width: none; text-align: center; }
}

/* фаза 2: рельса мокапов — едет поверх персонажа (окна рождаются
   из его ноутбука) */
.space__rail {
  position: relative; z-index: 5;
  display: flex; gap: clamp(30px, 4vw, 70px);
  padding-left: 8vw;
  /* хвост, чтобы последний мокап доезжал до центра экрана */
  padding-right: calc(50vw - clamp(360px, 44vw, 720px) / 2);
  will-change: transform;
}
.shot { flex: 0 0 auto; width: clamp(360px, 44vw, 720px); perspective: 1000px; position: relative; }
.shot figcaption { color: var(--dim); font-size: 11px; margin-bottom: 14px; }
.shot .win { will-change: transform, filter; }
/* «лужа»-тень: окна стоят на полу, а не летают */
.shot::after {
  content: ''; position: absolute; left: 6%; right: 6%; bottom: -26px; height: 30px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0,0,0,.5), transparent 72%);
  pointer-events: none;
}

/* фаза 3: финал */
.space__final {
  position: absolute; left: 0; right: 0; bottom: 7vh; z-index: 4;
  display: grid; justify-items: center; gap: 20px;
  opacity: 0; transform: translateY(30px); pointer-events: none;
}
.space__final.is-on { pointer-events: auto; }
.space__final h3 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(26px, 4vw, 54px); letter-spacing: .01em;
}

/* ---------- окна-мокапы ---------- */
.win {
  border-radius: 14px; overflow: hidden;
  background: #101013; border: 1px solid var(--line);
  box-shadow: 0 40px 90px rgba(0,0,0,.55);
  font-size: 13px;
}
.win__bar {
  display: flex; align-items: center; gap: 7px;
  padding: 11px 14px; background: #17171a; border-bottom: 1px solid var(--line-soft);
}
.win__bar i { width: 10px; height: 10px; border-radius: 50%; background: #2b2b2f; }
.win__bar i:nth-child(1) { background: #4d4d52; }
.win__bar span { margin-left: 8px; color: var(--dim); font-size: 10px; }

.win__body { padding: 18px 20px; display: grid; gap: 7px; align-content: start; min-height: 240px; }
.win__body p { font-size: 12.5px; line-height: 1.75; white-space: nowrap; overflow: hidden; }

.win__cols { display: grid; grid-template-columns: 130px 1fr; min-height: 240px; }
.win__tree { border-right: 1px solid var(--line-soft); padding: 16px 14px; display: grid; gap: 9px; align-content: start; }
.win__tree p { font-size: 11px; color: var(--dim); }
.win__tree p.ind { padding-left: 14px; }
.win__tree p.on { color: var(--amber); }

/* палитра терминала/кода */
.t-p { color: var(--amber); }
.t-c { color: #8ec7ff; }
.t-ok { color: #57d993; }
.t-f { color: #c0bdb4; }
.t-k { color: #ff9d69; }
.t-fn { color: #8ec7ff; }
.t-s { color: #57d993; }
.t-t { color: #c792ea; }
.t-dim { color: var(--dim); }
.caret {
  display: inline-block; width: 8px; height: 14px; vertical-align: -2px;
  background: var(--amber); animation: caret 1s steps(2) infinite;
}
@keyframes caret { 50% { opacity: 0; } }

/* чат */
.msg {
  max-width: 85%; padding: 10px 14px; border-radius: 12px;
  font-size: 12.5px; line-height: 1.5;
}
.msg--user { justify-self: end; background: #1e1c18; border: 1px solid rgba(255,163,0,.25); }
.msg--ai { justify-self: start; background: #17171a; border: 1px solid var(--line-soft); display: flex; gap: 9px; align-items: flex-start; }
.msg--ai img { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.win--chat .msg--ai img[src*="openai"] { filter: invert(1); }
.msg--switch {
  justify-self: center; color: var(--amber); font-size: 10px;
  background: rgba(255,163,0,.07); border: 1px dashed rgba(255,163,0,.35);
  border-radius: 100px; padding: 4px 14px;
}

/* IDE-мокап */
.win--ide .win__body { min-height: 0; }
.ide__models {
  display: flex; align-items: center; gap: 8px; margin-top: 12px;
  padding: 9px 12px; border-radius: 10px;
  background: #0e0e11; border: 1px solid var(--line-soft);
}
.ide__models img { width: 18px; height: 18px; padding: 2px; border-radius: 50%; background: #1a1a1e; }
.ide__models img[src*="openai"] { filter: invert(1); }
.ide__models span { color: var(--dim); font-size: 10px; }

.shot--final .win { border-color: rgba(255,163,0,.4); box-shadow: 0 40px 110px rgba(0,0,0,.6), 0 0 70px rgba(255,163,0,.12); }

@media (max-width: 900px) {
  .shot { width: 82vw; }
  .win__cols { grid-template-columns: 96px 1fr; }
}