/* Depth journey PoC v2. Всё движение — transform/opacity/mask на GPU;
   раскладка не пересчитывается ни разу за прокрутку. */
:root { color-scheme: dark; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #10140f; }
body { font: 13px/1.45 ui-sans-serif, system-ui, sans-serif; color: #efe6d2; }

#stage { position: fixed; inset: 0; overflow: hidden; }

/* Стартовый кадр до первой живой отрисовки: принятая деревня 1536 (плита и
   вырезки h2f), сжатая до 48×30 и размытая. Виден с первой отрисовки
   документа, пока грузятся модули и плиты; journey.js снимает его классом
   is-live, как только первый кадр сцены декодирован, — в самом маршруте
   его нет. */
html[data-mode='live'] #stage:not(.is-live)::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url(data:image/webp;base64,UklGRvoBAABXRUJQVlA4IO4BAACQCACdASowAB4APrVQnkonJSKhsBVaqOAWiWwAnTNPaRBJtY8HcZ1OouMGy73vREqhpqa/61vE7TSaByC/cZr/6t8NhLCnAX7I1HJ+AAD++WcO3VkQ1PAOsN1gKHW6VTfz1VJn44m3cUtNUf/Vd6Us8JFkk39C817W4qhlmGW1aiKLVIYLuVVGEE8LoJrrtH8J/oRAJKIDUTWz4YIcq4vrNezaia+NmUukE6mXR38u32pfxG9AdTYCrawgEGCCv3a3NuOMW4hjkxWDK67BV4mlLC89Az3lql+27VqvxApWOZDgqRie5AgA247ph6Mnjznckvg0RairbyH8NeifsScGLT3Ol5DmL2ZArsCjn8Hovie2BFXVfUo0DeAf+bI6UJIkNWKia3Jn2LC9M/J3gefn5qY/vC0qVddnkM5L59FlZuS1aNOOOhs+bp5+UDxAhC1P2kAhxFyxE6wPNaAb8o/9G1XT1bCY7kaoV5ZNZ7MkjZRlVXhHwtOspdZiGylmFKRmV38QPCohrRtteCfLN7S04S6qkTOR6RFNuV/Je5vcG2nmvr/G7GD7c++wbiOywGxUAoq79S26egU+eVRhCg4PPxycTPb3Ksu/6UNigLX1h07FAgBy9UltE3tEQj5KqeoS9JGEDnKG8yOVDYAAAA==) center / cover no-repeat;
  filter: blur(22px);
  transform: scale(1.06);
}

/* Держатель не двигается: на нём живёт окно, сквозь которое видно сцену.
   Если повесить маску на сам план, она поедет вместе с его масштабом и
   обрежет кадр по своей же уменьшенной рамке — так было в PoC v1. */
.holder {
  position: absolute;
  inset: 0;
  overflow: hidden;
  will-change: opacity;
}
.holder[hidden] { display: none; }

/* Слой сцены: цельная картина во весь кадр. Масштабируется от точки схода
   своей секции — её задаёт transform-origin, проставленный из журнала. */
.sheet {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
  backface-visibility: hidden;
}
.sheet[hidden] { display: none; }

/* Затемнение краёв на самых быстрых участках: тоннель, но не чёрная труба */
#vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(ellipse 72% 64% at var(--vx, 50%) var(--vy, 40%),
              transparent 34%, rgba(6, 10, 8, .55) 86%, rgba(4, 7, 5, .82) 100%);
}

/* Холодный слой: бирюза приходит локально на пороге и уходит к дому */
#chill {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
  background: radial-gradient(ellipse 58% 52% at var(--vx, 50%) var(--vy, 40%),
              rgba(96, 232, 226, .30), rgba(96, 232, 226, .06) 62%, transparent 100%);
}

/* ------------------------------------------------------------------- UI */
/* Системный UI (знак, язык, звук, глава, нить маршрута) переехал в
   chrome.css и chrome.js: здесь остались только сцена и её слои. */

#debug[hidden] { display: none; }
#debug {
  position: fixed;
  left: 26px; top: 56px;
  z-index: 600;
  padding: 8px 12px;
  background: rgba(14, 18, 20, .84);
  color: #fdf6e0;
  font: 12px/1.5 ui-monospace, monospace;
  white-space: pre;
  pointer-events: none;
}

/* Статическая версия: сцену и хром живого режима прячет static.css по
   data-mode. Отдельного условия по ширине здесь нет: режим решают ранний
   скрипт и boot.js (он же переводит страницу в статику, если окно сузилось
   после старта). Своё условие в CSS прятало живую сцену при data-mode=live,
   и страница оставалась пустой. */