/* Четыре продукта: до появления карточки собраны стопкой в глубине и чуть повёрнуты к центру;
   когда блок входит на экран на две трети, разъезжаются на свои места одна за другой —
   на полторы ширины карточки, 1,1 с, шаг 90 мс. Телефон — без глубины, всплывают по очереди.
   Без сценария (класса pending нет) карточки просто стоят на местах. В иврите сетка зеркальна, и сдвиг
   с поворотом зеркальны вместе с ней (--hr-dir), чтобы стопка разъезжалась из середины, а не с краёв. */
.products{perspective:1400px}
.product-grid.pending .product{opacity:0;transform:translate3d(calc(var(--k,0) * 100% * var(--hr-dir,1)),20px,var(--z,0px)) rotateY(calc(var(--ry,0deg) * var(--hr-dir,1)))}
.product-grid.in .product{opacity:1;transform:none;transition:transform 1100ms var(--story-ease-enter),opacity 700ms ease,background .2s ease;transition-delay:var(--d,0ms),var(--d,0ms),0ms}
.product:nth-child(1){--k:1.5;--z:-40px;--ry:6deg;--d:0ms}
.product:nth-child(2){--k:.5;--z:-110px;--ry:2deg;--d:90ms}
.product:nth-child(3){--k:-.5;--z:-180px;--ry:-2deg;--d:180ms}
.product:nth-child(4){--k:-1.5;--z:-250px;--ry:-6deg;--d:270ms}
@media(hover:hover){.product-grid.in .product:hover{transform:translateY(-5px);transition-delay:0ms}}
@media(max-width:760px){.product-grid.pending .product{transform:translate3d(0,14px,0)}}