/* Анимации интерфейса: пружинные переходы, наведение, раскрытие, подсказки, встряска ошибок.
   Приёмы взяты из Animate.css, Hover.css, CSShake и Popmotion и написаны заново без внешних библиотек
   (сайту разрешены только свои скрипты). Всё включается только если пользователь не просил «уменьшить движение». */
@media (prefers-reduced-motion:no-preference){
:root{--spring:linear(0,.009,.035 2.1%,.141,.281 6.7%,.723 12.9%,.938 16.7%,1.017,1.077,1.121,1.149 24.3%,1.159,1.163,1.161,1.154 29.9%,1.129 32.8%,1.051 39.6%,1.017 43.1%,.991,.977 51%,.974 53.8%,.975 57.1%,.997 69.8%,1.003 76.9%,1)}

/* ----- ключевые кадры ----- */
@keyframes mFadeUp{from{opacity:0;transform:translate3d(0,22px,0)}to{opacity:1;transform:none}}
@keyframes mFadeDown{from{opacity:0;transform:translate3d(0,-10px,0)}to{opacity:1;transform:none}}
@keyframes mPop{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}}
@keyframes mShake{10%,90%{transform:translate3d(-1px,0,0)}20%,80%{transform:translate3d(2px,0,0)}30%,50%,70%{transform:translate3d(-5px,0,0)}40%,60%{transform:translate3d(5px,0,0)}}
@keyframes mDot{0%,100%{box-shadow:0 0 0 0 rgba(154,116,20,.5)}60%{box-shadow:0 0 0 7px rgba(154,116,20,0)}}
@keyframes mSheet{from{transform:translate3d(0,100%,0)}to{transform:none}}
@keyframes mBackdrop{from{opacity:0}to{opacity:1}}
@keyframes mWobble{0%,100%{transform:none}25%{transform:rotate(-8deg) scale(1.08)}60%{transform:rotate(6deg) scale(1.08)}}
@keyframes mPing{0%{box-shadow:0 0 0 0 rgba(239,192,80,.6)}100%{box-shadow:0 0 0 14px rgba(239,192,80,0)}}

/* ----- кнопки: нажатие с пружиной, заливка у контурных ----- */
.btn{transition:transform .45s var(--spring),box-shadow .25s var(--ease),background-color .2s ease,color .2s ease}
.btn:active{transform:scale(.96)}
.btn-line,.btn-call{background:linear-gradient(var(--mist),var(--mist)) no-repeat 0 100%/100% 0;transition:background-size .35s var(--ease),transform .45s var(--spring),box-shadow .25s var(--ease)}
.btn-line:hover,.btn-call:hover{background-color:transparent;background-size:100% 100%}
.btn .ico.arr,.btn-main .arr{transition:transform .35s var(--spring)}
.btn:hover .arr{transform:translateX(5px)}

/* ----- ссылки: подчёркивание растёт от центра ----- */
.menu a{position:relative;border-bottom-color:transparent!important}
.menu a::after{content:"";position:absolute;left:50%;right:50%;bottom:3px;height:1.5px;background:var(--brand);transition:left .3s var(--ease),right .3s var(--ease)}
.menu a:hover::after,.menu a[aria-current=page]::after{left:0;right:0}
.c-nav a{position:relative;border-bottom-color:transparent!important}
.c-nav a::after{content:"";position:absolute;left:50%;right:50%;bottom:3px;height:1.5px;background:var(--brand);transition:left .3s var(--ease),right .3s var(--ease)}
.c-nav a:hover::after,.c-nav a[aria-current=page]::after{left:0;right:0}
footer li a{display:inline-block;transition:transform .3s var(--ease),color .2s ease,border-color .2s ease}
footer li a:hover{transform:translateX(5px)}
.logo:hover .mk img{animation:mWobble .8s var(--ease)}
.tel:hover i{animation:mPing .9s ease-out}
.burger svg{transition:transform .35s var(--spring)}
.burger[aria-expanded=true] svg{transform:rotate(90deg)}

/* ----- карточки и фото ----- */
.card,.c-order{transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.card:hover{transform:translateY(-3px);box-shadow:var(--sh-card)}
.uk-pic img,.rc .im img{transition:transform .8s var(--ease)}
.uk-pic:hover img{transform:scale(1.025)}
.c-photos a img{transition:transform .5s var(--ease)}
.c-photos a:hover img{transform:scale(1.07)}
.proof li .ico,.pl li>i,.keep li i{transition:transform .4s var(--spring)}
.keep li:hover i{transform:scale(1.12) rotate(-6deg)}

/* ----- вопросы: плавное раскрытие, плюс превращается в крестик ----- */
.faq details{interpolate-size:allow-keywords}
.faq details::details-content{height:0;overflow:clip;transition:height .4s var(--ease),content-visibility .4s allow-discrete}
.faq details[open]::details-content{height:auto}
.faq summary i{transition:transform .4s var(--spring),background-color .25s ease,color .25s ease}
.faq details[open] summary i{transform:rotate(45deg)}

/* ----- окно заявки: пружинное появление, на телефоне выезжает снизу ----- */
dialog[open]{animation:mPop .45s var(--spring) both}
dialog[open]::backdrop{animation:mBackdrop .3s ease both}
@media (max-width:640px){dialog.c-dialog-order[open]{animation:mSheet .5s var(--ease) both}}

/* ----- формы: подсветка подписи, встряска ошибки (как CSShake) ----- */
.c-field label{transition:color .25s ease}
.c-field:focus-within label{color:var(--brand)}
.c-field input,.c-field textarea,.c-field select{transition:border-color .25s ease,box-shadow .25s ease,background-color .25s ease}
.c-field [aria-invalid=true]{animation:mShake .55s cubic-bezier(.36,.07,.19,.97) both}
.c-err:not([hidden]){animation:mFadeDown .35s var(--ease) both}
.c-msg:not([hidden]){animation:mFadeDown .4s var(--ease) both}
.c-check input{transition:transform .35s var(--spring)}
.c-check input:checked{transform:scale(1.15)}

/* ----- статусы и кабинет ----- */
.st[data-s="1"]::before{animation:mDot 1.9s ease-out infinite}
.c-card{animation:mFadeUp .6s var(--ease) both}
.c-banner{animation:mFadeDown .5s var(--ease) both}
.c-order{animation:mFadeUp .5s var(--ease) backwards}
.c-order:nth-child(1){animation-delay:.04s}.c-order:nth-child(2){animation-delay:.1s}.c-order:nth-child(3){animation-delay:.16s}.c-order:nth-child(4){animation-delay:.22s}.c-order:nth-child(5){animation-delay:.28s}.c-order:nth-child(6){animation-delay:.34s}.c-order:nth-child(n+7){animation-delay:.4s}
.c-steps li{animation:mFadeUp .5s var(--ease) both}
.c-steps li:nth-child(2){animation-delay:.1s}.c-steps li:nth-child(3){animation-delay:.2s}.c-steps li:nth-child(4){animation-delay:.3s}
.c-bubble{animation:mPop .4s var(--spring) both}
.c-photos a{animation:mPop .45s var(--spring) both}
.c-photos a:nth-child(2){animation-delay:.06s}.c-photos a:nth-child(3){animation-delay:.12s}.c-photos a:nth-child(4){animation-delay:.18s}
.c-chip{transition:transform .35s var(--spring),background-color .2s ease,color .2s ease}
.c-chip:active{transform:scale(.94)}
}

@media (prefers-reduced-motion:no-preference){
@keyframes mSlideX{from{opacity:0;transform:translate3d(-26px,0,0)}to{opacity:1;transform:none}}
@keyframes mIcon{from{opacity:0;transform:scale(.35) rotate(-24deg)}to{opacity:1;transform:none}}
@keyframes mBob{from{translate:0 0}to{translate:0 -10px}}
@keyframes mTrack{from{opacity:0;letter-spacing:.38em}to{opacity:1;letter-spacing:.04em}}
@keyframes mShimmer{from{background-position:130% 0,0 0}to{background-position:-30% 0,0 0}}
@keyframes mSpin{to{transform:rotate(360deg)}}
@keyframes mBump{0%{transform:scale(1.28)}100%{transform:none}}
@keyframes mGlow{0%,100%{box-shadow:var(--sh-soft)}50%{box-shadow:0 0 0 7px rgba(239,192,80,.28),var(--sh-soft)}}

/* первый экран: карточка парит, бейдж переливается, предупреждение мерцает */
.hero .stage{animation:mBob 7s ease-in-out infinite alternate}
.hero h1 .city{background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.65) 50%,transparent 65%) no-repeat 130% 0/260% 100%,var(--sand);animation:mShimmer 4.5s ease-in-out infinite}
.alarm{animation:mGlow 2.8s ease-in-out infinite}

/* подписи разделов «набираются» */
.slide.on .kick{animation:mTrack 1.1s var(--ease) backwards}

/* услуги: строки заезжают по очереди, значки «выскакивают» */
.slide.on .pl li{animation:mSlideX .65s var(--ease) backwards}
.slide.on .pl li>i{animation:mIcon .7s var(--spring) backwards}
.slide.on .pl li:nth-child(1),.slide.on .pl li:nth-child(1)>i{animation-delay:.45s}
.slide.on .pl li:nth-child(2),.slide.on .pl li:nth-child(2)>i{animation-delay:.58s}
.slide.on .pl li:nth-child(3),.slide.on .pl li:nth-child(3)>i{animation-delay:.71s}
.slide.on .pl li:nth-child(4),.slide.on .pl li:nth-child(4)>i{animation-delay:.84s}
.pl-h .tg{background-image:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.7) 50%,transparent 65%);background-repeat:no-repeat;background-size:260% 100%;background-position:130% 0;animation:mShimmer 5s ease-in-out infinite}

/* после работы: фото-карточка парит */
.rc{animation:mBob 9s ease-in-out infinite alternate}

/* управляющие компании: строки списка и галочки */
.slide.on .uk-t li{animation:mSlideX .6s var(--ease) backwards}
.slide.on .uk-t li:nth-child(1){animation-delay:.6s}.slide.on .uk-t li:nth-child(2){animation-delay:.75s}.slide.on .uk-t li:nth-child(3){animation-delay:.9s}
.slide.on .ticks li .ico{animation:mIcon .6s var(--spring) backwards}
.slide.on .ticks li:nth-child(1) .ico{animation-delay:.4s}.slide.on .ticks li:nth-child(2) .ico{animation-delay:.55s}.slide.on .ticks li:nth-child(3) .ico{animation-delay:.7s}

/* доверие и «как подать заявку»: значки и номера */
.slide.on .proof li .ico{animation:mIcon .8s var(--spring) backwards}
.slide.on .proof li:nth-child(1) .ico{animation-delay:.45s}.slide.on .proof li:nth-child(2) .ico{animation-delay:.6s}.slide.on .proof li:nth-child(3) .ico{animation-delay:.75s}
.slide.on .how li .ico{animation:mIcon .8s var(--spring) backwards}
.slide.on .how li:nth-child(1) .ico{animation-delay:.45s}.slide.on .how li:nth-child(2) .ico{animation-delay:.6s}.slide.on .how li:nth-child(3) .ico{animation-delay:.75s}
.slide.on .how li .no{animation:mTrack 1s var(--ease) backwards}

/* «как идёт заявка»: цифра подпрыгивает, линии шагов заполняются, активный узел пульсирует */
.story-flow .rail li::after{background:linear-gradient(var(--brand),var(--brand)) 0 0/100% 0 no-repeat,var(--line);transition:background-size .9s var(--ease)}
.story-flow .rail li:has(+ li:not(.dim))::after{background-size:100% 100%}
.tk li.on .nd{animation:mPing 1.9s ease-out infinite}

/* финал */
div.fin::before{animation:mSpin 90s linear infinite}
div.fin .btn-main{animation:mPing 2.8s ease-out infinite}
footer .logo .mk{transition:transform .5s var(--spring)}
footer .logo:hover .mk{transform:rotate(-8deg) scale(1.1)}
}

/* карточка кабинета УК: статусы сменяются сами (js/scroll-fx.js), у камеры лёгкое движение */
@media (prefers-reduced-motion:no-preference){
  .cab .st.pop{animation:cabPop .45s var(--spring,ease)}
  @keyframes cabPop{0%{transform:scale(.88);opacity:.5}100%{transform:none;opacity:1}}
  .cab-ft .ico{animation:wiggle 5s ease-in-out infinite}
}