/* Анимации на фото товаров (каталог и главная): при наведении поверх всего фото — контурная сценка на прозрачном фоне.
   Стиль — как у иконок преимуществ: линия #8BC348, 3px, скруглённые концы, без заливок. Запуск: :hover на [data-pa] или .is-play. */
[data-pa] { position: relative; }
.pa { position: absolute; inset: 0; z-index: 2; opacity: 0; transition: opacity .3s; pointer-events: none; }
[data-pa]:hover .pa, .is-play .pa { opacity: 1; }
.pa-svg { display: block; width: 100%; height: 100%; overflow: hidden;
    filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .35)); }   /* лёгкая тень — линии не теряются на пёстром фото */
.pa-svg * { transform-box: fill-box; }
.pa-line { fill: none; stroke: #8bc348; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.pa-thin { stroke-width: 2.2; }
.pa-fill { fill: #8bc348; }

/* ---------- «Котик и колечко»: колечко вкатывается, котик крадётся, прыгает на него, колечко укатывается, котик убегает следом ---------- */
/* котик и колечко уменьшены (scale .81 / .72) — линии чуть толще в единицах рисунка, чтобы на экране не стали волосками */
.pa-cat .c-body .pa-line { stroke-width: 3.3; }
.pa-cat .c-body .pa-thin { stroke-width: 2.5; }
.pa-cat .c-ring .pa-line { stroke-width: 3.4; }
.pa-cat .c-ring .pa-thin { stroke-width: 2.6; }
.pa-cat .c-move { transform: translate(-60px, 170px); }
.pa-cat .c-ring-move { transform: translate(240px, 170px); }
.pa-cat .c-face, .pa-cat .c-ring, .pa-cat .c-eye { transform-origin: center; }
.pa-cat .c-body { transform-origin: 50% 100%; }
.pa-cat .c-leg { transform-origin: 50% 0; }
.pa-cat .c-tail { transform-origin: 100% 100%; }

[data-pa]:hover .pa-cat .c-move, .is-play .pa-cat .c-move { animation: c-move 5s linear infinite both; }
[data-pa]:hover .pa-cat .c-face, .is-play .pa-cat .c-face { animation: c-face 5s steps(1, end) infinite both; }
[data-pa]:hover .pa-cat .c-body, .is-play .pa-cat .c-body { animation: c-body 5s ease-in-out infinite both; }
[data-pa]:hover .pa-cat .c-leg--near-f, [data-pa]:hover .pa-cat .c-leg--far-b,
.is-play .pa-cat .c-leg--near-f, .is-play .pa-cat .c-leg--far-b { animation: c-step .36s ease-in-out infinite alternate; }
[data-pa]:hover .pa-cat .c-leg--near-b, [data-pa]:hover .pa-cat .c-leg--far-f,
.is-play .pa-cat .c-leg--near-b, .is-play .pa-cat .c-leg--far-f { animation: c-step .36s ease-in-out -.36s infinite alternate; }
[data-pa]:hover .pa-cat .c-tail, .is-play .pa-cat .c-tail { animation: c-tail .8s ease-in-out infinite alternate; }
[data-pa]:hover .pa-cat .c-eye, .is-play .pa-cat .c-eye { animation: c-blink 5s linear infinite both; }
[data-pa]:hover .pa-cat .c-ring-move, .is-play .pa-cat .c-ring-move { animation: c-ring-move 5s linear infinite both; }
[data-pa]:hover .pa-cat .c-ring, .is-play .pa-cat .c-ring { animation: c-ring-spin 5s linear infinite both; }

@keyframes c-move {
    0%        { transform: translate(-60px, 170px); animation-timing-function: ease-out; }
    24%       { transform: translate(72px, 170px); }                                       /* дошёл, заметил колечко */
    34%       { transform: translate(72px, 170px); animation-timing-function: ease-out; }
    42%       { transform: translate(108px, 142px); animation-timing-function: ease-in; }  /* прыжок дугой */
    50%       { transform: translate(138px, 170px); }                                      /* приземлился на колечко */
    57%       { transform: translate(138px, 170px); animation-timing-function: ease-in; }
    96%, 100% { transform: translate(-70px, 170px); }                                      /* убежал за колечком */
}
@keyframes c-face { 0% { transform: none; } 57% { transform: scaleX(-1); } 97% { transform: none; } }
@keyframes c-body {
    0%, 25%  { transform: none; }
    28%      { transform: scaleY(.86) rotate(-3deg); }      /* присел, виляет */
    31%      { transform: scaleY(.86) rotate(3deg); }
    34%      { transform: scaleY(.82); }
    38%      { transform: scaleY(1.08) rotate(-14deg); }    /* оттолкнулся */
    46%      { transform: rotate(10deg); }
    50%      { transform: scaleY(.84); }                    /* приземление */
    54%, 100% { transform: none; }
}
@keyframes c-step { from { transform: rotate(24deg); } to { transform: rotate(-24deg); } }
@keyframes c-tail { from { transform: rotate(-8deg); } to { transform: rotate(10deg); } }
@keyframes c-blink { 0%, 29%, 32%, 100% { transform: none; } 30.5% { transform: scaleY(.15); } }
@keyframes c-ring-move {
    0%        { transform: translate(240px, 170px); animation-timing-function: ease-out; }
    18%, 49%  { transform: translate(152px, 170px); }                                      /* вкатилось и лежит */
    50%       { transform: translate(152px, 170px); animation-timing-function: ease-out; }
    56%       { transform: translate(116px, 148px); animation-timing-function: ease-in; }  /* подлетело от удара */
    63%       { transform: translate(78px, 170px); animation-timing-function: ease-out; }
    67%       { transform: translate(64px, 163px); animation-timing-function: ease-in; }   /* отскок */
    71%       { transform: translate(48px, 170px); }
    85%, 100% { transform: translate(-40px, 170px); }                                      /* укатилось */
}
@keyframes c-ring-spin {
    0%       { transform: rotate(0); }
    18%, 50% { transform: rotate(-620deg); }
    85%, 100% { transform: rotate(-1900deg); }
}

@media (prefers-reduced-motion: reduce) {
    .pa, .pa * { animation: none !important; transition: none !important; }
    .pa-cat .c-move { transform: translate(72px, 170px); }        /* статичная картинка */
    .pa-cat .c-ring-move { transform: translate(152px, 170px); }
}

/* Общие для сценок: рисунок уменьшен группой .pa-s (scale .8) — линии чуть толще в единицах рисунка, на экране как у иконок */
.pa-s .pa-line { stroke-width: 3.3; }
.pa-s .pa-thin { stroke-width: 2.5; }

/* ---------- «Собачка и палка»: палку бросают слева, собачка бежит за ней, хватает и уносит обратно ---------- */
.pa-dog .g-move { transform: translate(-60px, 170px); }
.pa-dog .g-stick-move { transform: translate(-30px, 110px); }
.pa-dog .g-face, .pa-dog .g-stick { transform-origin: center; }
.pa-dog .g-body { transform-origin: 50% 100%; }
.pa-dog .g-leg { transform-origin: 50% 0; }
.pa-dog .g-tail { transform-origin: 100% 100%; }
.pa-dog .g-head { transform-origin: 0 100%; }
.pa-dog .g-ear { transform-origin: 50% 0; }

[data-pa]:hover .pa-dog .g-move, .is-play .pa-dog .g-move { animation: g-move 5s linear infinite both; }
[data-pa]:hover .pa-dog .g-face, .is-play .pa-dog .g-face { animation: g-face 5s steps(1, end) infinite both; }
[data-pa]:hover .pa-dog .g-head, .is-play .pa-dog .g-head { animation: g-head 5s ease-in-out infinite both; }
[data-pa]:hover .pa-dog .g-body, .is-play .pa-dog .g-body { animation: g-gallop .3s ease-in-out infinite alternate; }
[data-pa]:hover .pa-dog .g-leg--a, .is-play .pa-dog .g-leg--a { animation: g-step .3s ease-in-out infinite alternate; }
[data-pa]:hover .pa-dog .g-leg--b, .is-play .pa-dog .g-leg--b { animation: g-step .3s ease-in-out -.3s infinite alternate; }
[data-pa]:hover .pa-dog .g-tail, .is-play .pa-dog .g-tail { animation: g-wag .22s ease-in-out infinite alternate; }
[data-pa]:hover .pa-dog .g-ear, .is-play .pa-dog .g-ear { animation: g-ear .3s ease-in-out infinite alternate; }
[data-pa]:hover .pa-dog .g-stick-move, .is-play .pa-dog .g-stick-move { animation: g-stick-move 5s linear infinite both; }
[data-pa]:hover .pa-dog .g-stick, .is-play .pa-dog .g-stick { animation: g-stick-spin 5s linear infinite both; }

@keyframes g-move {
    0%, 10%   { transform: translate(-60px, 170px); animation-timing-function: ease-out; }
    46%       { transform: translate(128px, 170px); }                       /* добежал до палки */
    52%       { transform: translate(128px, 170px); animation-timing-function: ease-in; }
    96%, 100% { transform: translate(-80px, 170px); }                       /* унёс палку */
}
@keyframes g-face { 0% { transform: none; } 52% { transform: scaleX(-1); } 97% { transform: none; } }
@keyframes g-head { 0%, 46%, 52%, 100% { transform: none; } 49% { transform: rotate(22deg); } }   /* наклонился и схватил */
@keyframes g-gallop { from { transform: translateY(0); } to { transform: translateY(-2.5px); } }
@keyframes g-step { from { transform: rotate(28deg); } to { transform: rotate(-28deg); } }
@keyframes g-wag { from { transform: rotate(-14deg); } to { transform: rotate(14deg); } }
@keyframes g-ear { from { transform: rotate(-6deg); } to { transform: rotate(10deg); } }
@keyframes g-stick-move {
    0%, 8%    { transform: translate(-30px, 110px); animation-timing-function: ease-out; }
    18%       { transform: translate(70px, 62px); animation-timing-function: ease-in; }    /* летит дугой */
    28%, 49%  { transform: translate(150px, 166px); }                                     /* лежит */
    53%       { transform: translate(103px, 148px); animation-timing-function: ease-in; }  /* в зубах */
    96%, 100% { transform: translate(-105px, 148px); }
}
@keyframes g-stick-spin { 0%, 8% { transform: rotate(0); } 28%, 49% { transform: rotate(540deg); } 53%, 100% { transform: rotate(720deg); } }

@media (prefers-reduced-motion: reduce) {
    .pa-dog .g-move { transform: translate(120px, 170px); }
    .pa-dog .g-stick-move { transform: translate(150px, 166px); }
}

/* ---------- «Грузовичок привёз VentyFlex»: въезжает, выгружает коробку с вентилятором, уезжает ---------- */
.pa-truck .k-move { transform: translate(-50px, 170px); }
.pa-truck .k-box-move { transform: translate(90px, 163px); opacity: 0; }
.pa-truck .k-wheel, .pa-truck .k-fan { transform-origin: center; }
.pa-truck .k-bump, .pa-truck .k-box { transform-origin: 50% 100%; }

[data-pa]:hover .pa-truck .k-move, .is-play .pa-truck .k-move { animation: k-move 6s linear infinite both; }
[data-pa]:hover .pa-truck .k-wheel, .is-play .pa-truck .k-wheel { animation: k-wheel 6s linear infinite both; }
[data-pa]:hover .pa-truck .k-bump, .is-play .pa-truck .k-bump { animation: k-bump .34s ease-in-out infinite alternate; }
[data-pa]:hover .pa-truck .k-box-move, .is-play .pa-truck .k-box-move { animation: k-box-move 6s linear infinite both; }
[data-pa]:hover .pa-truck .k-box, .is-play .pa-truck .k-box { animation: k-box 6s ease-out infinite both; }
[data-pa]:hover .pa-truck .k-fan, .is-play .pa-truck .k-fan { animation: k-fan 6s linear infinite both; }

@keyframes k-move {
    0%        { transform: translate(-50px, 170px); animation-timing-function: ease-out; }
    30%, 62%  { transform: translate(112px, 170px); animation-timing-function: ease-in; }   /* приехал и стоит */
    92%, 100% { transform: translate(260px, 170px); }                                       /* уехал */
}
@keyframes k-wheel { 0% { transform: rotate(0); } 30%, 62% { transform: rotate(900deg); } 92%, 100% { transform: rotate(1800deg); } }
@keyframes k-bump { from { transform: translateY(0); } to { transform: translateY(-1px); } }
@keyframes k-box-move {
    0%, 35%   { transform: translate(90px, 163px); opacity: 0; }
    38%       { transform: translate(90px, 163px); opacity: 1; animation-timing-function: ease-in-out; }   /* показалась из задней двери */
    46%       { transform: translate(66px, 163px); opacity: 1; animation-timing-function: ease-in; }       /* выехала */
    51%       { transform: translate(60px, 170px); opacity: 1; }                                           /* спрыгнула на землю */
    90%       { transform: translate(60px, 170px); opacity: 1; }
    97%, 100% { transform: translate(60px, 170px); opacity: 0; }
}
@keyframes k-box { 0%, 50% { transform: none; } 53% { transform: scaleY(.85); } 57% { transform: translateY(-4px); } 61%, 100% { transform: none; } }
@keyframes k-fan { 0%, 60% { transform: rotate(0); } 90%, 100% { transform: rotate(720deg); } }   /* вентилятор на коробке закрутился */

@media (prefers-reduced-motion: reduce) {
    .pa-truck .k-move { transform: translate(112px, 170px); }
    .pa-truck .k-box-move { transform: translate(60px, 170px); opacity: 1; }
}

/* ---------- «Воздушный шар ВЕНТИС»: поднимается снизу вверх через фото, покачивается, облачка плывут навстречу ---------- */
.pa-balloon .s-text { fill: #8bc348; font: 700 13px "PT Sans", Arial, sans-serif; letter-spacing: .04em; }
.pa-balloon .s-small .pa-line { stroke-width: 3.9; }
.pa-balloon .s-small .pa-thin { stroke-width: 2.9; }
.pa-balloon .s-move { transform: translate(70px, 270px); }
.pa-balloon .s-sway { transform-origin: 50% 0; }
.pa-balloon .s-flag { transform-origin: 0 100%; }
.pa-balloon .s-cloud { opacity: 0; }
.pa-balloon .s-cloud--1 { transform: translate(210px, 60px); }
.pa-balloon .s-cloud--2 { transform: translate(230px, 130px); }

[data-pa]:hover .pa-balloon .s-move, .is-play .pa-balloon .s-move { animation: s-move 7s linear infinite both; }
[data-pa]:hover .pa-balloon .s-sway, .is-play .pa-balloon .s-sway { animation: s-sway 2.4s ease-in-out infinite alternate; }
[data-pa]:hover .pa-balloon .s-flag, .is-play .pa-balloon .s-flag { animation: s-flag .5s ease-in-out infinite alternate; }
[data-pa]:hover .pa-balloon .s-cloud--1, .is-play .pa-balloon .s-cloud--1 { animation: s-cloud-1 7s linear infinite both; }
[data-pa]:hover .pa-balloon .s-cloud--2, .is-play .pa-balloon .s-cloud--2 { animation: s-cloud-2 7s linear infinite both; }

@keyframes s-move {
    0%   { transform: translate(70px, 275px); }
    50%  { transform: translate(110px, 150px); }
    100% { transform: translate(150px, 20px); }      /* улетел за верхний край */
}
@keyframes s-sway { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
@keyframes s-flag { from { transform: skewY(-8deg); } to { transform: skewY(8deg); } }
@keyframes s-cloud-1 { 0%, 15% { transform: translate(210px, 60px); opacity: 0; } 25% { opacity: .9; } 85% { opacity: .9; } 100% { transform: translate(-40px, 60px); opacity: 0; } }
@keyframes s-cloud-2 { 0%, 35% { transform: translate(230px, 130px); opacity: 0; } 45% { opacity: .9; } 90% { opacity: .9; } 100% { transform: translate(40px, 130px); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
    .pa-balloon .s-move { transform: translate(110px, 150px); }
}

/* ---------- «Летающий вентилятор»: стоит, раскручивает лопасти, взлетает и пролетает через фото дугой, за ним поток воздуха ---------- */
.pa-fan .f-move { transform: translate(-40px, 140px); }
.pa-fan .f-blades { transform-origin: center; }
.pa-fan .f-tilt { transform-origin: 50% 50%; }
.pa-fan .f-wind { opacity: 0; }

[data-pa]:hover .pa-fan .f-move, .is-play .pa-fan .f-move { animation: f-move 5.5s ease-in-out infinite both; }
[data-pa]:hover .pa-fan .f-blades, .is-play .pa-fan .f-blades { animation: f-spin .28s linear infinite; }
[data-pa]:hover .pa-fan .f-tilt, .is-play .pa-fan .f-tilt { animation: f-tilt 5.5s ease-in-out infinite both; }
[data-pa]:hover .pa-fan .f-wind, .is-play .pa-fan .f-wind { animation: f-wind 5.5s linear infinite both; }
[data-pa]:hover .pa-fan .f-wind path, .is-play .pa-fan .f-wind path { animation: f-gust .45s ease-in infinite; }
[data-pa]:hover .pa-fan .f-w2, .is-play .pa-fan .f-w2 { animation-delay: .15s; }
[data-pa]:hover .pa-fan .f-w3, .is-play .pa-fan .f-w3 { animation-delay: .3s; }

@keyframes f-move {
    0%    { transform: translate(-40px, 150px); }
    30%   { transform: translate(60px, 96px); }      /* влетел, набирает высоту */
    50%   { transform: translate(110px, 70px); }
    65%   { transform: translate(140px, 92px); }     /* петля вниз */
    80%   { transform: translate(170px, 60px); }
    100%  { transform: translate(250px, 30px); }     /* улетел за край */
}
@keyframes f-spin { to { transform: rotate(360deg); } }
@keyframes f-tilt { 0%, 100% { transform: rotate(8deg); } 50% { transform: rotate(-6deg); } 65% { transform: rotate(14deg); } 80% { transform: rotate(-4deg); } }
@keyframes f-wind { 0%, 5% { opacity: 0; } 15%, 90% { opacity: 1; } 100% { opacity: 0; } }
@keyframes f-gust { 0% { transform: translateX(0); opacity: 1; } 100% { transform: translateX(-10px); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
    .pa-fan .f-move { transform: translate(110px, 80px); }
}