/* ═══ PROSTIR — шар глибини й тривимірності ═════════════════════════════════
 * Надбудова над `yadro.css` (тіні `--tin-1/2/3`, `.sklo`, `.rebro`) і `rukh.css`
 * (профіль `--ampl`, криві, тривалості).
 *
 * ТВЕРДА МЕЖА ЦЬОГО ФАЙЛА — обʼєкт проти кількості:
 *   3D для ОБʼЄКТІВ (станція, майданчик, картка, панель) — законне;
 *   3D для КІЛЬКОСТЕЙ (стовпчик, частка, воронка) — заборонене. Перспектива
 *   змінює видимий розмір за глибиною: дальній стовпчик коротший за ближній
 *   тієї самої висоти, а людина зчитує саме довжину. Число стає неправдою.
 *   Тут НЕМАЄ жодного класу для чартів — і не зʼявиться.
 *
 * Чотири рівні глибини за ціною (`prostir-rukh/references/tryvymirnist.md`):
 *   1 тінь+перекриття (0 КБ) · 2 псевдо-3D CSS (0 КБ) ·
 *   3 SVG-ізометрія (0 КБ, друкується) · 4 WebGL (500 КБ+, окреме «так»).
 * Тут — рівні 1 і 2. Рівень 3 будує `prostir-rukh/scripts/stsena_izo.py`.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── СЦЕНА ─────────────────────────────────────────────────────────────────
   `perspective` живе на КОНТЕЙНЕРІ, не на елементі. Інакше кожна картка
   отримує власну точку сходу, і ряд виглядає розсипаним — це найчастіша
   помилка псевдо-3D у продуктах. */
.scena{perspective:1200px;perspective-origin:50% 40%}
.scena-blyzka{perspective:720px}     /* сильніший ефект: одинокий обʼєкт */
.scena>*{transform-style:preserve-3d}

/* ── НАХИЛ ЗА ВКАЗІВНИКОМ ──────────────────────────────────────────────────
   Кути ставить `rukh.js` у `--nahyl-x/--nahyl-y`; стеля — 6°. Понад 8°
   картка «пливе», а текст на ній втрачає різкість (субпіксельне згладжування
   вимикається в 3D-контексті).
   Стеля застосована ТУТ, у CSS: якби її тримав лише JS, будь-який виклик з
   іншим числом обійшов би обмеження мовчки. */
/* Пише СВІЙ доданок `--t-nahyl`, а не `transform` напряму: складання живе в
   `rukh.css`. Інакше нахил і підйом б'ються за одну властивість, і виграє
   той, у кого важчий селектор (див. коментар «СКЛАДАННЯ ТРАНСФОРМАЦІЙ»). */
.nahyl{
  --nahyl-max:6deg;
  --t-nahyl:rotateX(clamp(calc(0deg - var(--nahyl-max)),
                          calc(var(--nahyl-x,0deg) * var(--ampl)),
                          var(--nahyl-max)))
            rotateY(clamp(calc(0deg - var(--nahyl-max)),
                          calc(var(--nahyl-y,0deg) * var(--ampl)),
                          var(--nahyl-max)));
  transition:transform var(--d-blyzko) var(--e-zmina)}
/* Поки вказівник рухається — переходу немає, інакше картка «наздоганяє» руку
   із запізненням і здається липкою. Перехід потрібен лише на поверненні. */
.nahyl[data-vede]{transition:none}
:root[data-ruh=min] .nahyl{--t-nahyl:}
@media (prefers-reduced-motion:reduce){.nahyl{--t-nahyl:;transition:none}}

/* ── ШАРИ ВСЕРЕДИНІ КАРТКИ ────────────────────────────────────────────────
   Підняти заголовок над тлом на кілька пікселів по Z — і картка перестає бути
   наліпкою. Дорого це не коштує: шар уже створено нахилом. */
.shar-1{transform:translateZ(calc(6px * var(--ampl)))}
.shar-2{transform:translateZ(calc(14px * var(--ampl)))}
.shar-3{transform:translateZ(calc(24px * var(--ampl)))}

/* ── ОБʼЄКТ У РУЦІ ─────────────────────────────────────────────────────────
   Перетягувана картка мусить виглядати ВЗЯТОЮ: підйом, легкий нахил, третя
   тінь. Без цього канбан читається як список, що смикається. */
.v-poloti{
  --t-ruka:translate3d(0,calc(-4px * var(--ampl)),0)
           rotate(calc(1.2deg * var(--ampl))) scale(1.02);
  box-shadow:var(--tin-3);cursor:grabbing;
  transition:transform var(--d-mikro) var(--e-vhid)}
.misce-pryzemlennya{outline:2px dashed var(--akcent);outline-offset:-4px;
  background:var(--akcent-tlo);border-radius:var(--r-sm,6px)}

/* ── ПАРАЛАКС У МЕЖАХ КОНТЕЙНЕРА ───────────────────────────────────────────
   Тільки в межах свого контейнера. Паралакс цілої сторінки конкурує з
   прокруткою й забирає в людини керування — у робочому продукті це шкода,
   а не ефект. Зсув рахує `rukh.js` з позиції контейнера. */
.paralaks{transform:translate3d(0,calc(var(--paralaks,0px) * var(--ampl)),0);
  will-change:transform}
/* `will-change` знімається, щойно контейнер поза екраном: кожен елемент із ним
   тримає власний шар у памʼяті GPU, і сотня таких гірша за жодного. */
.paralaks[data-poza]{will-change:auto}

/* ── ГЛИБИНА БЕЗ 3D ────────────────────────────────────────────────────────
   Рівень 1: працює скрізь, друкується, нічого не коштує. Це типовий вибір;
   псевдо-3D — виняток для акцентних місць. */
.hlyb-0{box-shadow:none;background:var(--tlo)}
.hlyb-1{box-shadow:var(--tin-1);background:var(--poverhnya,var(--tlo))}
.hlyb-2{box-shadow:var(--tin-2);background:var(--poverhnya,var(--tlo))}
.hlyb-3{box-shadow:var(--tin-3);background:var(--poverhnya,var(--tlo))}

/* ── ІЗОМЕТРІЯ (рівень 3) ──────────────────────────────────────────────────
   Обгортка для SVG-схем із `stsena_izo.py`. Паралельна проєкція: розміри
   вздовж осей лишаються вимірними, тому за схемою можна рахувати — саме тому
   для інженерного показу береться ізометрія, а не перспектива.
   Друк: жодних тіней і фільтрів, інакше растеризується вся сторінка. */
.izo{display:block;max-inline-size:100%;height:auto}
.izo text{font-family:var(--f-tilo);font-size:11px;fill:var(--tilo)}
.izo .izo-pidpys{fill:var(--prygl);font-size:10px}
@media print{.izo{filter:none;box-shadow:none}}