/* app-motion.css — спокойные анимации приложения жителя: вход (login.html) и главная (index.html).
 * Стиль сайта (скилл smart-motion-style), но мягче — приложением пользуются каждый день:
 *  - только transform / opacity, без сдвигов вёрстки;
 *  - цвета не трогаем: у каждого клиента свой брендбук (brand.css);
 *  - «уменьшить движение» в телефоне — всё выключено (здесь и общим правилом в app-ios.css);
 *  - анимации привязаны к открытию раздела, а не к данным: обновление списков раз в 15 с их не повторяет.
 */
:root{
  --am-out:cubic-bezier(.33,1,.68,1);
  --am-spring:cubic-bezier(.34,1.3,.64,1);
}
@supports (transition-timing-function: linear(0, 1)){
  :root{--am-spring:linear(0, .023, .081, .163, .258, .359, .46, .556, .644, .724, .793, .852, .901, .941, .972, .996, 1.013, 1.025, 1.033, 1.037, 1.038, 1.038, 1.036, 1.033, 1.029, 1.025, 1.021, 1.017, 1.014, 1.011, 1.008, 1.006, 1.004, 1.002, 1.001, 1)}
}

@media (prefers-reduced-motion: no-preference){
  @keyframes am-up{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}}
  @keyframes am-rise{from{opacity:0;transform:translate3d(0,22px,0) scale(.985)}to{opacity:1;transform:none}}
  @keyframes am-pop{0%{opacity:0;transform:scale(.82)}100%{opacity:1;transform:none}}
  @keyframes am-fade{from{opacity:0}to{opacity:1}}
  @keyframes am-tab{0%{transform:scale(.8)}100%{transform:none}}

  /* ---- раздел приложения: блоки въезжают каскадом при каждом открытии раздела ---- */
  .view:not([hidden]) > *{animation:am-up .55s var(--am-out) both}
  .view:not([hidden]) > :nth-child(2){animation-delay:45ms}
  .view:not([hidden]) > :nth-child(3){animation-delay:90ms}
  .view:not([hidden]) > :nth-child(4){animation-delay:135ms}
  .view:not([hidden]) > :nth-child(5){animation-delay:180ms}
  .view:not([hidden]) > :nth-child(6){animation-delay:225ms}
  .view:not([hidden]) > :nth-child(7){animation-delay:270ms}
  .view:not([hidden]) > :nth-child(n+8){animation-delay:310ms}

  /* плитки услуг на главной — следом, по одной */
  #svcGrid > .svc{animation:am-up .5s var(--am-spring) both}
  #svcGrid > .svc:nth-child(1){animation-delay:200ms}
  #svcGrid > .svc:nth-child(2){animation-delay:235ms}
  #svcGrid > .svc:nth-child(3){animation-delay:270ms}
  #svcGrid > .svc:nth-child(4){animation-delay:305ms}
  #svcGrid > .svc:nth-child(5){animation-delay:340ms}
  #svcGrid > .svc:nth-child(6){animation-delay:375ms}
  #svcGrid > .svc:nth-child(n+7){animation-delay:410ms}

  /* нижнее меню: иконка выбранного раздела мягко «подпрыгивает» */
  .nav .it.on .ico{animation:am-tab .5s var(--am-spring) both}

  /* ---- нажатия: пружина вместо резкого отклика ---- */
  .svc{transition:transform .45s var(--am-spring), box-shadow .2s ease}
  .svc:active{transform:scale(.96)}
  #cardPayments, #qrCard, .more-item{transition:transform .45s var(--am-spring)}
  #qrCard:active, .more-item:active{transform:scale(.985)}

  /* ---- вход: карточка выезжает, логотип появляется, поля — каскадом ---- */
  .langbar{animation:am-fade .6s var(--am-out) both}
  .phone > .brand{animation:am-rise .7s var(--am-out) both}
  .phone > .brand .logo{animation:am-pop .7s var(--am-spring) .12s both}
  #loginForm > *{animation:am-up .55s var(--am-out) both}
  #loginForm > :nth-child(1){animation-delay:.16s}
  #loginForm > :nth-child(2){animation-delay:.22s}
  #loginForm > :nth-child(3){animation-delay:.28s}
  #loginForm > :nth-child(n+4){animation-delay:.34s}
  #platformPromo, #conciergeContact{animation:am-up .55s var(--am-out) .42s both}
  #loginForm button, .phone .linkbtn{transition:transform .45s var(--am-spring)}
  #loginForm button:active, .phone .linkbtn:active{transform:scale(.97)}
}