/* Socio-Nik · движение. Анимируем только transform / opacity / clip-path; всё гасится prefers-reduced-motion,
   петли вне экрана ставятся на паузу (.is-off). */

/* ---------- FadeIn: один раз, 0,7 с, cubic-bezier(.25,.1,.25,1); сдвиг --fx / --fy, задержка --d + шаг --i ---------- */
.js .reveal { opacity: 0; translate: var(--fx, 0) var(--fy, 30px); transition: opacity 0.7s var(--ease), translate 0.7s var(--ease); transition-delay: calc(var(--d, 0s) + var(--i, 0) * 80ms); }
.js .reveal.in { opacity: 1; translate: none; }

/* ---------- переходы между экранами ---------- */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.36s; animation-timing-function: var(--ease); }
::view-transition-old(root) { animation-name: vt-out; }
::view-transition-new(root) { animation-name: vt-in; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }

/* ---------- общие ---------- */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes shadow-breath { 0%, 100% { transform: scaleX(1); opacity: 1; } 50% { transform: scaleX(0.86); opacity: 0.7; } }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-14px) rotate(3deg); } }
@keyframes breathe { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.06); opacity: 0.85; } }
@keyframes pop-in { from { opacity: 0; transform: translateY(12px) scale(0.97); } }
@keyframes ava-pop { from { opacity: 0; transform: scale(0.4) rotate(-14deg); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes wobble { 0%, 100% { transform: rotate(-6deg) translateY(0); } 50% { transform: rotate(8deg) translateY(-10px); } }

/* ---------- герой: появление один раз ---------- */
.hero.intro .h-in { animation: h-in 0.7s var(--ease) both; animation-delay: var(--d, 0s); }
@keyframes h-in { from { opacity: 0; translate: 0 var(--y, 20px); } }
.soc-float { animation: float 9s ease-in-out infinite; }
.soc-tr .soc-float { animation-delay: -2.2s; }
.soc-bl .soc-float { animation-delay: -4.5s; }
.soc-br .soc-float { animation-delay: -6.7s; }

/* ---------- эмблемы ---------- */
.emblem .em-base, .emblem .em-creative, .emblem .em-shadow { transform-box: fill-box; transform-origin: center; }
.em-float .em-base, .em-live .em-base { animation: bob 6s ease-in-out infinite; }
.em-float .em-creative { animation: bob 6s ease-in-out infinite; animation-delay: -3s; }
.em-float .em-shadow, .em-live .em-shadow { animation: shadow-breath 6s ease-in-out infinite; }
.tile:nth-child(2) .em-base { animation-delay: -1.5s; }
.tile:nth-child(3) .em-base { animation-delay: -3s; }
.tile:nth-child(4) .em-base { animation-delay: -4.5s; }
.bx-glow { animation: spin 18s linear infinite; }

/* ---------- калькулятор ---------- */
.calc-out.pop .calc-duo { animation: pop-in 0.6s var(--out) both; }
.calc-out.pop .calc-text { animation: pop-in 0.6s var(--out) 0.08s both; }

/* ---------- тест ---------- */
/* Вопросы меняются по очереди (см. views/test.js): короткий уход, затем въезд; без размытия — оно мутнит текст */
.q-out-l { animation: q-out-l 0.2s var(--ease) forwards; pointer-events: none; }
.q-out-r { animation: q-out-r 0.2s var(--ease) forwards; pointer-events: none; }
.q-in-r { animation: q-in-r 0.45s var(--out) both; }
.q-in-l { animation: q-in-l 0.45s var(--out) both; }
@keyframes q-out-l { to { opacity: 0; transform: translateX(-36px); } }
@keyframes q-out-r { to { opacity: 0; transform: translateX(36px); } }
@keyframes q-in-r { from { opacity: 0; transform: translateX(44px); } }
@keyframes q-in-l { from { opacity: 0; transform: translateX(-44px); } }
.dot.pop { animation: dot-pop 0.45s var(--spring); }
.dot.pop span { animation: ring 0.7s var(--out); }
@keyframes dot-pop { 40% { transform: scale(1.2); } }
@keyframes ring { from { box-shadow: 0 0 0 0 rgba(182, 0, 168, 0.55); } to { box-shadow: 0 0 0 18px transparent; } }
.counting { animation: fade-in 0.3s both; }

/* ---------- mystery box ---------- */
.bx-float { animation: bx-bob 5s ease-in-out infinite; }
.bx-shadow { animation: shadow-breath 5s ease-in-out infinite; }
@keyframes bx-bob { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-12px) rotate(1.5deg); } }
.bx.shake .bx-float { animation: bx-shake 0.42s ease-in-out; }
@keyframes bx-shake {
  20% { transform: translateX(-8px) rotate(-6deg); }
  40% { transform: translateX(8px) rotate(6deg); }
  60% { transform: translateX(-6px) rotate(-4deg); }
  80% { transform: translateX(4px) rotate(2deg); }
}
@keyframes bx-flash { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.2); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.9); } }
.is-open .bx-float, .is-open .bx-shadow { animation-play-state: paused; }

@keyframes fc-sheen { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0% 0; } }

/* ---------- сцены отношений (сдвиги — в единицах знака, масштаб 0.56) ---------- */
.scene .sf, .scene .sx { transform-box: fill-box; transform-origin: center; }

.sc-dual .sa { animation: dual-a 4.2s var(--ease) infinite; }
.sc-dual .sb { animation: dual-b 4.2s var(--ease) infinite; }
.sc-dual .sx-ring { animation: dual-ring 4.2s var(--ease) infinite; }
@keyframes dual-a { 0%, 12%, 88%, 100% { transform: translateX(0); } 38%, 66% { transform: translateX(62px); } }
@keyframes dual-b { 0%, 12%, 88%, 100% { transform: translateX(0); } 38%, 66% { transform: translateX(-62px); } }
@keyframes dual-ring { 0%, 30%, 80%, 100% { opacity: 0; transform: scale(0.82); } 44%, 64% { opacity: 1; transform: scale(1); } }

.sc-activation .sx-spin { transform-box: view-box; transform-origin: 160px 86px; animation: spin 5.5s linear infinite; }
.sc-activation .sa, .sc-activation .sb { animation: spin 5.5s linear infinite reverse; }

.sc-mirror .sa, .sc-mirror .sb { animation: mirror-in 4s var(--ease) infinite; }
.sc-mirror .sx-line { animation: line-glow 4s var(--ease) infinite; }
@keyframes mirror-in { 0%, 100% { transform: translateX(0); } 45%, 60% { transform: translateX(34px); } }
@keyframes line-glow { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }

.sc-semidual .sa { animation: semi-a 4s var(--ease) infinite; }
.sc-semidual .sb { animation: semi-b 4s var(--ease) infinite; }
.sc-semidual .sx-spark { animation: spark 4s var(--ease) infinite; }
@keyframes semi-a { 0%, 100% { transform: translateX(0); } 40%, 62% { transform: translateX(40px); } }
@keyframes semi-b { 0%, 100% { transform: translateX(0); } 40%, 62% { transform: translateX(-40px); } }
@keyframes spark { 0%, 38%, 70%, 100% { opacity: 0; transform: scale(0.4) rotate(0deg); } 48% { opacity: 1; transform: scale(1.2) rotate(45deg); } 58% { opacity: 0.6; transform: scale(0.9) rotate(90deg); } }

.sc-mirage .sb { animation: mirage 3.6s ease-in-out infinite; }
.sc-mirage .sa { animation: drift-to 3.6s ease-in-out infinite; }
.sc-mirage .sx-wave { animation: wave 3.6s ease-in-out infinite; }
.sc-mirage .w1 { animation-delay: -1.2s; }
.sc-mirage .w2 { animation-delay: -2.4s; }
@keyframes mirage { 0%, 100% { opacity: 0.95; transform: translateY(0) scale(1); } 50% { opacity: 0.35; transform: translateY(-8px) scale(0.96); } }
@keyframes drift-to { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(22px); } }
@keyframes wave { 0%, 100% { opacity: 0.2; transform: translateX(-6px); } 50% { opacity: 0.9; transform: translateX(6px); } }

.sc-identity .sa, .sc-identity .sb { animation: bob 3s ease-in-out infinite; }

.sc-kindred .sa, .sc-kindred .sb { animation: bob 4s ease-in-out infinite; }
.sc-kindred .sb { animation-delay: -2s; }
.sc-kindred .sx-sat-a { transform-box: view-box; transform-origin: 100px 86px; animation: spin 3.2s linear infinite; }
.sc-kindred .sx-sat-b { transform-box: view-box; transform-origin: 220px 86px; animation: spin 4.6s linear infinite reverse; }

.sc-business .sa, .sc-business .sb { animation: walk 3.2s ease-in-out infinite; }
.sc-business .sx-track { animation: track 1.6s linear infinite; }
@keyframes walk { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(14px, -6px); } 50% { transform: translate(28px, 0); } 75% { transform: translate(14px, -6px); } }
@keyframes track { to { stroke-dashoffset: -40; } }

.sc-quasi .sa { animation: turn 4.4s var(--ease) infinite; }
.sc-quasi .sb { animation: turn 4.4s var(--ease) infinite; animation-delay: -2.2s; }
@keyframes turn { 0%, 30%, 100% { transform: scaleX(1); } 40%, 60% { transform: scaleX(-1); } 70% { transform: scaleX(1); } }

.sc-request .sx-gift { animation: gift 3.6s linear infinite; }
.sc-request .sb { animation: receive 3.6s var(--ease) infinite; }
@keyframes gift {
  0% { opacity: 0; transform: translate(0, 0) scale(0.6); }
  8% { opacity: 1; transform: translate(0, 0) scale(1); }
  20% { transform: translate(24px, -19px); }
  32% { transform: translate(48px, -25px); }
  44% { transform: translate(72px, -19px); }
  56% { opacity: 1; transform: translate(96px, 0) scale(1); }
  64%, 100% { opacity: 0; transform: translate(96px, 0) scale(0.2); }
}
@keyframes receive { 0%, 50%, 80%, 100% { transform: scale(1); } 62% { transform: scale(1.14); } }

.sc-extinguish .sa { animation: ext-a 4.2s var(--ease) infinite; }
.sc-extinguish .sb { animation: ext-b 4.2s var(--ease) infinite; }
@keyframes ext-a { 0%, 100% { transform: translateX(0); opacity: 1; } 45%, 60% { transform: translateX(44px) scale(0.9); opacity: 0.3; } }
@keyframes ext-b { 0%, 100% { transform: translateX(0); opacity: 1; } 45%, 60% { transform: translateX(-44px) scale(0.9); opacity: 0.3; } }

.sc-superego .sa { animation: nod-a 4s var(--ease) infinite; }
.sc-superego .sb { animation: nod-b 4s var(--ease) infinite; }
@keyframes nod-a { 0%, 10%, 40%, 100% { transform: rotate(0deg); } 20%, 30% { transform: rotate(-12deg) translateY(4px); } }
@keyframes nod-b { 0%, 50%, 80%, 100% { transform: rotate(0deg); } 60%, 70% { transform: rotate(12deg) translateY(4px); } }

.sc-supervision .sx-beam { animation: beam 3.4s ease-in-out infinite; }
.sc-supervision .sb { animation: under-beam 3.4s ease-in-out infinite; }
.sc-supervision .sa { animation: bob 3.4s ease-in-out infinite; }
@keyframes beam { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
@keyframes under-beam { 0%, 100% { transform: scale(1); } 50% { transform: scale(0.88) translateY(6px); } }

.sc-conflict .sa { animation: clash-a 3.6s var(--ease) infinite; }
.sc-conflict .sb { animation: clash-b 3.6s var(--ease) infinite; }
.sc-conflict .sx-hit { animation: hit 3.6s ease-out infinite; }
@keyframes clash-a { 0%, 100% { transform: translateX(0); } 34% { transform: translateX(58px); } 46% { transform: translateX(-16px) rotate(-8deg); } 70% { transform: translateX(0); } }
@keyframes clash-b { 0%, 100% { transform: translateX(0); } 34% { transform: translateX(-58px); } 46% { transform: translateX(16px) rotate(8deg); } 70% { transform: translateX(0); } }
@keyframes hit { 0%, 30%, 55%, 100% { opacity: 0; transform: scale(0.5); } 36% { opacity: 1; transform: scale(1.25); } }

/* ---------- страница результата по ссылке ---------- */
/* «живая» точка: расходится кольцо — transform и opacity, без перерисовки box-shadow на каждом кадре */
.sh-badge i { position: relative; }
.sh-badge i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--q); animation: sh-ping 2.2s var(--out) infinite; }
@keyframes sh-ping { from { opacity: 0.55; transform: scale(1); } to { opacity: 0; transform: scale(3.4); } }
.sc-mystery .sa { animation: bob 4s ease-in-out infinite; }
.sc-mystery .sb { animation: mystery 2.8s ease-in-out infinite; }
.sc-mystery .sc-q { transform-box: fill-box; transform-origin: center; animation: q-pulse 2.8s ease-in-out infinite; }
.sc-mystery .sx-arc { animation: arc-flow 1.6s linear infinite; }
@keyframes mystery { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.09); } }
@keyframes q-pulse { 0%, 100% { opacity: 0.5; transform: scale(0.92); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes arc-flow { to { stroke-dashoffset: -18; } }

/* ---------- пара персонажей разыгрывает отношение (.duo.act-<вид>) ----------
   Поза каждого — --p0, крайняя точка движения — --p1 (и --p2 у трёхфазных); слева тот, от кого идёт действие.
   Символы: .fx-1…3 — место (left/top) и своё движение. В щадящем режиме остаются позы и символы без движения. */
.duo[class*="act-"] .duo-body { animation: var(--mv, duo-sway) var(--dur, 5s) var(--ez, ease-in-out) var(--del, 0s) infinite; }
@keyframes duo-sway { 0%, 100% { transform: var(--p0); } 50% { transform: var(--p1); } }
@keyframes duo-beat { 0%, 42%, 100% { transform: var(--p0); } 20% { transform: var(--p1); } }
@keyframes duo-push { 0%, 100% { transform: var(--p0); } 24%, 44% { transform: var(--p1); } 70% { transform: var(--p2); } }
@keyframes duo-jolt { 0%, 44%, 62%, 100% { transform: var(--p0); } 50% { transform: var(--p1); } 56% { transform: var(--p2); } }
@keyframes duo-shiver { 0%, 34%, 66%, 100% { transform: var(--p0); } 40%, 52% { transform: var(--p1); } 46%, 58% { transform: var(--p2); } }

/* символы */
@keyframes fx-rise { 0% { opacity: 0; transform: translateY(60%) scale(0.4); } 18%, 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(-190%) scale(1.05) rotate(-8deg); } }
@keyframes fx-pop { 0%, 30%, 100% { opacity: 0; transform: scale(0.3); } 42%, 72% { opacity: 1; transform: scale(1); } 84% { opacity: 0; transform: scale(1.15); } }
@keyframes fx-burst { 0%, 100% { opacity: 0; transform: scale(0.3) rotate(-30deg); } 30% { opacity: 1; transform: scale(1.1) rotate(0deg); } 70% { opacity: 0.2; transform: scale(1.3) rotate(20deg); } }
@keyframes fx-notes { 0% { opacity: 0; transform: translate(-40%, 40%) rotate(-12deg) scale(0.6); } 20%, 70% { opacity: 1; } 100% { opacity: 0; transform: translate(60%, -170%) rotate(14deg) scale(1); } }
@keyframes fx-say { 0%, 48%, 100% { opacity: 0; transform: scale(0.5) translateY(30%); } 8%, 36% { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes fx-throb { 0%, 100% { opacity: 0.55; transform: scale(0.82); } 50% { opacity: 1; transform: scale(1.12); } }
@keyframes fx-drift { 0%, 100% { transform: translateX(-26%) translateY(0); } 50% { transform: translateX(26%) translateY(-12%); } }
@keyframes fx-twinkle { 0%, 100% { opacity: 0; transform: scale(0.4) rotate(0deg); } 50% { opacity: 1; transform: scale(1) rotate(30deg); } }
@keyframes fx-flash { 0%, 12%, 64%, 100% { opacity: 0; transform: scale(0.5) translateY(30%); } 24%, 52% { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes fx-glow { 0%, 100% { opacity: 0.5; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.1); } }
@keyframes fx-shake { 0%, 18%, 74%, 100% { opacity: 0; transform: scale(0.4); } 28%, 64% { opacity: 1; transform: scale(1) rotate(0deg); } 36% { transform: scale(1) rotate(-12deg); } 44% { transform: scale(1) rotate(10deg); } 52% { transform: scale(1) rotate(-6deg); } }
@keyframes fx-pass { 0%, 6% { opacity: 0; transform: translate(-150%, 10%) scale(0.7) rotate(-10deg); } 14% { opacity: 1; } 46% { transform: translate(0, -70%) scale(1) rotate(6deg); } 78% { opacity: 1; transform: translate(150%, 10%) scale(0.9) rotate(-4deg); } 90%, 100% { opacity: 0; transform: translate(150%, 10%) scale(0.5); } }
@keyframes fx-land { 0%, 74%, 100% { opacity: 0; transform: scale(0.3) rotate(-20deg); } 84% { opacity: 1; transform: scale(1.1) rotate(0deg); } 94% { opacity: 0; transform: scale(1.3) rotate(15deg); } }
@keyframes fx-snuff { 0%, 16%, 92%, 100% { opacity: 0; transform: translateY(20%) scale(0.5); } 30%, 80% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes fx-fall { 0% { opacity: 0; transform: translateY(-80%) rotate(0deg); } 20%, 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(150%) rotate(120deg); } }
@keyframes fx-scan { 0%, 100% { transform: translateX(-30%) rotate(-10deg); } 50% { transform: translateX(30%) rotate(8deg); } }
@keyframes fx-sweat { 0%, 30% { opacity: 0; transform: translateY(-30%) scale(0.5); } 42% { opacity: 1; transform: translateY(0) scale(1); } 80% { opacity: 1; transform: translateY(60%) scale(0.9); } 100% { opacity: 0; transform: translateY(90%) scale(0.8); } }
@keyframes fx-zap { 0%, 40%, 70%, 100% { opacity: 0; transform: scale(0.4) rotate(-10deg); } 48% { opacity: 1; transform: scale(1.2) rotate(4deg); } 52% { opacity: 0.4; } 56% { opacity: 1; transform: scale(1) rotate(-2deg); } }

/* дуальные: тянутся друг к другу, сердечки, пазл сходится */
.act-dual .duo-a { --p0: translateX(5%) rotate(4deg); --p1: translateX(9%) rotate(7deg); }
.act-dual .duo-b { --p0: translateX(-5%) rotate(-4deg); --p1: translateX(-9%) rotate(-7deg); }
.act-dual .fx-1, .act-dual .fx-2 { top: 36%; width: 12%; animation: fx-rise 4s ease-out infinite; }
.act-dual .fx-2 { left: 57%; width: 9%; animation-delay: -2s; }
.act-dual .fx-3 { top: 5%; width: 15%; animation: fx-pop 5s var(--spring) infinite; }
/* активация: подпрыгивают по очереди, искры и ноты */
.act-activation { --mv: duo-beat; --dur: 1.8s; }
.act-activation .duo-a { --p0: rotate(3deg); --p1: translateY(-7%) rotate(5deg); }
.act-activation .duo-b { --p0: rotate(-3deg); --p1: translateY(-7%) rotate(-5deg); --del: -0.9s; }
.act-activation .fx-1 { top: 22%; animation: fx-burst 0.9s ease-out infinite; }
.act-activation .fx-2 { left: 44%; top: 34%; width: 11%; animation: fx-notes 3s ease-out infinite; }
/* зеркальные: спорят по очереди, у каждого своя реплика */
.act-mirror { --mv: duo-beat; --dur: 4s; }
.act-mirror .duo-a { --p0: none; --p1: translateX(4%) rotate(5deg); }
.act-mirror .duo-b { --p0: none; --p1: translateX(-4%) rotate(-5deg); --del: -2s; }
.act-mirror .fx-1, .act-mirror .fx-2 { top: 5%; left: 26%; width: 14%; animation: fx-say 4s ease-out infinite; }
.act-mirror .fx-2 { left: 74%; scale: -1 1; animation-delay: -2s; }
/* полудуальные: тянутся, но замирают на полпути, сердце не склеивается */
.act-semidual { --dur: 4.5s; }
.act-semidual .duo-a { --p0: rotate(3deg); --p1: translateX(7%) rotate(6deg); }
.act-semidual .duo-b { --p0: rotate(-3deg); --p1: translateX(-7%) rotate(-6deg); }
.act-semidual .fx-1 { top: 22%; width: 15%; animation: fx-throb 4.5s ease-in-out infinite; }
/* миражные: мечтательно покачиваются вразнобой, облако */
.act-mirage { --dur: 6s; }
.act-mirage .duo-a { --p0: rotate(-2deg); --p1: translateY(-3%) rotate(1.5deg); }
.act-mirage .duo-b { --p0: rotate(2deg); --p1: translateY(-3%) rotate(-1.5deg); --del: -3s; }
.act-mirage .fx-1 { top: 7%; width: 18%; animation: fx-drift 7s ease-in-out infinite; }
.act-mirage .fx-2 { left: 63%; top: 22%; width: 9%; animation: fx-twinkle 3s ease-in-out infinite; }
/* тождественные: кивают в такт, одна мысль приходит обоим */
.act-identity { --mv: duo-beat; --dur: 3s; }
.act-identity .duo-a { --p0: none; --p1: translateY(2%) rotate(3deg); }
.act-identity .duo-b { --p0: none; --p1: translateY(2%) rotate(-3deg); }
.act-identity .fx-1, .act-identity .fx-2 { top: 5%; left: 27%; width: 13%; animation: fx-flash 3s ease-out infinite; }
.act-identity .fx-2 { left: 73%; }
/* родственные: вместе тянутся к общей идее, потом расходятся в способах */
.act-kindred { --dur: 4s; }
.act-kindred .duo-a { --p0: rotate(-1deg); --p1: translateX(5%) rotate(6deg); }
.act-kindred .duo-b { --p0: rotate(1deg); --p1: translateX(-5%) rotate(-6deg); }
.act-kindred .fx-1 { top: 7%; width: 13%; filter: drop-shadow(0 0 14px rgba(255, 210, 63, 0.6)); animation: fx-glow 4s ease-in-out infinite; }
/* деловые: ровно рядом, вежливый кивок и рукопожатие */
.act-business { --mv: duo-beat; --dur: 3.6s; }
.act-business .duo-a { --p0: none; --p1: translateY(2.5%) rotate(2deg); }
.act-business .duo-b { --p0: none; --p1: translateY(2.5%) rotate(-2deg); }
.act-business .fx-1 { top: 27%; width: 16%; animation: fx-shake 3.6s ease-out infinite; }
/* квазитождественные: недоумённо склоняют голову, вопросы по очереди */
.act-quasi { --mv: duo-beat; --dur: 4s; }
.act-quasi .duo-a { --p0: rotate(-3deg); --p1: translateY(1%) rotate(-8deg); }
.act-quasi .duo-b { --p0: rotate(3deg); --p1: translateY(1%) rotate(8deg); --del: -2s; }
.act-quasi .fx-1, .act-quasi .fx-2 { top: 5%; left: 25%; width: 12%; animation: fx-say 4s ease-out infinite; }
.act-quasi .fx-2 { left: 75%; animation-delay: -2s; }
/* заказ: заказчик выше и передаёт идею-подарок, подзаказный подпрыгивает, поймав её */
.act-request { --dur: 3.4s; }
.act-request .duo-a { --p0: translateY(-4%) scale(1.04) rotate(3deg); --p1: translateY(-4%) scale(1.04) rotate(6deg); }
.act-request .duo-b { --mv: duo-beat; --p0: translateY(4%) scale(0.95) rotate(-4deg); --p1: translateY(-1%) scale(0.95) rotate(-6deg); --del: -1.87s; }
.act-request .fx-1 { top: 36%; width: 14%; animation: fx-pass 3.4s ease-in-out infinite; }
.act-request .fx-2 { left: 72%; top: 28%; width: 12%; animation: fx-land 3.4s ease-out infinite; }
/* погашение: оба напирают — и гаснут, как свеча */
.act-extinguish { --mv: duo-push; --dur: 3.6s; }
.act-extinguish .duo-a { --p0: none; --p1: translateX(7%) rotate(7deg); --p2: translateX(-2%) rotate(-3deg); }
.act-extinguish .duo-b { --p0: none; --p1: translateX(-7%) rotate(-7deg); --p2: translateX(2%) rotate(3deg); }
.act-extinguish .fx-1 { top: 27%; width: 15%; animation: fx-snuff 3.6s ease-in-out infinite; }
/* суперэго: держат дистанцию, церемонный поклон, холодок */
.act-superego .duo-a { --p0: translateX(-7%); --p1: translateX(-7%) translateY(2%) rotate(3deg); }
.act-superego .duo-b { --p0: translateX(7%); --p1: translateX(7%) translateY(2%) rotate(-3deg); }
.act-superego .fx-1, .act-superego .fx-2 { top: 14%; width: 10%; animation: fx-fall 5s linear infinite; }
.act-superego .fx-2 { left: 56%; width: 7%; animation-delay: -2.5s; }
/* ревизия: ревизор крупнее и нависает с лупой, подревизный отклоняется, ёжится и потеет */
.act-supervision { --dur: 3s; }
.act-supervision .duo-a { --p0: translateY(-3%) scale(1.06) rotate(5deg); --p1: translateX(3%) translateY(-3%) scale(1.06) rotate(8deg); }
.act-supervision .duo-b { --mv: duo-shiver; --p0: translateY(4%) scale(0.93) rotate(4deg); --p1: translateY(4%) scale(0.93) rotate(6deg); --p2: translateY(4%) scale(0.93) rotate(2.5deg); }
.act-supervision .fx-1 { left: 68%; top: 16%; width: 15%; animation: fx-scan 3s ease-in-out infinite; }
.act-supervision .fx-2 { left: 89%; top: 20%; width: 7%; animation: fx-sweat 3s ease-in infinite; }
/* конфликт: стоят спиной друг к другу, вздрагивают от молнии */
.act-conflict { --mv: duo-jolt; --dur: 2.8s; }
.act-conflict .duo-a { --p0: translateX(-6%) rotate(-5deg); --p1: translateX(-9%) rotate(-9deg); --p2: translateX(-5%) rotate(-3deg); }
.act-conflict .duo-b { --p0: translateX(6%) rotate(5deg); --p1: translateX(9%) rotate(9deg); --p2: translateX(5%) rotate(3deg); }
.act-conflict .duo-a .char { transform: scaleX(-1); }
.act-conflict .duo-b .char { transform: none; }
.act-conflict .fx-1 { top: 25%; width: 18%; animation: fx-zap 2.8s ease-out infinite; }

/* ---------- тест: картинка подпрыгивает при выборе, кольцо прогресса — на подбадривании ---------- */
@keyframes q-pick { 0% { transform: scale(1); } 40% { transform: scale(1.18) rotate(-6deg); } 100% { transform: scale(1.06); } }
@keyframes t-pop { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.3) rotate(-10deg); } }

/* ---------- отношения типа: типы проявляются по очереди — один раз при появлении и при смене типа, без петель ---------- */
.relmap.in .rm-node, .relmap.in-again .rm-node { animation: rm-pop 0.45s var(--out) backwards; animation-delay: calc(0.08s + var(--k) * 22ms); }
@keyframes rm-pop { from { opacity: 0; translate: 0 8px; } }

/* ---------- пауза вне экрана и щадящий режим ---------- */
.is-off, .is-off * { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1; translate: none; }
  .stack-card, .mq-track, .hero-mag, .hero-look { transform: none !important; }
}