/* testbesplatno.ru — знаки трёх форм результата. Подключать после site.css. */

/* ── знаки трёх форм результата ───────────────────────────────────────
   Каждый знак — миниатюра своей диаграммы, а не абстракция. Анимация
   запускается при наведении на карточку и снимается prefers-reduced-motion. */
.tb-ri{display:block;width:30px;height:30px;flex:none;color:var(--tb-tone);overflow:visible}
.tb-ri path{transform-box:fill-box;transform-origin:center}
.tb-ri[data-res="scales"] path[data-p="grid"]{opacity:.32}
.tb-ri[data-res="scales"] path[data-p="shape"]{stroke-width:2}
.tb-ri[data-res="types"] path[data-p="lead"]{stroke-width:3.2;stroke-linecap:round}
.tb-ri[data-res="types"] path[data-p="b2"]{opacity:.72}
.tb-ri[data-res="types"] path[data-p="b3"]{opacity:.5}
.tb-ri[data-res="types"] path[data-p="b4"]{opacity:.34}
.tb-ri[data-res="zone"] path[data-p="ticks"]{opacity:.45}
.tb-ri[data-res="zone"] path[data-p="needle"]{stroke-width:2;transform-origin:bottom right}

/* профиль: внутренний многоугольник «набирает» форму */
:is(a,.tb-card,.tb-rescard):is(:hover,:focus-visible,:active) .tb-ri[data-res="scales"] path[data-p="shape"]{animation:tb-ri-shape 1.6s var(--tb-ease) infinite}
:is(a,.tb-card,.tb-rescard):is(:hover,:focus-visible,:active) .tb-ri[data-res="scales"] path[data-p="hex"]{animation:tb-ri-turn 3.2s linear infinite}
@keyframes tb-ri-shape{0%{transform:scale(.55);opacity:.45}45%{transform:scale(1.06);opacity:1}70%,100%{transform:scale(1);opacity:1}}
@keyframes tb-ri-turn{to{transform:rotate(360deg)}}

/* близость к типам: полосы вырастают по очереди, лидер подсвечивается */
.tb-ri[data-res="types"] path[data-p^="b"],.tb-ri[data-res="types"] path[data-p="lead"]{transform-origin:left center}
:is(a,.tb-card,.tb-rescard):is(:hover,:focus-visible,:active) .tb-ri[data-res="types"] path[data-p="b1"]{animation:tb-ri-bar 1.4s var(--tb-ease) infinite}
:is(a,.tb-card,.tb-rescard):is(:hover,:focus-visible,:active) .tb-ri[data-res="types"] path[data-p="b2"]{animation:tb-ri-bar 1.4s var(--tb-ease) .1s infinite}
:is(a,.tb-card,.tb-rescard):is(:hover,:focus-visible,:active) .tb-ri[data-res="types"] path[data-p="b3"]{animation:tb-ri-bar 1.4s var(--tb-ease) .2s infinite}
:is(a,.tb-card,.tb-rescard):is(:hover,:focus-visible,:active) .tb-ri[data-res="types"] path[data-p="b4"]{animation:tb-ri-bar 1.4s var(--tb-ease) .3s infinite}
:is(a,.tb-card,.tb-rescard):is(:hover,:focus-visible,:active) .tb-ri[data-res="types"] path[data-p="lead"]{animation:tb-ri-lead 1.4s var(--tb-ease) infinite}
@keyframes tb-ri-bar{0%{transform:scaleX(.12)}55%,100%{transform:scaleX(1)}}
@keyframes tb-ri-lead{0%{transform:scaleX(.12);opacity:.4}55%{transform:scaleX(1);opacity:1;filter:drop-shadow(0 0 4px currentColor)}100%{transform:scaleX(1);opacity:1}}

/* зона: стрелка доезжает до своей зоны с доводкой */
:is(a,.tb-card,.tb-rescard):is(:hover,:focus-visible,:active) .tb-ri[data-res="zone"] path[data-p="needle"]{animation:tb-ri-needle 1.8s cubic-bezier(.25,1.35,.35,1) infinite}
:is(a,.tb-card,.tb-rescard):is(:hover,:focus-visible,:active) .tb-ri[data-res="zone"] path[data-p="ticks"]{animation:tb-ri-ticks 1.8s steps(1,end) infinite}
@keyframes tb-ri-needle{0%{transform:rotate(-58deg)}55%{transform:rotate(42deg)}72%{transform:rotate(28deg)}100%{transform:rotate(34deg)}}
@keyframes tb-ri-ticks{0%,55%{opacity:.45}60%,100%{opacity:1}}

@media (prefers-reduced-motion:reduce){.tb-ri,.tb-ri path{animation:none!important}}