/* ============================================================
   motion.css — движение поверх готовой темы.
   Ничего не прячет без гарантии показа: дочерние элементы скрываются
   только внутри .reveal, который и так невидим до появления is-visible.
   ============================================================ */

/* Единый набор длительностей — больше нигде в файле чисел нет */
:root{
  --m-dur-fast:160ms;
  --m-dur-med:260ms;
  --m-dur-slow:650ms;
  --m-step:55ms;      /* задержка между соседними строками reveal */
}

/* Межстраничные View Transitions — там, где браузер умеет сам */
@view-transition{
  navigation:auto;
}

/* ---------- а) Логотип-страус ---------- */

/* Постоянное «дыхание бренда»: покачивание ±2px вокруг базовой позы.
   Базовая поза уже задана стилями сайта как translateX(3px) — включаем её
   в keyframes, чтобы не спорить с существующим правилом о transform. */
@keyframes m-logo-bob{
  from{transform:translate(3px,0)}
  to{transform:translate(3px,-2px)}
}
.brand__logo{
  animation:m-logo-bob 620ms ease-in-out infinite alternate;
  will-change:transform;
}

/* Наведение на весь брендовый блок — короткий рывок вперёд с возвратом.
   Анимация перекрывает bob на время рывка, потом bob продолжается:
   обе анимации заданы сразу, рывок конечный, дыхание бесконечное. */
@keyframes m-logo-dash{
  0%{transform:translate(3px,0)}
  45%{transform:translate(9px,-1px)}
  100%{transform:translate(3px,0)}
}
.brand:hover .brand__logo{
  animation:m-logo-dash var(--m-dur-med) cubic-bezier(.2,.8,.2,1),
            m-logo-bob 620ms ease-in-out infinite alternate;
}

/* ---------- б) Съезжающийся текст внутри reveal ---------- */

/* Слой оставляет авторскую прозрачность сильнее нашей анимации: незаслоённое
   правило темы побеждает любое правило слоя, а дети без своего opacity
   по-прежнему скрываются и показываются здесь. */
@layer motion-reveal{
  /* Прячем строки ТОЛЬКО внутри .reveal — он сам невидим до is-visible,
     значит при отказе JS ничего дополнительно не теряется.
     Используем отдельное свойство translate: оно не конфликтует
     с transform вёрстки. */
  @media (scripting: enabled){
    /* Без этого условия слой продолжал бы прятать детей и при выключенном JS:
       начальное opacity:1 не является объявлением и не может победить слой. */
    .reveal:not(.is-visible) > *{
      opacity:0;
      translate:0 10px;
    }
  }
  .reveal.is-visible > *{
    opacity:1;
    translate:none;
    transition:opacity var(--m-dur-slow) ease,translate var(--m-dur-slow) cubic-bezier(.2,.8,.2,1);
  }

  /* Дочерняя страховка остаётся в том же слое: она перебивает наше скрытие,
     но не авторскую незаслоённую прозрачность. */
  @media (prefers-reduced-motion: reduce){
    .reveal:not(.is-visible) > *{
      opacity:1;
      transform:none;
      translate:none;
    }
  }
}
/* Задержка нарастает по --m-step, суммарно не выше 400мс */
.reveal.is-visible > :nth-child(1){transition-delay:calc(var(--m-step)*0)}
.reveal.is-visible > :nth-child(2){transition-delay:var(--m-step)}
.reveal.is-visible > :nth-child(3){transition-delay:calc(var(--m-step)*2)}
.reveal.is-visible > :nth-child(4){transition-delay:calc(var(--m-step)*3)}
.reveal.is-visible > :nth-child(5){transition-delay:calc(var(--m-step)*4)}
.reveal.is-visible > :nth-child(6){transition-delay:calc(var(--m-step)*5)}
.reveal.is-visible > :nth-child(7){transition-delay:calc(var(--m-step)*6)}   /* 385мс — дальше не растим */
/* Седьмой ступени придерживается весь хвост списка: без диапазона восьмой и
   далее получили бы задержку по умолчанию 0 и появлялись раньше второго-седьмого */
.reveal.is-visible > :nth-child(n+7){transition-delay:calc(var(--m-step)*6)}

/* ---------- в) Карточки и плитки ---------- */

/* В покое ничего нового не назначаем: тени есть только там, где их
   задала тема (.article-card, .shot), остальным хватает подъёма.
   Сам transition в покое объявлять можно — это не вид. */
.card,.tile,.vcard,.article-card,.metric,.flow__step,.shot{
  transition:
    translate var(--m-dur-fast) cubic-bezier(.2,.8,.2,1),
    box-shadow var(--m-dur-fast) ease;
}
.card:hover,.tile:hover,.vcard:hover,.article-card:hover,
.metric:hover,.flow__step:hover,.shot:hover{
  translate:0 -3px; /* подъём без вмешательства в transform */
}

/* ---------- г) Кнопки и ссылки ---------- */
.btn,.btn--accent,.header-cta{
  transition:
    background-color var(--m-dur-fast) ease,
    color var(--m-dur-fast) ease,
    border-color var(--m-dur-fast) ease,
    transform var(--m-dur-fast) cubic-bezier(.2,.8,.2,1),
    box-shadow var(--m-dur-fast) ease;
}
.btn:active,.btn--accent:active,.header-cta:active{
  transform:translateY(1px) scale(.985); /* едва заметное вдавливание */
}

/* Ссылки в тексте тема оформляет сама (полупрозрачное подчёркивание,
   оживающее при наведении) — здесь их не трогаем. */

/* ---------- д) Плавная смена темы ---------- */
/* Класс theme-fade вешает скрипт на <html> ровно на время переключения.
   Переход только по фону, тексту и рамкам у ключевых носителей цвета —
   глобальный * слишком дорог на мобильных. */
html.theme-fade body,
html.theme-fade .header,
html.theme-fade .footer,
html.theme-fade section,
html.theme-fade .card,
html.theme-fade .tile,
html.theme-fade .vcard,
html.theme-fade .article-card,
html.theme-fade .metric,
html.theme-fade .flow__step,
html.theme-fade .shot{
  transition:
    background-color var(--m-dur-med) ease,
    color var(--m-dur-med) ease,
    border-color var(--m-dur-med) ease,
    box-shadow var(--m-dur-med) ease;
}

@media (prefers-reduced-motion: reduce){
  /* Отключаем ТОЛЬКО свои анимации и переходы, поимённо,
     не трогая чужие правила и собственный reduced-motion блок сборки.
     Блок стоит в конце файла: медиа-запрос специфичности не добавляет,
     и при равной специфичности побеждает последнее объявление. */
  .brand__logo,
  .brand:hover .brand__logo{animation:none}
  .reveal.is-visible > *{transition:none;transition-delay:0s}
  .card,.tile,.vcard,.article-card,.metric,.flow__step,.shot,
  .btn,.btn--accent,.header-cta{
    transition:none;
  }

  /* Страховка самой .reveal обязана быть вне слоя: только незаслоённое
     правило может перебить незаслоённое opacity:0 из сборки. Детей .stagger
     уже показывает reduced-motion блок самой сборки. */
  .reveal{
    opacity:1;
    transform:none;
  }
  /* Без !important: .reveal сборки имеет ту же специфичность и подключена
     раньше, а дочерняя страховка выше побеждает исходное скрытие внутри
     одного именованного слоя по порядку объявлений. */
}