/* =====================================================================
   Вамос — «живой день»: мир из семи фото. Файл оформителя.
   Правила и договор с разработчиком — штаб/проект/стиль.md, раздел «Мир»; план — штаб/проект/мир-из-фото.md.

   Как устроено (с 14.10 — несколько фото на сцену, план — штаб/проект/фото-замена.md).
   • У каждой сцены свой набор фото (всего 42); при открытии js берёт одно случайно и вставляет его
     в .mir__foto-sceny, ключ пишет в data-foto на .mir. Видно только фото текущей сцены (data-scena на .mir).
   • Вид НЕ подобран ни под один снимок: кадр — по центру файла, подложки под текст — одни на все фото
     (style.css), «небо» над фото при переходе — по часу сцены. Слоя «тона часа» и искр «блеска воды»
     больше нет: фото уже доработаны Кодексом (цвет и свет), а слой, выставленный по горизонту одного
     снимка, на другом ложился бы мимо.
   • js пишет только переменные (--den, --p, --gx, --gy) и атрибуты data-scena, data-foto. Всё, что из них
     следует, — где фото, когда камера «поднимается в небо» между сценами, — считается здесь.
   • Движение — только под html.zhivoy: сдвиг от мыши/наклона и подъём в небо — свойством translate,
     медленный наезд — scale. Без класса zhivoy (тихий режим, «меньше движения», нет js) мир стоит.
   ===================================================================== */

/* ---------- Договор: значения по умолчанию ----------
   Объявлены на :root, а не на .mir — чтобы значения, которые js пишет на .mir, и style на <html>
   в пробных снимках не перебивались. */
:root {
  --den: 0;          /* 0 → 1: утро первой сцены → ночь последней (js, на .mir и на nav.indeks) */
  --p: 0;            /* путь внутри текущей сцены 0 → 1 (js, на .scena и копией на .mir) */
  --v: 0;            /* прибытие в сцену 0 → 1 (js, на .scena и копией на .mir) */
  --gx: 0;           /* −1…1: мышь/наклон по горизонтали (js, сглажено) */
  --gy: 0;           /* −1…1: по вертикали */
}

/* ---------- Мир: основа ---------- */
.mir {
  /* без js: мир — неподвижное фото первой сцены за первым экраном */
  position: absolute; left: 0; top: 0; width: 100%;
  height: 100vh; height: 100svh;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
  container-type: size;            /* единицы cqw/cqh — от размера мира, а не страницы */
  background: #4A5C8A;             /* пока фото и его фон-заглушка не встали */
}
/* без js --den никто не пишет: ставим утро первой сцены */
html:not(.js) .mir { --den: 0.05; }

/* =====================================================================
   ФОТО: общее устройство (с 14.10; план и договор разметки — штаб/проект/фото-замена.md;
   правила вида — стиль.md, «Мир», «Фото сцен: любой вариант»)
   Разметка одного фото — вариант из <template class="mir__varianty"> своей сцены; js вставляет один
   в .mir__foto-sceny:
     <div class="mir__foto" data-scena-foto="utro" data-foto="утро-г" data-podpis="Фото: …">
       <picture>
         <source media="(max-aspect-ratio: 4/5)" srcset="img/фото/утро-г-390.webp">
         <img class="mir__foto-kadr" src="img/фото/утро-г-1440.webp" alt="…">
       </picture>
     </div>
   (Правила ниже держатся только за классы .mir__foto и .mir__foto-kadr — годится и <picture class="mir__foto">.)
   Все файлы одних пропорций: 1440 — 1536 × 1024 (3:2), 390 — 1024 × 1536 (2:3). Коробка .mir__foto —
   ровно в пропорциях файла и накрывает экран с запасом (--foto-zapas) под сдвиг и наезд; лишнее режется
   поровну с двух сторон (кадр по центру). Медиа-условие телефона — то же, что у <source>.
   Подгонки под конкретный снимок нет и по умолчанию не нужно. Если когда-нибудь один вариант режется
   неудачно, правка — точечно по ключу: .mir__foto[data-foto="утро-г"] { --foto-px: 0.3; }
   ===================================================================== */
.mir__foto {
  --foto-ar: 1.5;                /* 1536 × 1024 */
  --foto-px: 0.5;                /* где резать по ширине, если экран уже файла: 0 — левый край, 1 — правый */
  --foto-py: 0.5;                /* по высоте */
  --foto-zapas: 16px;            /* поле за краем экрана с каждой стороны: сдвиг до 12 + наезд */
  --foto-sdvig: 12px;            /* сдвиг от мыши/наклона */
  --foto-w: max(calc(100cqw + 2 * var(--foto-zapas)), calc((100cqh + 2 * var(--foto-zapas)) * var(--foto-ar)));
  --foto-h: calc(var(--foto-w) / var(--foto-ar));
  position: absolute;
  left: calc((100cqw - var(--foto-w)) * var(--foto-px));
  top: calc((100cqh - var(--foto-h)) * var(--foto-py));
  width: var(--foto-w); height: var(--foto-h);
  overflow: hidden;
  visibility: hidden;
  transform-origin: 50% 50%;     /* наезд — в середину кадра */
  /* пока файл грузится — не голубая дыра, а небо и земля часа сцены (цвета — ниже, «Час сцены») */
  background: linear-gradient(to bottom, var(--foto-nebo-verh, #3F6FA8) 0, var(--foto-nebo, #6E98C8) 42%,
                              var(--foto-zemlya, #3E5A55) 100%);
}

/* телефон стоя: файл 1024 × 1536 (2:3) */
@media (max-aspect-ratio: 4/5) {
  .mir__foto {
    --foto-ar: 0.6667;
    --foto-sdvig: 8px;
  }
}

.mir__foto-kadr {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none;
  display: block;
  object-fit: cover;             /* коробка и так в пропорциях файла; cover — страховка от округления */
  object-position: calc(var(--foto-px) * 100%) calc(var(--foto-py) * 100%);
  user-select: none; -webkit-user-drag: none;
}

/* Движение кадра — только под zhivoy, тремя отдельными свойствами (они складываются, не мешают друг другу):
   translate — мышь/наклон (--gx, --gy от js), scale — прокрутка сцены (--p 0 → 1: +0,02),
   transform — сам наезд при загрузке (1 → 1,02 за 24 с, один раз). Вместе — не больше 1,04 */
html.zhivoy .mir__foto {
  translate: calc(var(--gx) * var(--foto-sdvig)) calc(var(--gy) * var(--foto-sdvig) * 0.5);
  scale: calc(1 + 0.02 * var(--p));
  animation: mir-foto-naezd 24s cubic-bezier(0.25, 0.1, 0.25, 1) both;
  will-change: transform;
}
@keyframes mir-foto-naezd { from { transform: scale(1); } to { transform: scale(1.02); } }
@media (prefers-reduced-motion: reduce) {
  html.zhivoy .mir__foto { translate: none; scale: none; animation: none; }
}

/* =====================================================================
   МИР ИЗ ФОТО: все сцены (записано 09.10.2026, переписано 14.10 под варианты фото; договор — стиль.md, «Мир»;
   план — штаб/проект/фото-замена.md)
   Одна сцена — одно фото (выбранный вариант), один час. Все фото лежат в одном контейнере .mir__foto-sceny внутри .mir.
   У каждого фото — data-scena-foto со словом своей сцены (id секции): utro, kort, zaezd, more, turnir, uzhin, vamos.
   Селекторы ниже — через ~=, так что и старое «два слова через пробел» по-прежнему сработало бы.

   Как видно: только фото текущей сцены (.mir[data-scena]). Смена — «через небо»:
   • пока идёт переход между сценами (промежуток --den между ними, у перелёта и у проезда одинаково), все фото
     опускаются на --foto-podem высоты экрана — камера поднимается в небо фото; над верхним краем фото — его же небо,
     продлённое градиентом (::after, цвета --foto-nebo → --foto-nebo-verh), шва нет;
   • в верхней точке (там js меняет data-scena) новое фото проявляется поверх старого за --foto-smena (1 с), старое
     держится под ним целиком и уходит, когда новое уже стоит, — чёрного и пустого кадра нет.
   Рисованного мира (небо кодом, берег, клуб, мяч, луна) с 09.10 нет: Э5 убрал его из разметки и отсюда.
   ===================================================================== */

/* --- Что вычисляется на .mir --- */
/* --nebo-podem объявлен числом: тогда getComputedStyle(.mir) отдаёт готовое число (0 на месте, до 1 в небе),
   а не строку calc(…) — проверки могут читать, идёт ли переход. Без js (--den нет) — 0 */
@property --nebo-podem { syntax: "<number>"; inherits: true; initial-value: 0; }
.mir {
  --foto-smena: 1s;              /* сколько проявляется новое фото */
  /* подъём камеры в небо: 0 → 1 → 0 в каждом промежутке --den между сценами (числа — из data-den в index.html:
     01→02 0,10–0,15 · 02→03 0,25–0,30 · 03→04 0,38–0,43 · 04→05 0,55–0,60 · 05→06 0,68–0,74 · 06→07 0,86–0,90).
     Вершина — ровно в середине промежутка, там же js меняет data-scena */
  --nebo-podem: calc(
      0.5 - 0.5 * cos(clamp(0, (var(--den) - 0.10) / 0.05, 1) * 360deg)
    + 0.5 - 0.5 * cos(clamp(0, (var(--den) - 0.25) / 0.05, 1) * 360deg)
    + 0.5 - 0.5 * cos(clamp(0, (var(--den) - 0.38) / 0.05, 1) * 360deg)
    + 0.5 - 0.5 * cos(clamp(0, (var(--den) - 0.55) / 0.05, 1) * 360deg)
    + 0.5 - 0.5 * cos(clamp(0, (var(--den) - 0.68) / 0.06, 1) * 360deg)
    + 0.5 - 0.5 * cos(clamp(0, (var(--den) - 0.86) / 0.04, 1) * 360deg));
}

/* --- Контейнер --- */
.mir__foto-sceny { position: absolute; inset: 0; pointer-events: none; }

/* --- Фото сцены: по умолчанию скрыто и уходит; видно — только своё --- */
.mir__foto-sceny > .mir__foto {
  /* фото не тает краем: в переходе его верх продлён небом (::after) */
  overflow: visible;
  transform-origin: var(--foto-tochka, 50% 50%);   /* наезд в середину: кадр не знает, где на снимке главное */
  --foto-podem: 0.5;             /* на сколько экрана опускается фото в верхней точке перехода */
  /* полоса, где фото переходит в продлённое небо. С 14.10 длиннее (было 12cqh): цвет неба задан по часу сцены,
     а не взят с верха конкретного снимка, — длинный мягкий шов прячет несовпадение */
  --foto-shov: 18cqh;
  --foto-naezd: 0.04;            /* наезд за сцену: 1 → 1,04 (у 01 — 0,02 + 0,02 при загрузке, как было) */
  --foto-p: clamp(0, (var(--den) - var(--foto-d0, 0)) / (var(--foto-d1, 1) - var(--foto-d0, 0)), 1);
  z-index: 0; opacity: 0; visibility: hidden;
  /* уходит: новое фото уже проявилось над ним — старое держится целиком --foto-smena и пропадает разом.
     Чёрного и пустого кадра нет: у всех семи сцен своё фото */
  transition:
    opacity 0s linear var(--foto-smena),
    visibility 0s linear var(--foto-smena);
}
.mir[data-scena="utro"]   .mir__foto-sceny > .mir__foto[data-scena-foto~="utro"],
.mir[data-scena="kort"]   .mir__foto-sceny > .mir__foto[data-scena-foto~="kort"],
.mir[data-scena="zaezd"]  .mir__foto-sceny > .mir__foto[data-scena-foto~="zaezd"],
.mir[data-scena="more"]   .mir__foto-sceny > .mir__foto[data-scena-foto~="more"],
.mir[data-scena="turnir"] .mir__foto-sceny > .mir__foto[data-scena-foto~="turnir"],
.mir[data-scena="uzhin"]  .mir__foto-sceny > .mir__foto[data-scena-foto~="uzhin"],
.mir[data-scena="vamos"]  .mir__foto-sceny > .mir__foto[data-scena-foto~="vamos"] {
  z-index: 1; opacity: 1; visibility: inherit;
  transition: opacity var(--foto-smena) ease, visibility 0s;
}
/* Без js фото 01 стоит внутри <noscript> (первый вариант набора) — правило выше его не видит: между
   .mir__foto-sceny и .mir__foto лишний предок. Показываем его так же, как выбранный вариант (тестер, 14.10:
   без js мир был пустым синим фоном). Со скриптами <noscript> браузер не рисует — правило ничего не меняет */
.mir__foto-sceny > noscript > .mir__foto { z-index: 1; opacity: 1; visibility: visible; }
/* продлённое небо над фото: видно, только когда фото опустилось (на месте и в тихом режиме его нет) */
.mir__foto-sceny > .mir__foto::after {
  content: ""; position: absolute; left: 0; right: 0; pointer-events: none;
  bottom: calc(100% - var(--foto-shov));
  height: calc(100cqh + var(--foto-shov));
  /* шов — мягкая S-кривая: внизу почти фото, к верху полосы — уже ровное небо.
     --foto-nebo-put — где от низа слоя цвет края (--foto-nebo) уже стал верхним (--foto-nebo-verh); по умолчанию
     у самого верха (100 %). Короче — если верх фото не небо (кроны, стена): тёмный край быстро уходит в небо,
     а не висит мутью на полэкрана (02/05, корт) */
  background: linear-gradient(to top, transparent 0,
    color-mix(in srgb, var(--foto-nebo, #6E98C8) 20%, transparent) calc(var(--foto-shov) * 0.3),
    color-mix(in srgb, var(--foto-nebo, #6E98C8) 80%, transparent) calc(var(--foto-shov) * 0.7),
    var(--foto-nebo, #6E98C8) var(--foto-shov), var(--foto-nebo-verh, #3F6FA8) var(--foto-nebo-put, 100%));
  opacity: clamp(0, var(--nebo-podem) * 40, 1);   /* 0 на месте; полностью — раньше, чем откроется край фото */
  display: none;
}
html.zhivoy .mir__foto-sceny > .mir__foto::after { display: block; }

/* --- Движение фото (только живой режим): мышь/наклон + подъём в небо — translate; наезд за сцену — scale --- */
html.zhivoy .mir__foto-sceny > .mir__foto {
  translate: calc(var(--gx) * var(--foto-sdvig))
             calc(var(--gy) * var(--foto-sdvig) * 0.5 + var(--nebo-podem) * var(--foto-podem) * 100cqh);
  scale: calc(1 + var(--foto-naezd) * var(--foto-p));
  animation: none;               /* наезд при загрузке — только у первого экрана (ниже) */
}
html.zhivoy .mir__foto-sceny > .mir__foto[data-scena-foto~="utro"] {
  --foto-naezd: 0.02;
  animation: mir-foto-naezd 24s cubic-bezier(0.25, 0.1, 0.25, 1) both;
}
@media (prefers-reduced-motion: reduce) {
  html.zhivoy .mir__foto-sceny > .mir__foto { translate: none; scale: none; animation: none; }
}

/* --- Путь сцены для наезда (--foto-d0 → --foto-d1 — data-den секции) --- */
.mir__foto-sceny > .mir__foto[data-scena-foto~="vamos"]  { --foto-d0: 0.9;  --foto-d1: 1; }
.mir__foto-sceny > .mir__foto[data-scena-foto~="uzhin"]  { --foto-d0: 0.74; --foto-d1: 0.86; }
.mir__foto-sceny > .mir__foto[data-scena-foto~="turnir"] { --foto-d0: 0.6;  --foto-d1: 0.68; }
.mir__foto-sceny > .mir__foto[data-scena-foto~="more"]   { --foto-d0: 0.43; --foto-d1: 0.55; }
.mir__foto-sceny > .mir__foto[data-scena-foto~="zaezd"]  { --foto-d0: 0.3;  --foto-d1: 0.38; }
.mir__foto-sceny > .mir__foto[data-scena-foto~="kort"]   { --foto-d0: 0.15; --foto-d1: 0.25; }
.mir__foto-sceny > .mir__foto[data-scena-foto~="utro"]   { --foto-d0: 0;    --foto-d1: 0.1; }

/* --- Час сцены: небо над фото при переходе и фон, пока файл грузится (с 14.10) ---
   Цвета — по часу сцены, а не по снимку: у каждого варианта своё небо (а у корта неба нет совсем), ровный
   градиент часа над любым из них читается продолжением — шов мягкий и длинный (--foto-shov 18cqh).
   --foto-nebo — у верхнего края фото, --foto-nebo-verh — выше; --foto-zemlya — низ фона-заглушки.
   Час: 01 рассвет · 02 утро · 03 позднее утро · 04 полдень · 05 золотой час · 06 закат · 07 ночь.
   Прежние числа (небо утра #3F619A/#1A5AA0, кроны корта #1F271A, белое небо Льяфранка #F8F5EE и т. п.) были
   сняты с верхней кромки одного файла — с 14.10 их нет */
.mir__foto-sceny > .mir__foto[data-scena-foto~="utro"]   { --foto-nebo: #8DB4DA; --foto-nebo-verh: #5C88BF; --foto-zemlya: #3E5A55; }
.mir__foto-sceny > .mir__foto[data-scena-foto~="kort"]   { --foto-nebo: #94BCE0; --foto-nebo-verh: #5A90CA; --foto-zemlya: #2F5B8C; }
.mir__foto-sceny > .mir__foto[data-scena-foto~="zaezd"]  { --foto-nebo: #8EBCE4; --foto-nebo-verh: #4F8BCB; --foto-zemlya: #4A6A5E; }
.mir__foto-sceny > .mir__foto[data-scena-foto~="more"]   { --foto-nebo: #86BCEB; --foto-nebo-verh: #4689D2; --foto-zemlya: #2E6E8E; }
.mir__foto-sceny > .mir__foto[data-scena-foto~="turnir"] { --foto-nebo: #C4B49C; --foto-nebo-verh: #7C93B0; --foto-zemlya: #3A5470; }
.mir__foto-sceny > .mir__foto[data-scena-foto~="uzhin"]  { --foto-nebo: #E6B48A; --foto-nebo-verh: #8A7CA0; --foto-zemlya: #3C3446; }
.mir__foto-sceny > .mir__foto[data-scena-foto~="vamos"]  { --foto-nebo: #2A3F5E; --foto-nebo-verh: #16233A; --foto-zemlya: #141B26; }

/* --- Тень под верхней полосой и под шкалой: одна на все фото ---
   До 14.10 у корта, моря и вечера тень была ослаблена до .55 (под светлые кроны, небо Агуаблавы и ночь
   С’Аренеллы), а подложка заголовка — урезана под каждый снимок (inset -80px -4vw, -120px -10vw). Теперь фото
   сцены случайное: светлое или тёмное — заранее неизвестно. Поэтому тень везде полная (прозрачность 1, из
   style.css), а подложка заголовка — одна на все сцены (style.css, «Подложка под текст сцены»). */
/* С 14.10 (смотрители, 50 снимков вариантов): верхняя тень — ОДНА ровная полоса во всю ширину, почти чёрная
   без оттенка (--тень-фото из style.css), и лежит она в самом мире, над фото, но под текстом сцен, подписью,
   подвалом и листами. Прежние тень полосы (.polosa::before, зелёная) и круглое пятно под куполом шкалы
   (.indeks::before) на светлом небе давали серо-синее пятно (утро-а, утро-д), на тёплом камне — серо-бурую
   муть (море-б), а на валунах, пёстром холме и сетке корта их не хватало (море-г, заезд-в, корт-г).
   Чёрный с прозрачностью только темнит фото: небо остаётся синим, закат — золотым, поэтому отдельная тёплая
   тень у «Ужина» больше не нужна. Ступени — по замеру на 1440 × 900: знак, «Подробно», «Вамос» — 14–58 точек
   от верха, номера дуги — 1–91, имя сцены — 106–123. До 128 тёмного не меньше 42 % (белые буквы над белым
   пикселем — от 3, над светлым небом — от 4.5; у букв шкалы ещё своя обводка, у «Подробно» — своя подложка),
   дальше полоса гаснет плавной кривой к 300 — края не видно. 62 % у верха (первая проба) делало дневное небо
   грозовым — сняли до 52 */
html.js .mir::after {
  content: ""; position: absolute; inset: 0 0 auto 0; z-index: 2; pointer-events: none;
  height: 300px;
  background: linear-gradient(to bottom,
    rgb(var(--тень-фото) / 0.52) 0, rgb(var(--тень-фото) / 0.5) 50px, rgb(var(--тень-фото) / 0.46) 100px,
    rgb(var(--тень-фото) / 0.42) 128px, rgb(var(--тень-фото) / 0.33) 158px, rgb(var(--тень-фото) / 0.22) 188px,
    rgb(var(--тень-фото) / 0.12) 218px, rgb(var(--тень-фото) / 0.05) 246px, rgb(var(--тень-фото) / 0.015) 274px,
    rgb(var(--тень-фото) / 0) 300px);
}
/* телефон: сверху только знак (до 56) и подпись на своей подложке; шкала — внизу, в плашке. Полоса короче */
@media (max-width: 899px) {
  html.js .mir::after {
    height: 170px;
    background: linear-gradient(to bottom,
      rgb(var(--тень-фото) / 0.55) 0, rgb(var(--тень-фото) / 0.5) 40px, rgb(var(--тень-фото) / 0.4) 70px,
      rgb(var(--тень-фото) / 0.24) 100px, rgb(var(--тень-фото) / 0.1) 130px, rgb(var(--тень-фото) / 0.03) 152px,
      rgb(var(--тень-фото) / 0) 170px);
  }
}
/* прежняя тень полосы с js не нужна: её работу делает полоса мира. Без js она и так выключена (style.css) */
html.js .polosa::before { display: none; }

/* сумрак при загрузке — только в живом режиме, первые 1,2 с: фото первого экрана «светлеет» */
.mir__sumrak { display: none; }

/* =====================================================================
   ЖИВОЙ РЕЖИМ — всё ниже только под html.zhivoy
   ===================================================================== */
html.zhivoy .mir { position: fixed; inset: 0; width: auto; height: auto; }
/* тихий режим (js есть, движения нет): мир тоже стоит под всеми сценами, а скрипт при смене сцены
   сразу ставит его в состояние этой сцены — каждая сцена со своим фото и часом, без подъёма в небо */
html.js:not(.zhivoy) .mir { position: fixed; inset: 0; width: auto; height: auto; }
html.js .sceny { position: relative; z-index: 1; }

/* сумрак до первого луча: 1,2 с после загрузки */
html.zhivoy .mir__sumrak {
  display: block; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(10, 14, 30, 0.75), rgba(10, 14, 30, 0.45) 60%, rgba(10, 14, 30, 0.6));
  animation: mir-sumrak 1.2s cubic-bezier(.4, 0, .2, 1) 0.1s both;
}
@keyframes mir-sumrak { from { opacity: 1; } to { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  html.zhivoy .mir *, html.zhivoy .mir { animation: none !important; }
  html.zhivoy .mir__sumrak { display: none; }     /* без анимации сумрак остался бы навсегда */
}

/* =====================================================================
   СЦЕНЫ поверх мира (живой режим): прибытие --vkhod + путь --kamera экранов,
   текст держится на экране, пока идёт путь сцены
   ===================================================================== */
html.zhivoy .sceny { position: relative; z-index: 1; }
html.zhivoy .scena {
  --vkhod: 0.8;                  /* переход между сценами (подъём в небо и смена фото) ≈ 0,8 экрана (ТЗ В3-4) */
  --kamera: 1;
  height: calc((var(--vkhod) + 1 + var(--kamera)) * 100svh);
  margin-top: -100svh;
  pointer-events: none;
  display: flow-root;            /* отступ кадра не «проваливается» сквозь сцену (иначе у #kort мир стоит 0,8 экрана) */
}
html.zhivoy #utro { --vkhod: 0; --kamera: 1; margin-top: 0; }
html.zhivoy #kort { --vkhod: 0.8; --kamera: 1; }
html.zhivoy #zaezd  { --vkhod: 0.8; }
html.zhivoy #more   { --vkhod: 0.6; }   /* «проезд» — переход короче (data-pribytie в разметке) */
html.zhivoy #turnir { --vkhod: 0.8; }
html.zhivoy #uzhin  { --vkhod: 0.8; }
html.zhivoy #vamos  { --vkhod: 0.6; }   /* «проезд» */
html.zhivoy .scena__kadr {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  margin-top: calc(var(--vkhod) * 100svh);
  background: none;
}
/* текст входит при --p 0,05–0,15 и уходит при 0,85–1; во время перехода между сценами текста нет */
html.zhivoy .scena__tekst {
  --tekst-vkhod: clamp(0, (var(--p) - 0.05) / 0.1, 1);
  --tekst-ukhod: clamp(0, (1 - var(--p)) / 0.15, 1);
  opacity: min(var(--tekst-vkhod), var(--tekst-ukhod));
  transform: translate3d(0, calc((1 - var(--tekst-vkhod)) * 24px), 0);
}
html.zhivoy #utro .scena__tekst { --tekst-vkhod: 1; }
html.zhivoy .scena--tekushchaya .scena__tekst { pointer-events: auto; }
/* «Изображения иллюстративные» стоит на экране всё время сцен (style.css), не гаснет с уходом 01.
   Подложка текста сцены на широком экране — в style.css (мягкое пятно из угла, без краёв). */

/* =====================================================================
   ШКАЛА-СОЛНЦЕ (ТЗ В3-3). Без js — обычный список ссылок (база).
   1440: купол 460 × 50 по центру полосы, под ним мягкое тёмное пятно для контраста на любом небе;
         номера снаружи дуги — сдвинуты по нормали к ней (солнце идёт по дуге и их не закрывает);
         имя текущей сцены — по центру под горизонтом, 17 точек.
   390: дуга во всю высоту плашки; под куполом — имя текущей сцены, под горизонтом — «02 / 07»;
        метки сцен — точки на самой дуге; солнце — цель 44 × 44, диск 24.
   Положение солнца: пока идёт сцена, солнце стоит у её метки, между сценами — бежит к следующей.
   Для этого --den переводится ломаной в долю дуги (--shkala). Узлы: [--den → доля]
   (0 → .0325) (.1 → .0675) (.15 → .1825) (.25 → .2175) (.3 → .326) (.38 → .354) (.43 → .469) (.55 → .511)
   (.6 → .626) (.68 → .654) (.74 → .779) (.86 → .821) (.9 → .9325) (1 → .9675) — внутри сцены солнце
   проходит ±0,0175 от метки. Если js сам ставит --shkala на nav.indeks — берётся его значение.
   Дуга — путь .indeks__arka в svg 360 × 56 (полуэллипс 164 × 40, горизонт на 50); svg растянут так,
   что полуэллипс становится --rx × --ry, — по нему же js переводит перетаскивание в --den.
   ===================================================================== */
html.js .indeks {
  --W: 460px;                    /* ширина шкалы */
  --dug-y: 88px;                 /* горизонт дуги от верха шкалы */
  --ry: 50px;                    /* высота купола */
  --duga-l: 0px;                 /* где svg дуги внутри шкалы */
  --duga-w: var(--W);
  --rx: calc(var(--duga-w) * 164 / 360);
  /* доля дуги, где стоит солнце: ломаная от --den (узлы — в шапке раздела) */
  --shkala-iz-dna: calc(0.0325
    + 0.035 * clamp(0, var(--den) / 0.1, 1)
    + 0.115 * clamp(0, (var(--den) - 0.1) / 0.05, 1)
    + 0.035 * clamp(0, (var(--den) - 0.15) / 0.1, 1)
    + 0.1085 * clamp(0, (var(--den) - 0.25) / 0.05, 1)
    + 0.028 * clamp(0, (var(--den) - 0.3) / 0.08, 1)
    + 0.115 * clamp(0, (var(--den) - 0.38) / 0.05, 1)
    + 0.042 * clamp(0, (var(--den) - 0.43) / 0.12, 1)
    + 0.115 * clamp(0, (var(--den) - 0.55) / 0.05, 1)
    + 0.028 * clamp(0, (var(--den) - 0.6) / 0.08, 1)
    + 0.125 * clamp(0, (var(--den) - 0.68) / 0.06, 1)
    + 0.042 * clamp(0, (var(--den) - 0.74) / 0.12, 1)
    + 0.1115 * clamp(0, (var(--den) - 0.86) / 0.04, 1)
    + 0.035 * clamp(0, (var(--den) - 0.9) / 0.1, 1));
  --ugol: calc(var(--shkala, var(--shkala-iz-dna)) * 180deg);
  position: fixed; z-index: 61;
  display: block;
  left: 50%; top: 8px;             /* при 4 цель мыши у верхней метки «04» выходила за верх окна на 3 точки */
  width: var(--W); height: 130px;
  margin-left: calc(var(--W) / -2);
  padding: 0; background: none;
  color: var(--фон);
  pointer-events: none;
  /* шкала живёт поверх неба любого часа: днём небо светлое — тень даёт запас контраста */
  text-shadow: 0 1px 2px rgba(10, 20, 15, 0.8), 0 0 10px rgba(10, 20, 15, 0.5);
}
/* Пятна под куполом с 14.10 нет: на светлом небе оно читалось серо-синим кругом. Дугу, номера и имя сцены
   держит ровная верхняя полоса мира (выше, «Тень под верхней полосой») и обводка букв шкалы */
html.js .indeks::before { content: none; }
html.js .indeks__duga {
  display: block; position: absolute;
  left: var(--duga-l); top: calc(var(--dug-y) - var(--ry) * 1.25);
  width: var(--duga-w); height: calc(var(--ry) * 1.4); max-width: none; overflow: visible;
  filter: drop-shadow(0 1px 1.5px rgba(10, 20, 15, 0.7));
}
html.js .indeks__arka { opacity: 1; stroke-width: 3.25; }
html.js .indeks__gorizont { opacity: 0.6; stroke-width: 1.5; }
html.js .indeks__metki { display: none; }          /* на широком экране метки — точки у номеров */
html.js .indeks ol { position: absolute; inset: 0; margin: 0; padding: 0; }
html.js .indeks li { position: static; }
/* --m — доля дуги у метки; --ox/--oy — сдвиг номера наружу по нормали к дуге 460 × 50 на 27 точек */
html.js .indeks li:nth-child(1) { --m: 0.05; --ox: -22.5px; --oy: -14.9px; }
html.js .indeks li:nth-child(2) { --m: 0.2;  --ox: -8.4px;  --oy: -25.7px; }
html.js .indeks li:nth-child(3) { --m: 0.34; --ox: -3.5px;  --oy: -26.8px; }
html.js .indeks li:nth-child(4) { --m: 0.49; --ox: -0.2px;  --oy: -27px; }
html.js .indeks li:nth-child(5) { --m: 0.64; --ox: 3px;     --oy: -26.8px; }
html.js .indeks li:nth-child(6) { --m: 0.8;  --ox: 8.4px;   --oy: -25.7px; }
html.js .indeks li:nth-child(7) { --m: 0.95; --ox: 22.5px;  --oy: -14.9px; }
html.js .indeks__punkt {
  position: static; display: block; min-height: 0; padding: 0;
  color: var(--фон); text-decoration: none;
}
/* номер — снаружи дуги, по нормали от своей метки; вокруг номера — цель для мыши 36 × 36.
   Правила шкалы — только внутри .indeks: те же классы номера и имени стоят в списке листа (.list__sceny) */
html.js .indeks .indeks__nomer {
  position: absolute; pointer-events: auto;
  left: calc(var(--W) / 2 - var(--rx) * cos(var(--m) * 180deg) + var(--ox) - 18px);
  top: calc(var(--dug-y) - var(--ry) * sin(var(--m) * 180deg) + var(--oy) - 18px);
  width: 36px; height: 36px;
  display: grid; place-items: center;
  font-size: 1rem; font-weight: 700; letter-spacing: 0.03em; line-height: 1;
  font-variant-numeric: tabular-nums lining-nums;
  opacity: 1;                    /* номера плотные: на холмах и светлом небе бледные терялись */
}
/* точка метки — на самой дуге */
html.js .indeks .indeks__nomer::after {
  content: ""; position: absolute; width: 8px; height: 8px; border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 1.5px rgba(10, 20, 15, 0.55);
  left: calc(50% - 4px - var(--ox));
  top: calc(50% - 4px - var(--oy));
}
html.js .indeks__punkt[aria-current] .indeks__nomer,
html.js .indeks__punkt:hover .indeks__nomer,
html.js .indeks__punkt:focus-visible .indeks__nomer { opacity: 1; }
html.js .indeks__punkt[aria-current] .indeks__nomer { color: #FFE2A8; }
/* имя сцены — по центру под горизонтом; видно у текущей, при наведении — у наведённой */
html.js .indeks .indeks__imya {
  position: absolute; top: calc(var(--dug-y) + 10px);
  left: calc(var(--W) / 2);
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 1.0625rem; font-weight: 700; letter-spacing: 0.04em; line-height: 1;
  opacity: 0; transition: opacity 0.2s ease;
}
html.js .indeks__punkt[aria-current] .indeks__imya { opacity: 1; }
html.js .indeks:hover .indeks__punkt[aria-current] .indeks__imya,
html.js .indeks:focus-within .indeks__punkt[aria-current] .indeks__imya { opacity: 0; }
html.js .indeks .indeks__punkt:hover .indeks__imya,
html.js .indeks .indeks__punkt:focus-visible .indeks__imya { opacity: 1; }
html.js .indeks__liniya { display: none; }

/* солнце-ползунок: цель 44 × 44, видимый диск 24 */
.solnce { display: none; }
html.js .solnce {
  --disk: 24px;
  display: block; position: absolute; left: 0; top: 0;
  width: 44px; height: 44px; border-radius: 50%;
  pointer-events: auto; cursor: grab;
  touch-action: none;
  transform: translate(
    calc(var(--W) / 2 - var(--rx) * cos(var(--ugol)) - 22px),
    calc(var(--dug-y) - var(--ry) * sin(var(--ugol)) - 22px));
}
html.js .solnce::before {
  content: ""; position: absolute;
  left: calc(22px - var(--disk) / 2); top: calc(22px - var(--disk) / 2);
  width: var(--disk); height: var(--disk); border-radius: 50%;
  background: radial-gradient(circle at 40% 38%, #FFF6DC, #FFD68A 55%, #F4B25E);
  box-shadow: 0 0 0 2px var(--зелёный-глубокий), 0 0 20px 6px rgba(255, 206, 130, 0.7);
}
/* к ночи солнце на шкале становится луной (07 — синий час) */
html.js .solnce::before { opacity: calc(1 - clamp(0, (var(--den) - 0.86) / 0.04, 1)); }
html.js .solnce::after {
  content: ""; position: absolute;
  left: calc(22px - var(--disk) / 2); top: calc(22px - var(--disk) / 2);
  width: var(--disk); height: var(--disk); border-radius: 50%;
  background: radial-gradient(circle at 40% 38%, #FFFFF6, #EDEDE2 60%, #C9CFC8);
  box-shadow: 0 0 0 2px var(--зелёный-глубокий), 0 0 18px 5px rgba(220, 230, 245, 0.55);
  opacity: clamp(0, (var(--den) - 0.86) / 0.04, 1);
}
html.js .solnce:active { cursor: grabbing; }
html.js .solnce:focus-visible { outline: 3px solid var(--мяч); outline-offset: -6px; }

/* телефон: шкала в плашке, слева от кнопки; список — по тапу на дугу (лист — у разработчика) */
@media (max-width: 899px) {
  html.js .indeks {
    /* плашка 76: купол выше (48 вместо 40), подписи крупнее — шкала читается с руки */
    --W: 148px;
    --dug-y: 54px;               /* горизонт — на 22 точки выше низа кнопки: под ним помещается «02 / 07» */
    --ry: 46px;
    --duga-l: 6px;               /* концы дуги не у самого края — солнцу на рассвете есть место */
    --duga-w: calc(var(--W) - 18px);
    left: var(--поле-плашки, 16px); top: auto; margin-left: 0;
    bottom: calc(4px + env(safe-area-inset-bottom));
    height: 80px;
  }
  html.js .indeks::before { display: none; }       /* плашка и так тёмная */
  html.js .indeks__arka { stroke-width: 3; opacity: 1; }
  html.js .indeks__gorizont { opacity: 0.55; stroke-width: 1.25; }
  html.js .indeks__metki { display: inline; opacity: 1; stroke-width: 10; }   /* засечки сцен — заметные точки на дуге */
  /* под куполом — только имя текущей сцены; номера и остальные пункты скрыты */
  html.js .indeks ol { display: block; }
  html.js .indeks li { display: none; }
  html.js .indeks li:has(> [aria-current]) { display: block; }
  html.js .indeks .indeks__nomer { display: none; }
  html.js .indeks__punkt { pointer-events: none; }
  html.js .indeks .indeks__imya,
  html.js .indeks .indeks__punkt[aria-current] .indeks__imya,
  html.js .indeks:hover .indeks__punkt[aria-current] .indeks__imya,
  html.js .indeks:focus-within .indeks__punkt[aria-current] .indeks__imya {
    top: auto; bottom: calc(100% - var(--dug-y) + 6px);
    font-size: 1.0625rem; letter-spacing: 0.02em;
    opacity: 1; transition: none;
  }
  html.js .solnce { --disk: 26px; }
  /* у правого края дуги солнце близко к кнопке заявки — свечение на телефоне короче, не залезает на неё */
  html.js .solnce::before { box-shadow: 0 0 0 2px var(--зелёный-глубокий), 0 0 10px 2px rgba(255, 206, 130, 0.75); }
  html.js .solnce::after { box-shadow: 0 0 0 2px var(--зелёный-глубокий), 0 0 10px 2px rgba(220, 230, 245, 0.6); }
  html.js .indeks__knopka {
    position: relative;
    width: 148px; min-width: 148px; height: 60px; min-height: 60px; padding: 0;
    border: 0; background: none;
    display: block;
  }
  html.js .indeks__knopka svg { display: none; }
  html.js .indeks__knopka > span {           /* «01 / 07» — под линией горизонта, имя сцены — над ней */
    position: absolute; left: 0; right: 0; bottom: 3px;
    font-size: 0.875rem; font-weight: 600; letter-spacing: 0.06em; text-align: center; line-height: 1;
    color: var(--фон); opacity: 0.9;
  }
}