/* Плавные анимации загрузки. Подключается после fix.css; при «уменьшении движения» в системе всё отключено. */
@keyframes vin{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes cin{from{opacity:0;transform:translateY(26px) scale(.94)}to{opacity:1;transform:none}}
@keyframes shm{from{background-position:150% 0}to{background-position:-50% 0}}

/* экран появляется только при переходе на другой экран, а не при каждом нажатии */
@keyframes vfade{from{opacity:0}to{opacity:1}}
/* сам экран только проявляется (сдвиг экрана целиком сбивал закреплённые снизу кнопки), сдвигается содержимое */
.view.enter{animation:vfade .35s ease both}
.view.enter>*:not(.foot):not(.pd-bar):not(.summ):not(.chat-bar):not(.dock):not(.fab):not(.ov){animation:vin .5s cubic-bezier(.22,.7,.2,1) both}

/* карточки товаров проявляются по очереди */
.view.enter .grid>.pcard,.view.enter .rail>.pcard{animation:cin .55s cubic-bezier(.22,.7,.2,1) both}
.view.enter .grid>.pcard:nth-child(2),.view.enter .rail>.pcard:nth-child(2){animation-delay:.07s}
.view.enter .grid>.pcard:nth-child(3),.view.enter .rail>.pcard:nth-child(3){animation-delay:.14s}
.view.enter .grid>.pcard:nth-child(4),.view.enter .rail>.pcard:nth-child(4){animation-delay:.21s}
.view.enter .grid>.pcard:nth-child(5),.view.enter .rail>.pcard:nth-child(5){animation-delay:.28s}
.view.enter .grid>.pcard:nth-child(6),.view.enter .rail>.pcard:nth-child(6){animation-delay:.35s}
.view.enter .grid>.pcard:nth-child(n+7),.view.enter .rail>.pcard:nth-child(n+7){animation-delay:.42s}

/* фото: пока грузится — тихая подложка, потом плавно проявляется */
img.fd{opacity:0;transition:opacity .4s ease}
img.fd.in{opacity:1}
.ld{position:relative}
.ld::before{content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none;background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.07) 50%,transparent 80%);background-size:250% 100%;animation:shm 1.5s linear infinite}

/* отклик на нажатие */
.pcard .pin,.prow,.ord,.ord-card,.ocard,.row,.opt,button.cat{transition:transform .18s cubic-bezier(.22,.7,.2,1)}
.pcard .pin:active,.prow:active,.ord:active,.ord-card:active,.ocard:active,.row:active,.opt:active,button.cat:active{transform:scale(.95)}
.pcard .pin:has(.pb:active),.prow:has(.pb:active){transform:none}
.pb.pop{animation:bump .32s ease}

@media (prefers-reduced-motion:reduce){
  .view.enter,.view.enter>*,.view.enter .grid>.pcard,.view.enter .rail>.pcard{animation:none!important}
  img.fd{opacity:1;transition:none}.ld::before{animation:none}
}

/* экран загрузки */
@keyframes sp-rot{to{transform:rotate(360deg)}}
@keyframes sp-dash{0%{stroke-dasharray:14 112}50%{stroke-dasharray:70 56}100%{stroke-dasharray:14 112}}
@keyframes sp-up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes sp-fail{to{opacity:0;visibility:hidden}}
.splash{position:fixed;inset:0;z-index:999;background:var(--bg,#151619);display:flex;align-items:center;justify-content:center;transition:opacity .5s ease,visibility .5s;animation:sp-fail .4s ease 12s forwards}
.splash.off{opacity:0;visibility:hidden;pointer-events:none}
.sp-in{display:flex;flex-direction:column;align-items:center;gap:18px;animation:sp-up .6s cubic-bezier(.22,.7,.2,1) both}
.sp-ring{width:54px;height:54px;animation:sp-rot 1.3s linear infinite}
.sp-ring svg{width:100%;height:100%;display:block;transform:rotate(-90deg)}
.sp-ring circle{fill:none;stroke-width:2.5;stroke-linecap:round}
.sp-ring .t{stroke:rgba(255,255,255,.08)}
.sp-ring .a{stroke:#F3F4F6;stroke-dasharray:14 112;animation:sp-dash 1.8s ease-in-out infinite}
.sp-in b{font:800 15px var(--head,inherit);letter-spacing:.28em;color:var(--ink,#F3F4F6);padding-left:.28em}
.sp-in span{margin-top:-8px;font-size:12px;color:var(--mut,#8A8F98);letter-spacing:.06em}
@media (prefers-reduced-motion:reduce){.sp-ring,.sp-ring .a{animation:none}.sp-ring .a{stroke-dasharray:60 66}.splash{transition:none}}