/* ============================================================================
   site/fx/arrive.css — въезды с разных сторон (механика — fx/arrive.js).

   Здесь только опоры: точки поворота и перспектива. Сдвиги, повороты и
   масштаб ставит скрипт отдельными свойствами translate/rotate/scale — они
   складываются с transform, которым живут .rv и :hover.
   ========================================================================== */

/* Колёса фургона поверх кадра — крутятся, пока он едет, и гаснут, когда
   встал (под ними те же пиксели кадра, подмены не видно). Над холстом
   «Рентгена», под ценниками. */
.xr-wheel{
  position:absolute; height:auto; aspect-ratio:1;
  translate:-50% -50%; z-index:1; pointer-events:none;
  opacity:0; transition:opacity .18s linear;
}
.xr-wheel.is-on{ opacity:1; will-change:rotate }
.fx-arr .pantry .xr-tags{ z-index:2 }
/* «Клевок» на тормозе — вокруг пятна заднего колеса: нос опускается,
   корма стоит. */
.fx-arr .pantry-van .xr-plate{ transform-origin:74.3% 86% }

/* Карты раздаются из-под нижнего края: точка поворота ниже плитки, и
   разворот читается веером, а не вращением на месте. */
.fx-deal{ transform-origin:50% 135% }

/* Лаймовая плита растёт от верхней кромки — вырастает навстречу, а не
   раздувается из середины. */
.fx-grow{ transform-origin:50% 0% }

/* Пульт ресторана раскрывается, как экран ноутбука: поворот по
   горизонтальной оси вокруг нижней кромки, в перспективе. */
.fx-arr .rx-wrap{ perspective:1800px }
.fx-lift{ transform-origin:50% 100%; will-change:rotate, translate }

/* «Всё сходится.» — по буквам. */
.fx-gl{ display:inline-block; will-change:translate, rotate }

@media (prefers-reduced-motion: reduce){
  .xr-wheel{ display:none }
}