/* Урок Просто — дополнения кода к лендингу `/` (x-land.css, techkarta-back#257): то, чего нет на макете
   (движение сверх макета, знак сайта компонентом, подсветка раздела в шапке). Файлы up-*.css не правятся.
   Всё движение — transform / translate / opacity; общий выключатель prefers-reduced-motion — в up-kit.css,
   а признак data-anim скрипт при «уменьшить движение» не ставит вовсе. */

/* знак сайта — компонент BrandMark (рисунок на 100% контейнера): размеры знака с макета */
.up-x-land-mark { display: inline-grid; flex: 0 0 auto; width: 32px; height: 32px; }
.up-land-final-owl svg { width: 64px; height: 64px; }

/* раздел, который сейчас на экране, — в шапке (подсветку ставит скрипт: aria-current) */
.up-land-nav-a[aria-current] { color: var(--ink); background: var(--surface-2); }

/* ---------- 1. появление блоков при прокрутке ----------
   Скрипт ставит data-anim на <main>, когда JS есть и движение разрешено; до этого и без JS всё видно. Блок
   [data-reveal] ждёт под своим местом (место в вёрстке занято — сдвигов нет) и поднимается один раз, когда доехал до
   экрана: data-shown="in". Через секунду — "done": блок возвращает свои переходы (наведение карточек). --d — номер
   в лесенке соседей. */
.up-land-main[data-anim] [data-reveal]:not([data-shown]) { opacity: 0; transform: translateY(22px); }
.up-land-main[data-anim] [data-reveal][data-shown="in"] { transition: opacity .5s var(--ease-out), transform .6s var(--ease-out);
  transition-delay: calc(var(--d, 0) * 70ms); }

/* полосы «Экономии времени» вырастают слева, когда карточка появилась: масштаб, ширина полосы не трогается */
.up-land-main[data-anim] .up-land-chart .up-land-bar { transform-origin: 0 50%; }
.up-land-main[data-anim] .up-land-chart:not([data-shown]) .up-land-bar { transform: scaleX(0); }
.up-land-main[data-anim] .up-land-chart[data-shown="in"] .up-land-bar { transition: transform .9s var(--spring-soft, var(--ease-out)) .25s, width .6s var(--spring-soft, var(--ease-out)); }
.up-land-main[data-anim] .up-land-chart[data-shown="in"] .up-land-bar-row[data-kind="with"] .up-land-bar { transition-delay: .4s, 0s; }

/* ---------- 2. смена значения по переключателю (период «Экономии времени», «Месяц / Год» у тарифов) ----------
   Новая строка проявляется на месте прежней; класс ставится только после первого переключения. */
.up-x-land-swap { animation: up-x-land-swap .32s var(--ease-out) both; }
@keyframes up-x-land-swap { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- 3. параллакс листа в карусели ----------
   --px, --py (от -1 до 1) ставит скрипт по курсору над первым экраном, только для мыши. Сдвиг — свойством translate:
   transform листа (наклон) и анимации появления плашек его не перебивают. Лист, плашка и «… готова» идут на разную
   глубину — лист едва, плашки чуть заметнее. */
.up-land-demo { --px: 0; --py: 0; }
.up-land-slide .up-lp, .up-land-slide .up-land-float, .up-land-slide .up-land-toast { transition: translate .7s var(--ease-out); }
.up-land-slide[data-pos="on"] .up-lp { translate: calc(var(--px) * -6px) calc(var(--py) * -5px); }
.up-land-slide[data-pos="on"] .up-land-float { translate: calc(var(--px) * 10px) calc(var(--py) * 8px); }
.up-land-slide[data-pos="on"] .up-land-toast { translate: calc(var(--px) * 14px) calc(var(--py) * 10px); }

/* ---------- 4. мелочи наведения ----------
   плитки «Что внутри» и шаги не кликабельные — без подъёма; стрелка у «Нормативной базы» — как у up-link кита */
.up-land-norm:hover svg { transform: translateX(3px); }

/* ---------- 5. палец: цели нажатия не меньше 44 px ----------
   На макете стрелки и пауза карусели — 36 px (32 px на самых узких), точки — 32 px в высоту: так принято владельцем
   (ряд помещается в 288 px). Вид не меняется — невидимая область нажатия добирает высоту до 44 px. */
@media (pointer: coarse) {
  .up-land-ctl, .up-land-dot { position: relative; }
  .up-land-ctl::after, .up-land-dot::after { content: ''; position: absolute; inset: -6px 0; }
}
/* плашки листа — украшение (лист скрыт от диктора): не перехватывают нажатия по стрелкам под ними */
.up-land-float, .up-land-toast { pointer-events: none; }
/* Плитка листа на лендинге — блок (`display: block` в up-land.css), по центру её держит `justify-items` блочного
   контейнера: Chromium и WebKit это умеют, Firefox — нет, лист прижимался к левому краю плитки. Поля auto центрируют
   коробку листа одинаково во всех движках. */
.up-land-fmt .up-sh .up-sh-box, .up-land-frag.is-dl .up-sh .up-sh-box { margin-inline: auto; }