/* ============================================================================
   site/fx/parallax.css — стили хореографии прокрутки (parallax.js).

   Скрытых начальных состояний здесь нет и быть не должно: всё движение —
   сдвиги, которые модуль ставит сам и только на широком экране. Упал модуль
   или не доехал — класса .fx-px нет, и страница стоит ровно как в вёрстке.
   ========================================================================== */

/* Снимок каталога растёт и оседает от НИЗА: еда на кадрах прижата к нижней
   кромке (object-position 50% 100% в pantry.css), и масштаб от центра
   срезал бы как раз её. Верх снимка всё равно гаснет в маске-растушёвке. */
.fx-px-img{ transform-origin:50% 100% }

/* ── герой → карточка ─────────────────────────────────────────────────────
   Приём Ландо: полноэкранный герой под конец сжимается в карточку, и вокруг
   неё проступает полотно страницы. Ведёт прогресс фильма --p (его каждый
   кадр пишет film.js на #film): последние 12 % пути сцена уходит с 1 до
   0.86 и скругляется до 36 px (в экранных около 31 — скругление сжимается
   вместе со сценой). Центр масштаба — середина экрана, поэтому карточка
   отступает от всех четырёх краёв поровну.

   До 0.88 значения нулевые: масштаб 1 и радиус 0 — ни обрезки, ни лишней
   маски на весь фильм. Скругление — border-radius, а не clip-path: у сцены
   уже есть overflow:hidden (film.css), и радиус 0 браузеру ничего не стоит.
   film.js свой transform сцене не ставит (он ведёт только реплики), так что
   масштаб идёт отдельным свойством scale и ни с кем не спорит.

   Растушёвка низа кадра (film.css, ::after на последней десятой пути) была
   нужна, чтобы по экрану не поехала ровная нижняя кромка фотографии. Теперь
   кромка — край карточки со скруглёнными углами, и растушёвка только
   съедала бы её низ: карточка без нижних углов читается обрывком. Её отрезок
   пути (0.9…1) целиком внутри сжатия, поэтому на широком экране гасим её
   совсем; на телефоне карточки нет, и растушёвка работает как раньше. */
/* Число, а не строка, и не наследуется: иначе каждый кадр фильма менял бы
   «clamp(0, (0.4523 − .88)…)» у сцены и пересчитывал стиль всем её
   потомкам (см. film.css, @property --p). */
@property --fx-card{ syntax:'<number>'; inherits:false; initial-value:0 }
@property --fx-deep{ syntax:'<number>'; inherits:false; initial-value:0 }

/* Хвост фильма (--q, film.js): как у Ландо, карточка уходит ещё глубже —
   с 0.86 до 0.34, в маленький кадр посреди экрана, вокруг которого идут
   бегущие строки и пишется автограф (film-sign.js). Первая треть хвоста,
   с плавным разгоном и торможением (smoothstep прямо в calc). */
@media (min-width:992px) and (prefers-reduced-motion:no-preference){
  .fx-px.film-on .film-stage{
    --fx-card:clamp(0, (var(--p, 0) - .88) / .12, 1);
    --fx-deep:clamp(0, var(--q, 0) / .3, 1);
    scale:calc(1 - .14 * var(--fx-card)
      - .52 * var(--fx-deep) * var(--fx-deep) * (3 - 2 * var(--fx-deep)));
    border-radius:calc(36px * var(--fx-card));
  }
  .fx-px.film-on .film-stage{ -webkit-mask-image:none; mask-image:none }
}