/* Плитки «Подобрать по задаче» (inc/goal-tiles.php) — общие для нового каталога и главной («Желаемый результат»).
   Цвета и размеры — только переменные из tokens.css. Подключается перед catalog-v2.css. */
.vs2-label{font:var(--vs-h2-label);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--vs-blue);margin:0}
.vs2-label--muted{font-size:13px;color:var(--vs-text-muted)}
.vs2-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}
.vs2-more{font-size:14px;font-weight:500;color:var(--vs-blue-dark);text-decoration:none}
.vs2-more:hover{color:var(--vs-blue)}
.vs-goal-tiles{display:flex;flex-direction:column;gap:20px}
.vs2-goals{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.vs2-goal{display:flex;flex-direction:column;align-items:center;gap:14px;padding:24px 12px 20px;border-radius:var(--vs-radius-tile);background:var(--vs-tile);color:var(--vs-ink);font-size:14px;font-weight:500;line-height:1.3;text-align:center;text-decoration:none}
.vs2-goal.is-on{box-shadow:var(--vs-shadow-hover)}

/* Сценки. is-on — показана (мышь, клавиатура, появление на телефоне), is-anim — идёт движение (assets/goal-tiles.js).
   Поза рисунка без анимации — конечная: так выглядят и выбранная подборка, и режим «меньше движения». */
.vs2-goal{position:relative;overflow:hidden;isolation:isolate;transition:color .2s ease,box-shadow .2s ease,transform .2s cubic-bezier(.23,1,.32,1)}
.vs2-goal>svg{transition:opacity .15s ease}
.vs2-goal-scene{position:absolute;inset:0;z-index:-1;background:var(--scene);opacity:0;transition:opacity .22s ease;pointer-events:none}
.vs2-goal-scene svg{position:absolute;top:0;left:50%;margin-left:-100px;overflow:visible}
.vs2-goal-scene *{transform-box:fill-box;transform-origin:center}
.vs2-goal[data-goal=immunity]{--scene:#DFF5E3;--scene-ink:#0B5D33}
.vs2-goal[data-goal=energy]{--scene:#FFD43B;--scene-ink:var(--vs-ink)}
.vs2-goal[data-goal=sleep]{--scene:#14235A;--scene-ink:#fff}
.vs2-goal[data-goal=stress]{--scene:#D8F3EC;--scene-ink:#0B5249}
.vs2-goal[data-goal=joints]{--scene:#F9E8D2;--scene-ink:#6B3A07}
.vs2-goal[data-goal=beauty]{--scene:#FDE3EE;--scene-ink:#9C1C52}
.vs2-goal:is(.is-on,[aria-current=page]){color:var(--scene-ink)}
.vs2-goal:is(.is-on,[aria-current=page]) .vs2-goal-scene{opacity:1}
.vs2-goal:is(.is-on,[aria-current=page])>svg{opacity:0}
.vs2-goal[data-goal=stress]:is(.is-on,[aria-current=page])>svg{opacity:1}
.vs2-goal.is-on{transform:translateY(-2px)}

.vs2-sc-star{fill:#FFE9A8}
.vs2-goal[data-goal=beauty] .vs2-sc-star{fill:#E64980}
.vs2-sc-moon{fill:#FFD66B}
.vs2-sc-bat-b{fill:none;stroke:var(--vs-ink);stroke-width:2.4}
.vs2-sc-bat-c,.vs2-sc-seg{fill:var(--vs-ink)}
.vs2-sc-ring{fill:none;stroke:#1F9E8A;stroke-width:2;opacity:.35}
.vs2-sc-wave{fill:none;stroke:#1E8E4E;stroke-width:2;opacity:0}
.vs2-sc-shield path:first-child{fill:#1E8E4E}
.vs2-sc-check{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:20;stroke-dashoffset:0}
.vs2-sc-rod{fill:none;stroke:#fff;stroke-width:9}
.vs2-sc-bone circle{fill:#fff}
.vs2-sc-rod2{transform-box:view-box;transform-origin:100px 44px;transform:rotate(-30deg)}
.vs2-sc-joint{fill:var(--vs-orange);stroke:#fff;stroke-width:2.5}
.vs2-sc-glow{fill:var(--vs-orange);opacity:.2}
.vs2-sc-heart{fill:#D6336C}

@media(prefers-reduced-motion:no-preference){
  .is-anim .vs2-sc-seg1{animation:vs2Seg1 2.2s linear infinite}
  .is-anim .vs2-sc-seg2{animation:vs2Seg2 2.2s linear infinite}
  .is-anim .vs2-sc-seg3{animation:vs2Seg3 2.2s linear infinite}
  .is-anim .vs2-sc-seg4{animation:vs2Seg4 2.2s linear infinite}
  .is-anim .vs2-sc-bat{animation:vs2Full 2.2s cubic-bezier(.23,1,.32,1) infinite}
  .is-anim .vs2-sc-moon{animation:vs2Rise .7s cubic-bezier(.23,1,.32,1) both,vs2Float 3s ease-in-out .7s infinite alternate}
  .is-anim .vs2-sc-star{animation:vs2Twinkle 1.8s ease-in-out infinite alternate}
  .is-anim g:nth-child(2) .vs2-sc-star{animation-delay:.3s}
  .is-anim g:nth-child(3) .vs2-sc-star{animation-delay:.6s}
  .is-anim g:nth-child(4) .vs2-sc-star{animation-delay:.15s}
  .is-anim g:nth-child(5) .vs2-sc-star{animation-delay:.45s}
  .is-anim g:nth-child(6) .vs2-sc-star{animation-delay:.75s}
  .is-anim .vs2-sc-ring{animation:vs2Breathe 3.6s cubic-bezier(.23,1,.32,1) infinite}
  .is-anim .vs2-sc-ring2{animation-delay:1.2s}
  .is-anim .vs2-sc-ring3{animation-delay:2.4s}
  .vs2-goal[data-goal=stress].is-anim>svg{animation:vs2Calm 3.6s ease-in-out infinite}
  .is-anim .vs2-sc-shield{animation:vs2Pop .35s cubic-bezier(.23,1,.32,1) both}
  .is-anim .vs2-sc-check{animation:vs2Draw .4s cubic-bezier(.23,1,.32,1) .2s both}
  .is-anim .vs2-sc-wave{animation:vs2Wave 1.8s cubic-bezier(.23,1,.32,1) .3s infinite}
  .is-anim .vs2-sc-rod2{animation:vs2Bend 2.4s cubic-bezier(.77,0,.175,1) infinite alternate}
  .is-anim .vs2-sc-glow{animation:vs2Glow 2.4s ease-in-out infinite alternate}
  .is-anim .vs2-sc-heart{animation:vs2Beat 1.5s ease-in-out infinite}
}
@keyframes vs2Seg1{0%,6%{opacity:.14}10%,92%{opacity:1}100%{opacity:.14}}
@keyframes vs2Seg2{0%,24%{opacity:.14}28%,92%{opacity:1}100%{opacity:.14}}
@keyframes vs2Seg3{0%,42%{opacity:.14}46%,92%{opacity:1}100%{opacity:.14}}
@keyframes vs2Seg4{0%,60%{opacity:.14}64%,92%{opacity:1}100%{opacity:.14}}
@keyframes vs2Full{0%,62%,76%,100%{transform:scale(1)}68%{transform:scale(1.07)}}
@keyframes vs2Rise{from{opacity:0;transform:translateY(34px) rotate(-14deg)}to{opacity:1;transform:none}}
@keyframes vs2Float{to{transform:translateY(-4px)}}
@keyframes vs2Twinkle{from{opacity:.25;transform:scale(.8)}to{opacity:1;transform:scale(1)}}
@keyframes vs2Breathe{0%{opacity:.7;transform:scale(.8)}100%{opacity:0;transform:scale(2.6)}}
@keyframes vs2Calm{0%,100%{transform:scale(1)}40%{transform:scale(1.09)}}
@keyframes vs2Pop{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}
@keyframes vs2Draw{from{stroke-dashoffset:20}to{stroke-dashoffset:0}}
@keyframes vs2Wave{0%{opacity:.6;transform:scale(.9)}100%{opacity:0;transform:scale(2.1)}}
@keyframes vs2Bend{from{transform:rotate(0)}to{transform:rotate(-42deg)}}
@keyframes vs2Glow{from{opacity:.12;transform:scale(1)}to{opacity:.32;transform:scale(1.5)}}
@keyframes vs2Beat{0%,100%{transform:scale(1)}14%{transform:scale(1.14)}28%{transform:scale(1)}42%{transform:scale(1.08)}56%{transform:scale(1)}}

@media(max-width:1100px){.vs2-goals{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:640px){.vs2-goals{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}
@media(prefers-reduced-motion:reduce){.vs2-goal{transition:none}.vs2-goal.is-on{transform:none}}