/* ============================================================================
   Эффорт Групп — ЭТАП 3 «движение», 25.09.2026
   ----------------------------------------------------------------------------
   Подключается в ОБЕИХ шапках (new — главная, effort — внутренние), последним.
   Правила движения (05.09): только transform и opacity; 160 / 220 / 380 мс;
   кривая cubic-bezier(.2,.7,.2,1); без пружин; «меньше движения» — стоп,
   кроме толчка счётчика корзины (цифры и счётчики играют всегда — решение владельца).
   Разметку, тексты и адреса не меняет. Откат: снять строки с меткой eg-20260925.
   ========================================================================== */
:root {
  --m3-fast: 160ms;
  --m3-base: 220ms;
  --m3-slow: 380ms;
  --m3-ease: cubic-bezier(.2, .7, .2, 1);
}

/* --- 1. «В корзину» → «В корзине»: галочка и короткий толчок ---------------
   Класс stock-btn__link-added ставит существующий обработчик custom.js ТОЛЬКО
   после ответа сервера «OK» — анимация срабатывает ровно на успех, не на клик. */
.stock-btn__link.stock-btn__link-added::before {
  content: "✓";
  display: inline-block;
  margin-right: 6px;
  animation: m3-tick var(--m3-base) var(--m3-ease) both;
}
.stock-btn__link.stock-btn__link-added {
  animation: m3-press var(--m3-slow) var(--m3-ease);
}
@keyframes m3-tick {
  from { opacity: 0; transform: translateY(4px) scale(.6); }
  to   { opacity: 1; transform: none; }
}
@keyframes m3-press {
  0%   { transform: scale(1); }
  35%  { transform: scale(.97); }
  100% { transform: scale(1); }
}
/* Всплывающая карточка «В корзине» справа: появляется снизу, а не вспышкой. */
.product_card_basket.active {
  animation: m3-rise var(--m3-base) var(--m3-ease) both;
}
@keyframes m3-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* --- 2. Значок корзины в шапке: один толчок, когда корзина изменилась ------- */
.bx-basket.m3-bump .bx-basket-block svg {
  animation: m3-bump var(--m3-slow) var(--m3-ease);
  transform-origin: 50% 60%;
}
@keyframes m3-bump {
  0%   { transform: scale(1); }
  42%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}

/* --- 3. Вкладки карточки: одна черта, которая переезжает к выбранной -------- */
.m3-has-ink {
  position: relative;
}
.m3-has-ink .nav-link::after {
  opacity: 0 !important;          /* прежняя черта под каждой вкладкой — прячем, её роль берёт .m3-ink */
}
.m3-ink {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100px;
  height: 2px;
  background: #E85326;
  border-radius: 2px;
  transform-origin: 0 0;
  pointer-events: none;
  transition: transform var(--m3-base) var(--m3-ease);
}

/* --- 4. Разделы /catalog/: карточка отвечает на наведение ------------------
   (Плитки «Направлений» на главной НЕ трогаем: у них своё наведение с 05.09 в motion.css.) */
:is(div, article, li):has(> a.all-link):active {
  transform: scale(.98);
  transition: transform var(--m3-fast) var(--m3-ease);
}
@media (hover: hover) and (pointer: fine) {
  :is(div, article, li):has(> a.all-link) .category-art,
  a.all-link svg {
    transition: transform var(--m3-base) var(--m3-ease);
  }
  :is(div, article, li):has(> a.all-link):hover .category-art {
    transform: translateY(-3px) scale(1.03);
  }
  a.all-link:hover svg {
    transform: translateX(4px);
  }
}

/* --- 5. Карточка новости: целиком ссылка, мягкий подъём -------------------- */
/* Класс m3-news ставит motion3.js только на главной и в /news/ (блог и FAQ — после
   снимка 28.09, их не трогаем). Растянутая ссылка заголовка — разметка прежняя. */
.m3-news .single-smblog {
  position: relative;
  transition: transform var(--m3-base) var(--m3-ease);
}
.m3-news .single-smblog .smblog-content h6 a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.m3-news .single-smblog .post-readmore a,
.m3-news .single-smblog .post-date a {
  position: relative;
  z-index: 2;
}
.m3-news .single-smblog .blog-image {
  overflow: hidden;
}
.m3-news .single-smblog .blog-image img {
  transition: transform var(--m3-slow) var(--m3-ease);
}
.m3-news .single-smblog .smblog-content h6 a {
  transition: color var(--m3-fast) var(--m3-ease);
}
@media (hover: hover) and (pointer: fine) {
  .m3-news .single-smblog:hover {
    transform: translateY(-2px);
  }
  /* наведение на карточку = наведение на заголовок: цвет темы был бирюзовый #16BCDC — ставим фирменный */
  .m3-news .single-smblog:hover .smblog-content h6 a {
    color: #E85326;
  }
  .m3-news .single-smblog:hover .blog-image img {
    transform: scale(1.03);
  }
}

/* --- 6. Контакты: скопировать телефон или почту одним нажатием ------------- */
.m3-copy {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-left: 4px;
  vertical-align: middle;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #AF3C0B;
  cursor: pointer;
  transition: background-color var(--m3-fast) var(--m3-ease);
}
.m3-copy:hover {
  background: #F1EFEA;
}
.m3-copy:focus-visible {
  outline: 2px solid #E85326;
  outline-offset: 2px;
}
.m3-copy svg {
  grid-area: 1 / 1;
  transition: opacity var(--m3-fast) var(--m3-ease), transform var(--m3-fast) var(--m3-ease);
}
.m3-copy .m3-ok {
  opacity: 0;
  transform: scale(.8);
  color: #278657;
}
.m3-copy.is-ok .m3-cp {
  opacity: 0;
  transform: scale(.8);
}
.m3-copy.is-ok .m3-ok {
  opacity: 1;
  transform: none;
}
.m3-toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  z-index: 10050;
  padding: 10px 16px;
  border-radius: 999px;
  background: #1F2024;
  color: #fff;
  font: 500 14px/1.3 "Zona Pro", Arial, sans-serif;
  opacity: 0;
  transform: translate(-50%, 8px);
  transition: opacity var(--m3-base) var(--m3-ease), transform var(--m3-base) var(--m3-ease);
  pointer-events: none;
}
.m3-toast.is-on {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* --- 7. Хвосты этапа 1: «Скачать презентацию» и «Скачать реквизиты» -------- */
/* Текст в разметке строчный — капс давал стиль темы. */
.banner_about_left a[href$=".pdf"],
a.download_link {
  text-transform: none !important;
  letter-spacing: 0 !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
}

/* --- «Меньше движения»: всё стоит, содержимое на месте. Толчок счётчика — играет. */
@media (prefers-reduced-motion: reduce) {
  .stock-btn__link.stock-btn__link-added,
  .stock-btn__link.stock-btn__link-added::before,
  .product_card_basket.active,
  .m3-ink,
  .category-art,
  .m3-news .single-smblog,
  .m3-news .single-smblog .blog-image img,
  .m3-copy svg,
  .m3-toast {
    animation: none !important;
    transition: none !important;
  }
}