/* ==========================================================================
   ТРИУМФ — reaktor.css (вариант А2 «Реактор», v2)
   Поверх ruki.css: холст реактора на весь первый экран; струи идут от меток
   кончиков пальцев [data-tip]; при наведении рука поворачивается к призыву.
   На телефоне руки сходятся по диагонали к реактору.
   ========================================================================== */
.stage--reaktor .ruki-spark{ display:none; }
.ruki-reaktor{
  position:absolute; inset:0; z-index:4; pointer-events:none;
  opacity:0; transition:opacity 1.4s var(--ease) 1.1s;
}
.is-in .ruki-reaktor{ opacity:1; }
.ruki-reaktor canvas{ position:absolute; inset:0; width:100%; height:100%; }
/* без JS — тихое кольцо CSS-ом на оси */
.ruki-reaktor::before{
  content:""; position:absolute; left:50%; top:var(--axis); width:64px; height:64px; border-radius:50%;
  transform:translate(-50%, -50%);
  border:1.5px solid rgba(190,215,255,.45);
  background:radial-gradient(circle, #fff 0%, #c33c46 32%, rgba(163,47,54,.35) 55%, transparent 70%);
  box-shadow:0 0 34px 10px rgba(163,47,54,.35), inset 0 0 12px rgba(255,255,255,.3);
  animation:ruki-ember 3s ease-in-out infinite;
}
.stage--reaktor.js-reaktor .ruki-reaktor::before{ display:none; }

/* метки кончиков пальцев (внутри .bob — наследуют повороты и параллакс) */
.ruki-hand .bob{ position:relative; }
.ruki-hand [data-tip]{ position:absolute; width:2px; height:2px; pointer-events:none; }
.ruki-hand--ai [data-tip]{ left:65.5%; top:43.6%; }
.ruki-hand--human [data-tip]{ left:36.4%; top:42.7%; }

/* руки: при наведении своя рука поворачивается вниз, к призыву, и указывает на него */
.stage--reaktor .ruki-hand .bob{ transition:transform 1.8s var(--ease); transform-origin:6% 55%; }
.stage--reaktor .ruki-hand--human .bob{ transform-origin:94% 55%; }
.stage--reaktor .ruki-hand .bob{ animation:none; }          /* дыхание переносим на обёртку руки */
.stage--reaktor .ruki-hand{ animation:ruki-bob-soft 12s ease-in-out infinite; }
.stage--reaktor .ruki-hand--human{ animation-delay:-6s; }
@keyframes ruki-bob-soft{ 0%,100%{ margin-top:0 } 50%{ margin-top:-6px } }
.stage--reaktor[data-hover="ai"] .ruki-hand--ai .bob{ transform:rotate(-11deg) translateX(1.2%); }
.stage--reaktor[data-hover="human"] .ruki-hand--human .bob{ transform:rotate(11deg) translateX(-1.2%); }
/* фон плавно уходит в цвет стороны */
.stage--reaktor .ruki-tint{ transition:background 1.6s var(--ease), opacity 1.6s var(--ease); }
/* призыв откликается на жест; стрелки всегда ← и → */
.stage--reaktor .ruki-hint{ transition:border-color 1.2s var(--ease), background 1.2s var(--ease), color 1.2s var(--ease), box-shadow 1.2s var(--ease), opacity .8s var(--ease) 1.6s; }
.stage--reaktor[data-hover="ai"] .ruki-hint{ border-color:rgba(160,200,255,.7); color:var(--fg); box-shadow:0 0 30px -6px rgba(130,185,255,.55); }
.stage--reaktor[data-hover="human"] .ruki-hint{ border-color:rgba(255,170,90,.7); color:var(--fg); box-shadow:0 0 30px -6px rgba(255,150,70,.55); }

/* ---------- телефон: руки сходятся по диагонали к реактору ---------- */
@media (max-width: 860px){
  /* сцена занимает средний блок между словом и подсказкой (см. ruki.css) */
  .stage--reaktor{ --axis:42%; --w:min(88vw, 460px); }
  .stage--reaktor .ruki-hand--ai{ left:-12vw; top:31%; transform:translate3d(var(--sx), -50%, 0); }
  .stage--reaktor .ruki-hand--human{ right:-12vw; top:53%; transform:translate3d(var(--sx), -50%, 0); }
  .stage--reaktor .ruki-hand--ai .bob{ transform:rotate(22deg); transform-origin:6% 55%; }
  .stage--reaktor .ruki-hand--human .bob{ transform:rotate(22deg); transform-origin:94% 55%; }
  .stage--reaktor[data-hover] .ruki-hand .bob{ transform:rotate(22deg); }
  .ruki-hint .arrow{ display:inline-block; }
}
@media (prefers-reduced-motion: reduce){
  .stage--reaktor .ruki-hand, .stage--reaktor .ruki-hand .bob{ animation:none !important; transition:none !important; }
  .ruki-reaktor::before{ animation:none; }
}