/* ===========================================================================
   motion-emil.css - слой движения по скиллу emil-design-eng.
   Подключается ПОСЛЕДНИМ. Ни один чужой файл не правится.

   ЧТО ГОВОРИТ СКИЛЛ (и что из этого следует здесь):
   1. У каждого движения обязан быть ответ на вопрос «почему это движется».
      Движение без назначения - украшение, и если человек видит его часто,
      его надо снять, а не смягчить.
   2. Отклик важнее красоты: нажатие обязано быть подтверждено, иначе
      интерфейс кажется глухим.
   3. Кривые: вход и выход - ease-out; движение по экрану - ease-in-out;
      ease-in для интерфейса не применяется никогда. Встроенные кривые слабы,
      берутся усиленные.
   4. Появление из ничего запрещено: ничто в реальном мире не возникает из
      нулевого размера. Вход идёт с малого сдвига плюс непрозрачность.
   5. Внутри интерфейса до 300 мс. Нажатие 100-160 мс, морфинг 150-260 мс.
   6. Только transform и opacity. Всё гасится по prefers-reduced-motion,
      но СМЫСЛ остаётся: снимается движение, а не состояние.

   ЗАМЕР ДО ПРАВКИ (живая страница, снимки transform подряд):
   - перелив кнопок .btn::before - ЖИВОЙ, pb-glint 8s, 3 различных значения
     transform, доля кадров со сменой 0.22. Это и есть контрольная проба
     прибора: он умеет увидеть движение, значит его «ноль» на других
     элементах - факт, а не слепота.
   - .swap .ico - transform none за весь прогон, при этом сама .swap крутится
     на 180 градусов при НАВЕДЕНИИ. Движение стоит не на том событии.
   - .faq__body - transform none, animationName none: тринадцать вопросов
     раскрываются рывком, тогда как соседний аккордеон шагов сделан образцово.
   =========================================================================== */

:root{
  /* Усиленные кривые из скилла: встроенных ease-out/ease-in-out не хватает. */
  --em-out:    cubic-bezier(.23, 1, .32, 1);
  --em-inout:  cubic-bezier(.77, 0, .175, 1);
  --em-press:  140ms;   /* подтверждение нажатия */
  --em-morph:  260ms;   /* поворот, переезд по экрану */
  --em-enter:  220ms;   /* появление содержимого */
}

/* ---------------------------------------------------------------------------
   1. КНОПКА СМЕНЫ НАПРАВЛЕНИЯ: движение переезжает с наведения на ДЕЙСТВИЕ.

   Было: .swap:hover{transform:rotate(180deg)} за 140 мс. Кнопка делала полный
   оборот от того, что на неё просто навели, а когда её действительно нажали и
   направление сменилось - у самой кнопки не оставалось ни одного признака
   нового состояния. По скиллу это ровно тот случай, когда назначение движения
   «выглядит круто»: холостой оборот человек видит десятки раз за сессию, а
   единственное событие, ради которого кнопка существует, проходит немо.

   Стало: поворот привязан к РЕАЛЬНОМУ состоянию калькулятора и ОСТАЁТСЯ в нём.
   Стрелки смотрят в ту сторону, в которую идёт обмен. Наведение оставляет
   сдержанный намёк на 12 градусов вместо 180 - по скиллу частые наведения
   не убираются совсем, а резко ужимаются.
   Поворот - это движение по экрану, поэтому ease-in-out, а не ease-out.
--------------------------------------------------------------------------- */
.swap{
  transition:border-color var(--t-fast), background var(--t-fast),
             transform var(--em-press) var(--em-out);
}
.swap .ico{
  transition:transform var(--em-morph) var(--em-inout);
  transform-origin:50% 50%;
}

/* Холостой оборот снимаем. Отклик на нажатие сохраняем - он единственный
   канал подтверждения на телефоне. */
.swap:hover{ transform:none; }
.swap:active,
.swap:hover:active{ transform:scale(.94); }

@media (hover: hover) and (pointer: fine){
  .swap:hover .ico{ transform:rotate(12deg); }
}

/* Состояние. Спецификость выше hover-намёка, поэтому под курсором стрелки
   не отскакивают в исходное. */
.calc:has(.seg__btn[data-dir="usdt_rub"].is-active) .swap .ico{
  transform:rotate(180deg);
}
@media (hover: hover) and (pointer: fine){
  .calc:has(.seg__btn[data-dir="usdt_rub"].is-active) .swap:hover .ico{
    transform:rotate(192deg);
  }
}

/* ---------------------------------------------------------------------------
   2. ВОПРОСЫ: раскрытие перестаёт быть рывком.

   Тринадцать элементов details. Тело появлялось мгновенно - по скиллу это
   «jarring change», ощущение поломки. Рядом, у аккордеона шагов сделки, тот
   же паттерн выполнен образцово: коробка открывается, текст въезжает следом.
   Повторяем ту же логику, но в границах, которые даёт details, - только
   transform и opacity, вход с малого сдвига, а не из нуля.

   Честное ограничение: обратного хода у details нет, закрытие браузер
   выполняет мгновенно. Асимметрию «вход медленнее, выход быстрее» здесь
   обеспечивает сам элемент, а не стиль.
--------------------------------------------------------------------------- */
@keyframes em-faq-in{
  from{ opacity:0; transform:translateY(-6px); }
  to  { opacity:1; transform:translateY(0); }
}
.faq__item[open] .faq__body{
  animation:em-faq-in var(--em-enter) var(--em-out) both;
}

/* ---------------------------------------------------------------------------
   3. СТРЕЛКА ВОПРОСА: два свойства перестают спорить.

   Было: transform:rotate(45deg) -> rotate(-135deg) едет плавно, а margin-top
   -6px -> -2px прыгает скачком, потому что в transition его нет. Скилл прямо
   называет это дефектом: при разъезде свойств глаз видит два объекта вместо
   одного поворачивающегося. В замедлении это заметно сразу.

   Стало: поле не трогается вовсе, вертикальная поправка в 4px ушла внутрь
   transform. Едет одно свойство, синхронно с собой.
--------------------------------------------------------------------------- */
.faq__item summary::after{
  transition:transform var(--em-press) var(--em-out);
}
.faq__item[open] summary::after{
  margin-top:-6px;
  transform:translateY(4px) rotate(-135deg);
}

/* ---------------------------------------------------------------------------
   4. ГЛАВНАЯ КНОПКА НА ТЕЛЕФОНЕ ОТВЕЧАЕТ СЛАБЕЕ ВСЕХ ОСТАЛЬНЫХ.

   Замер каскада: .btn:active:hover даёт scale(.97), но :hover на тач-экране
   не наступает, и в руках у человека работает голое .btn:active - сдвиг на
   один пиксель. Получалось, что карточка навигации и булавка карты отвечают
   на палец заметнее, чем кнопка перехода к боту. Скилл: нажимаемый элемент
   обязан отвечать масштабом 0.95-0.98, и связность важна - разный отклик у
   равных по смыслу элементов читается как небрежность.

   Микросдвиг сохранён: он был частью принятого ощущения кнопки.
--------------------------------------------------------------------------- */
.btn{
  transition:transform var(--em-press) var(--em-out), background var(--t-fast),
             border-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
}
.btn:active,
.btn:active:hover{ transform:translateY(1px) scale(.972); }

/* ---------------------------------------------------------------------------
   5. ГЛУШИТЕЛЬ ДВИЖЕНИЯ.

   Скилл: уменьшенное движение - это меньше движения, а не потеря смысла.
   Поэтому стрелки свапа ОСТАЮТСЯ повёрнутыми по направлению обмена и стрелка
   раскрытого вопроса ОСТАЁТСЯ развёрнутой вверх - снимается только переезд.
   Подтверждение нажатия здесь уже возвращено чужим слоем через яркость,
   поэтому масштаб снимаем и мы, чтобы два ответа не наложились.
--------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  /* У этих двух в переходе стоит ТОЛЬКО transform, поэтому снять его целиком
     и значит «снять переезд». Ничего цветового здесь не теряется. */
  .swap .ico,
  .faq__item summary::after{ transition:none !important; }

  /* 🔴 ПОПРАВКА СКЕПТИКА 26.08. Здесь стояло .btn{transition:none !important},
     и это отменяло не только переезд, но и ЧЕТЫРЕ цветовых перехода кнопки.
     Замер до поправки: обычное движение - transitionProperty
     «transform, background, border-color, color, box-shadow» по 0.14s;
     при reduce - «none», 0s. То есть фон, кант, цвет текста и тень начинали
     переключаться рывком.
     Скилл emil-design-eng, раздел prefers-reduced-motion, дословно: «Reduced
     motion means fewer and gentler animations, not zero. Keep opacity and
     color transitions that aid comprehension. Remove movement and position
     animations.» Снимаем ровно движение: transform уходит, цвет остаётся. */
  .btn{
    transition:background var(--t-fast), border-color var(--t-fast),
               color var(--t-fast), box-shadow var(--t-fast) !important;
  }

  .swap:hover .ico,
  .calc:has(.seg__btn[data-dir="usdt_rub"].is-active) .swap:hover .ico{
    transform:rotate(180deg);
  }
  .calc:not(:has(.seg__btn[data-dir="usdt_rub"].is-active)) .swap:hover .ico{
    transform:none;
  }

  .faq__item[open] .faq__body{ animation:none !important; opacity:1; transform:none; }

  .btn:active,
  .btn:active:hover,
  .swap:active,
  .swap:hover:active{ transform:none; }
}