/* Animated icons (app/icons.php). Artwork from the old dvaris.ru icons.
   Colors come from the context: --ai-a main, --ai-b accent, --ai-knock = background behind the icon.
   On the public site the motion runs only while the icon is on screen (.ai-on, set by site.js). */
.ai{display:block;width:100%;height:100%;overflow:visible}
.ai--carside{overflow:hidden}
.ai-a{fill:var(--ai-a,#121214)}
.ai-b{fill:var(--ai-b,#EC2128)}
.ai-knock{fill:var(--ai-knock,#FDECEC)}
.ai-shadow{fill:var(--ai-a,#121214);opacity:.14}
.ai-ripple{fill:none;stroke:var(--ai-b,#EC2128);stroke-width:1.4;opacity:0}
.ai-spokes{fill:none;stroke:var(--ai-b,#EC2128);stroke-width:2.4;stroke-linecap:round}
.ai-road path{fill:none;stroke:var(--ai-a,#121214);stroke-width:2.4;stroke-linecap:round;opacity:.28}
.ai-faint{opacity:.3}
.ai-front>*{stroke:var(--ai-knock,#FDECEC);stroke-width:3;paint-order:stroke}

@keyframes ai-spin{to{transform:rotate(360deg)}}
@keyframes ai-spin-r{to{transform:rotate(-360deg)}}
@keyframes ai-idle{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.3px)}}
@keyframes ai-shadow{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.88)}}
@keyframes ai-hop{0%,50%,100%{transform:translateY(0)}68%{transform:translateY(-6px)}84%{transform:translateY(0)}90%{transform:translateY(-1.2px)}}
@keyframes ai-hop-shadow{0%,50%,100%{transform:scaleX(1);opacity:.14}68%{transform:scaleX(.7);opacity:.06}84%{transform:scaleX(1);opacity:.14}}
@keyframes ai-drop{0%{transform:translateY(0) scale(0)}28%,52%{transform:translateY(0) scale(1)}74%{transform:translateY(13px) scale(.86,1.08);opacity:1}76%,100%{transform:translateY(13px) scale(.86,1.08);opacity:0}}
@keyframes ai-ripple{0%,73%{transform:scale(.25);opacity:0}78%{opacity:1}100%{transform:scale(1.5);opacity:0}}
@keyframes ai-twist{0%,62%,100%{transform:rotate(0)}18%{transform:rotate(-32deg)}34%{transform:rotate(10deg)}48%{transform:rotate(-4deg)}}
@keyframes ai-sweep{0%{transform:translateX(-62px)}42%,70%{transform:translateX(0)}100%{transform:translateX(62px)}}
@keyframes ai-road{to{transform:translateX(-34px)}}
@keyframes ai-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.6px)}}
@keyframes ai-wave{0%,56%,100%{transform:translateY(0)}18%{transform:translateY(-7px)}34%{transform:translateY(0)}42%{transform:translateY(-1.5px)}}

.ai--car .ai-body{animation:ai-idle .9s ease-in-out infinite}
.ai--car .ai-shadow{transform-origin:30px 49px;animation:ai-shadow .9s ease-in-out infinite}
.ai--wheel .ai-spin{transform-origin:30px 30px;animation:ai-spin 2.4s linear infinite}
.ai--wheel .ai-hop{animation:ai-hop 2.4s var(--ease,ease) infinite}
.ai--wheel .ai-shadow{transform-origin:30px 55px;animation:ai-hop-shadow 2.4s var(--ease,ease) infinite}
.ai--oil .ai-drop{transform-origin:53.9px 31px;animation:ai-drop 2.6s ease-in infinite}
.ai--oil .ai-ripple{transform-origin:54px 56px;animation:ai-ripple 2.6s ease-out infinite}
.ai--repair .ai-wrench{transform-origin:45.6px 44.6px;animation:ai-twist 2.6s ease-in-out infinite}
.ai--gears .ai-g1{transform-origin:47.6px 21.1px;animation:ai-spin 3s linear infinite}
.ai--gears .ai-g2{transform-origin:12.36px 23.8px;animation:ai-spin 3s linear infinite}
.ai--gears .ai-g3{transform-origin:31.42px 36px;animation:ai-spin-r 3.75s linear infinite}
.ai--door .ai-sweep{animation:ai-sweep 3.2s ease-in-out infinite}
.ai--carside .ai-road{animation:ai-road .55s linear infinite}
.ai--carside .ai-body{animation:ai-bounce .55s ease-in-out infinite}
.ai--carside .ai-spin{animation:ai-spin .7s linear infinite}
.ai--service .ai-g1{transform-origin:72.8px 34.7px;animation:ai-spin 2.4s linear infinite}
.ai--service .ai-g2{transform-origin:38.2px 51px;animation:ai-spin-r 3.2s linear infinite}
.ai--service .ai-car{animation:ai-bounce 1.6s ease-in-out infinite}
.ai--disc .ai-spin{transform-origin:60.1px 60.2px;animation:ai-spin 1.6s linear infinite}
.ai--team .ai-p{animation:ai-wave 2.4s var(--ease,ease) infinite}
.ai--team .ai-p2{animation-delay:.25s}
.ai--team .ai-p3{animation-delay:.5s}

/* public site: play only while visible */
.js .ai:not(.ai-on) *{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){
  .ai *{animation:none!important}
  .ai-ripple{opacity:0}
}