/* NextGen Robot - страница «О компании».
   Здесь живёт только приветственная анимация первого экрана: детализированная
   рука робота, которая машет. Отдельный файл, чтобы не трогать общие стили -
   подключается одной строкой в about.html и больше нигде не нужен.

   Как устроено движение:
   - весь мах делает одна группа .rwave__hand, она поворачивается вокруг
     запястья (точка 200,200 в системе координат viewBox);
   - пальцы догоняют кисть своей мелкой анимацией: у каждого свой угол покоя
     (--rot), своя длина (--len) и свой сдвиг по фазе (--fd) - из-за этого
     движение не выглядит «одним куском»;
   - transform-box для SVG по умолчанию view-box, поэтому transform-origin
     задаём прямо в координатах viewBox (указан явно - так понятнее).

   Цвет берём токенами (tokens.css): отдельной палитры у анимации нет, значит
   на тёмной плашке (.panel--dark, .contacts и другие тёмные контексты, где
   токены переопределены) рука перекрасится вместе со страницей. */

/* ---------- рамка первого экрана ---------- */

/* Блок встаёт на то же место сетки, что и снимок: .page-head__media уже даёт
   скругление, тень и обрезку по углам. Здесь - только подложка и размер. */
.page-head__media--art {
  background: var(--surface);
  border: 1px solid var(--border);
}

.rwave {
  display: block;
  width: 100%;
  height: auto;          /* пропорции держит viewBox: 4/3, как у снимка */
}

/* Локальная палитра анимации: имена короткие, значения - общие токены сайта. */
.rwave {
  --rw-metal-1: var(--white);
  --rw-metal-2: var(--surface-2);
  --rw-edge: var(--border);
  --rw-dark: var(--ink);
  --rw-dark-2: var(--ink-2);
  --rw-accent: var(--accent);
  --rw-accent-soft: var(--accent-soft);
}

/* ---------- фон «как на сайте» ---------- */

.rwave__bg { fill: var(--surface); }
.rwave__glow { fill: var(--rw-accent-soft); }
.rwave__grid { stroke: var(--rw-edge); stroke-width: 1; fill: none; opacity: .7; }
.rwave__floor { fill: var(--rw-edge); opacity: .45; }

/* ---------- металл, шарниры, кабели ---------- */

.rwave__part { fill: url(#rwave-metal); stroke: var(--rw-edge); stroke-width: 1.4; }
.rwave__panel { fill: var(--rw-accent-soft); stroke: var(--rw-edge); stroke-width: 1.2; }
.rwave__tip { fill: url(#rwave-metal); stroke: var(--rw-edge); stroke-width: 1.4; }
.rwave__gloss { fill: var(--white); opacity: .75; }
/* Шарнир - светлая шайба с тёмной осью: дробить руку контрастными точками
   не стоит, иначе пальцы читаются как гирлянда, а не как механизм. */
.rwave__joint { fill: var(--rw-metal-2); stroke: var(--rw-edge); stroke-width: 1.2; }
.rwave__pin { fill: var(--rw-dark-2); opacity: .5; }
/* Запястье - единственный тёмный узел, вокруг него и идёт мах. */
.rwave__hub { fill: var(--rw-dark); }
.rwave__pin--hub { fill: var(--rw-accent); opacity: 1; }
.rwave__vent { stroke: var(--rw-edge); stroke-width: 2; stroke-linecap: round; }
.rwave__cable { fill: none; stroke: var(--rw-dark-2); stroke-width: 5; stroke-linecap: round; opacity: .75; }
.rwave__cable--accent { stroke: var(--rw-accent); stroke-width: 3.5; opacity: .55; }
.rwave__band { fill: var(--rw-accent); opacity: .85; }
.rwave__bolt { fill: var(--rw-dark-2); opacity: .55; }
.rwave__led { fill: var(--rw-accent); }

/* Тонкие стопы градиента металла - тоже на токенах. */
.rwave__metal-1 { stop-color: var(--rw-metal-1); }
.rwave__metal-2 { stop-color: var(--rw-metal-2); }

/* ---------- сам мах ---------- */

/* Кисть: три маха с замахом, потом пауза примерно на две секунды и повтор. */
@keyframes rwave-hand {
  0%, 4%   { transform: rotate(0deg); }
  10%      { transform: rotate(-5deg); }
  18%      { transform: rotate(15deg); }
  26%      { transform: rotate(-12deg); }
  34%      { transform: rotate(15deg); }
  42%      { transform: rotate(-12deg); }
  50%      { transform: rotate(11deg); }
  58%, 100% { transform: rotate(0deg); }
}

/* Пальцы: чуть подгибаются на махе. Угол покоя и длина у каждого свои,
   поэтому в кадрах стоят переменные, а не готовые числа. */
@keyframes rwave-finger {
  0%, 6%, 58%, 100% { transform: translate(var(--x), var(--y)) rotate(var(--rot)) scaleY(var(--len)); }
  22%, 40%          { transform: translate(var(--x), var(--y)) rotate(calc(var(--rot) + var(--flex))) scaleY(var(--len)); }
}

/* Огонёк на ладони: короткая вспышка на каждом махе. */
@keyframes rwave-led {
  0%, 8%, 56%, 100% { opacity: .35; }
  20%, 38%          { opacity: 1; }
}

.rwave__hand {
  transform-box: view-box;
  transform-origin: 200px 200px;   /* запястье */
  animation: rwave-hand 4.8s cubic-bezier(.45, .05, .35, 1) infinite;
}

.rwave__finger {
  transform-box: view-box;
  transform-origin: 0 0;           /* положение задаёт translate в самом transform */
  transform: translate(var(--x), var(--y)) rotate(var(--rot)) scaleY(var(--len));
  animation: rwave-finger 4.8s ease-in-out infinite;
  animation-delay: var(--fd, 0s);
}

.rwave__led { animation: rwave-led 4.8s ease-in-out infinite; }

/* Основание, угол покоя, длина и подгиб каждого пальца. Правится руками:
   --x/--y - точка сустава у ладони, --rot - разворот, --len - длина,
   --flex - насколько палец подгибается на махе. */
.rwave__finger--1 { --x: 178px; --y: 120px; --rot: -13deg; --len: .92; --flex: -7deg; --fd: 0s; }
.rwave__finger--2 { --x: 196px; --y: 114px; --rot: -4deg;  --len: 1.04; --flex: -6deg; --fd: .05s; }
.rwave__finger--3 { --x: 213px; --y: 116px; --rot: 5deg;   --len: 1;    --flex: -6deg; --fd: .1s; }
.rwave__finger--4 { --x: 228px; --y: 124px; --rot: 14deg;  --len: .86;  --flex: -8deg; --fd: .15s; }
/* Большой палец отставлен в сторону и короче остальных. */
.rwave__finger--thumb { --x: 172px; --y: 180px; --rot: -62deg; --len: .78; --flex: -5deg; --fd: .08s; }

/* ---------- бережный режим ---------- */

/* prefers-reduced-motion: ничего не движется, остаётся статичная поза -
   поднятая раскрытая ладонь с лёгким наклоном, то есть тот же жест. */
@media (prefers-reduced-motion: reduce) {
  .rwave__hand {
    animation: none;
    transform: rotate(8deg);
  }
  .rwave__finger { animation: none; }
  .rwave__led { animation: none; opacity: 1; }
}

/* ---------- узкий экран ---------- */

/* На телефоне сетка первого экрана уже сложена в одну колонку (market.css).
   Картинке остаётся не вырасти выше экрана и не вылезти за край контейнера. */
@media (max-width: 980px) {
  .page-head__media--art { max-width: 420px; margin-inline: auto; }
}

@media (max-width: 420px) {
  .rwave { max-height: 62vh; }
}