/* Анимированные иконки преимуществ ventys.ru.
   Стиль иконок не меняется: тот же контур #8BC348, двигаются только части исходного рисунка.
   Запуск: наведение на карточку [data-anim-icon] или класс .is-play (телефоны — один раз при появлении, ikonki.js). */

.vt-icon { width: 80px; height: 80px; overflow: hidden; fill: #8bc348; }
.vt-icon--box { overflow: visible; }   /* коробка подлетает выше рамки */
.vt-icon * { transform-box: fill-box; }

/* ---------- «Доставка»: машинка уезжает вправо и въезжает слева, колёса крутятся ---------- */
.t-truck { transform-origin: center bottom; }
.t-wheel { transform-origin: center; }
.t-spoke { opacity: 0; transition: opacity .2s; }
.t-speed path { transform-origin: right center; }

[data-anim-icon]:hover .t-truck, .is-play .t-truck {
    animation: t-drive 1.5s cubic-bezier(.55, 0, .25, 1) both, t-bump .32s ease-in-out 1.5s infinite;
}
[data-anim-icon]:hover .t-wheel, .is-play .t-wheel { animation: t-spin .45s linear infinite; }
[data-anim-icon]:hover .t-spoke, .is-play .t-spoke { opacity: 1; }
[data-anim-icon]:hover .t-speed path, .is-play .t-speed path { animation: t-speed .6s ease-in 1.5s infinite; }
[data-anim-icon]:hover .t-speed path + path, .is-play .t-speed path + path { animation-delay: 1.65s; }

@keyframes t-drive {
    0%     { transform: translateX(0); }
    12%    { transform: translateX(-4px); }      /* лёгкий замах назад */
    42%    { transform: translateX(110px); }     /* уехал за правый край */
    42.01% { transform: translateX(-110px); }    /* въезжает слева */
    85%    { transform: translateX(3px); }       /* небольшой перекат */
    100%   { transform: translateX(0); }
}
@keyframes t-bump { 50% { transform: translateY(-1.2px); } }
@keyframes t-spin { to { transform: rotate(360deg); } }
@keyframes t-speed {
    0%   { transform: translateX(0) scaleX(1); opacity: 1; }
    70%  { transform: translateX(-6px) scaleX(.5); opacity: 0; }
    100% { transform: translateX(0) scaleX(1); opacity: 1; }
}

/* ---------- «Складская программа»: руки подбрасывают коробку ---------- */
.b-box { transform-origin: center bottom; }
.b-hand-l { transform-origin: 10% 30%; }
.b-hand-r { transform-origin: 90% 30%; }

[data-anim-icon]:hover .b-box, .is-play .b-box { animation: b-toss 1.3s cubic-bezier(.3, 0, .3, 1) both; }
[data-anim-icon]:hover .b-hand-l, .is-play .b-hand-l { animation: b-hand-l 1.3s ease-in-out both; }
[data-anim-icon]:hover .b-hand-r, .is-play .b-hand-r { animation: b-hand-r 1.3s ease-in-out both; }
[data-anim-icon]:hover .b-label, .is-play .b-label { animation: b-label 1.3s ease-in-out both; }

@keyframes b-toss {
    0%   { transform: translateY(0); }
    18%  { transform: translateY(2px) scaleY(.96); }   /* присели */
    45%  { transform: translateY(-12px) rotate(-4deg); }
    70%  { transform: translateY(0) scaleY(.95); }      /* приземлилась */
    84%  { transform: translateY(-2px); }
    100% { transform: translateY(0); }
}
@keyframes b-hand-l { 0%, 100% { transform: none; } 18% { transform: rotate(4deg); } 45% { transform: rotate(-6deg); } 70% { transform: rotate(3deg); } }
@keyframes b-hand-r { 0%, 100% { transform: none; } 18% { transform: rotate(-4deg); } 45% { transform: rotate(6deg); } 70% { transform: rotate(-3deg); } }
@keyframes b-label { 0%, 40%, 100% { opacity: 1; } 55% { opacity: .2; } 70% { opacity: 1; } }

/* ---------- «Проектная документация»: столбики растут, строки пишутся, карандаш делает штрих ---------- */
.r-bar { transform-origin: center bottom; }
.r-line { transform-origin: left center; }
.r-pencil { transform-origin: 50% 100%; }

[data-anim-icon]:hover .r-bar, .is-play .r-bar { animation: r-grow .55s cubic-bezier(.3, 1.4, .5, 1) both; }
[data-anim-icon]:hover .r-bar:nth-of-type(2), .is-play .r-bar:nth-of-type(2) { animation-delay: .12s; }
[data-anim-icon]:hover .r-bar:nth-of-type(3), .is-play .r-bar:nth-of-type(3) { animation-delay: .24s; }
[data-anim-icon]:hover .r-bar:nth-of-type(4), .is-play .r-bar:nth-of-type(4) { animation-delay: .36s; }
[data-anim-icon]:hover .r-line, .is-play .r-line { animation: r-write .45s ease-out both; }
[data-anim-icon]:hover .r-line:nth-of-type(2), .is-play .r-line:nth-of-type(2) { animation-delay: .1s; }
[data-anim-icon]:hover .r-line:nth-of-type(3), .is-play .r-line:nth-of-type(3) { animation-delay: .2s; }
[data-anim-icon]:hover .r-line:nth-of-type(4), .is-play .r-line:nth-of-type(4) { animation-delay: .3s; }
[data-anim-icon]:hover .r-pencil, .is-play .r-pencil { animation: r-pencil 1.1s ease-in-out .3s both; }

@keyframes r-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes r-write { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes r-pencil {
    0%, 100% { transform: none; }
    25% { transform: translate(-3px, 4px) rotate(-10deg); }
    50% { transform: translate(-6px, 2px) rotate(-14deg); }
    75% { transform: translate(-3px, 4px) rotate(-10deg); }
}

/* ---------- «Наши партнёры»: рукопожатие ---------- */
.d-hands { transform-origin: 50% 60%; }
.d-dot { transform-origin: center; }

[data-anim-icon]:hover .d-hands, .is-play .d-hands { animation: d-shake 1.2s ease-in-out both; }
[data-anim-icon]:hover .d-dot, .is-play .d-dot { animation: d-dot 1.2s ease-out both; }

@keyframes d-shake {
    0%, 100% { transform: none; }
    15% { transform: translateY(-3px) rotate(-3deg); }
    30% { transform: translateY(3px) rotate(3deg); }
    45% { transform: translateY(-3px) rotate(-3deg); }
    60% { transform: translateY(3px) rotate(3deg); }
    75% { transform: translateY(-1px) rotate(-1deg); }
}
@keyframes d-dot { 0%, 100% { transform: scale(1); opacity: 1; } 40% { transform: scale(2.2); opacity: .5; } 70% { transform: scale(.8); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
    .vt-icon, .vt-icon * { animation: none !important; transition: none !important; }
}