/* Источник: проект Claude Design, tokens/motion.css. Срез 14 августа 2026.
   Движение короткое и без отскока. Постоянного фонового движения в кабинете нет;
   на лендинге оно есть и обязано иметь видимый контрол паузы (WCAG 2.2.2). */
:root{
  --sc-ease:cubic-bezier(.2,.8,.2,1);
  --sc-ease-enter:cubic-bezier(.16,1,.3,1);
  --sc-dur-fast:120ms;
  --sc-dur-base:200ms;
  --sc-dur-slow:320ms;
  --sc-dur-enter:520ms;
  --sc-dur-ambient:24s;
  --sc-dir:1; /* знак инлайновой оси; в RTL меняется на -1 */

  /* Бегущее кольцо вокруг поля первого экрана - единственное место продукта, где
     цвет движется. Оборотов ровно два, потом затухание: конечная анимация короче
     пяти секунд под критерий 2.2.2 не подпадает. */
  --sc-ring-w:2px;
  --sc-ring-dur:2100ms;
  --sc-ring-turns:2;
  --sc-ring-fade:320ms;

  /* Полный оборот бегущего кольца вокруг активного поля композера. Имя НЕ --sc-dur-ring:
     на строку выше уже живёт --sc-ring-dur, это другое время и другое кольцо (лендинг,
     два оборота с затуханием). Две переменные, различающиеся перестановкой двух слов, -
     это ошибка, которую не видно при чтении. */
  --sc-dur-ring-turn:7s;

  /* Появление слоёв узкой ветки. Ящик и лист приезжают, ширма проявляется медленнее их:
     сначала темнеет фон, потом приходит панель. */
  --sc-dur-drawer:260ms;
  --sc-dur-scrim:200ms;
  --sc-dur-pop:180ms;

  --sc-pause-size:48px;
  --sc-pause-inset:var(--sc-space-24);

  /* ДВИЖЕНИЕ РЕДАКТОРОВ. Источник: `handoff-site-editor-wp/02-TOKENS.md`, срез
     24 августа 2026. В системе кабинета этих значений не было, и файл редактора уже
     ссылался на одно из них (`--sc-dur-screen`) вслепую: несуществующая переменная
     делает объявление невалидным на этапе вычисления, и весь `transition` отбрасывался
     целиком. Объявляются ровно те, что кто-то читает: переменная без потребителя -
     мёртвая строка, которая выглядит рабочей. */
  --sc-dur-instant:0ms;    /* мгновенное: скругление на холсте, ручка пипетки */
  --sc-dur-screen:260ms;   /* смена экрана панели оформления */
  --sc-dur-spring:300ms;   /* поза наведения, оживление образца */
  --sc-dur-genie:420ms;    /* разворот и сворачивание ЛЮБОГО окна редактора */
  --sc-dur-flourish:500ms; /* оборот значка «Surprise me» */
  --sc-stagger:14ms;       /* шаг задержки в сетке, суммарно не дольше 350мс */

  /* ОТСКОК - ТОЛЬКО ОБРАТИМЫЕ ПОЗЫ: наведение и оживление образца. Ко входу нового
     содержимого он не применяется никогда: вошедшее не должно качаться. */
  --sc-ease-spring:cubic-bezier(.34,1.56,.64,1);

  /* Единственное ДЛИННОЕ время в системе: лента снимка темы едет от верха страницы до
     низа. Это не переход, а показ - его читают, поэтому линейно и медленно. Больше
     нигде. Пять секунд оно не превышает, значит под критерий 2.2.2 не подпадает. */
  --sc-dur-reel:2600ms;
  --sc-ease-reel:cubic-bezier(.45,0,.55,1); /* тихо - быстрее - тихо */
}
[dir="rtl"]{--sc-dir:-1}

/* Угол кольца объявлен свойством, иначе conic-gradient не интерполируется и
   кольцо прыгает вместо вращения. Объявление обязано быть в самом раннем файле
   цепочки: свойство, объявленное позже использования, не работает. */
@property --sc-ring-angle{
  syntax:"<angle>";
  initial-value:0deg;
  inherits:false;
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    transition-duration:1ms !important;
    animation-duration:1ms !important;
    animation-iteration-count:1 !important;
  }
}