/* ==========================================================================
   MOSEPDM — движение. Заметное, но без перегруза: только opacity/transform,
   выразительная кривая --ease-expo, длительности 0.6–1.2s.
   prefers-reduced-motion гасится глобально (base.css) + страховка в конце.
   ========================================================================== */

/* ---------- Вход первого экрана при загрузке ------------------------------- */

@keyframes m-rise {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}
@keyframes m-photo {
  from { opacity: 0; transform: scale(1.08); }
  to   { opacity: 1; transform: none; }
}

.hero__title      { animation: m-rise .7s var(--ease-expo) both; }
.hero__lead       { animation: m-rise .7s var(--ease-expo) .12s both; }
.hero__aside .btn { animation: m-rise .7s var(--ease-expo) .22s both; }
.hero__media      { animation: m-rise .8s var(--ease-expo) .25s both; }
.hero__media .hero__img { animation: m-photo 1.2s var(--ease-expo) .25s both; }
.hero__badges .badge:nth-child(1) { animation: m-rise .6s var(--ease-expo) .55s both; }
.hero__badges .badge:nth-child(2) { animation: m-rise .6s var(--ease-expo) .65s both; }
.hero__badges .badge:nth-child(3) { animation: m-rise .6s var(--ease-expo) .75s both; }

/* ---------- Появление секций при скролле ----------------------------------- */

/* заголовки и одиночные блоки — выше и медленнее, чем было */
[data-reveal] {
  transform: translateY(34px);
  transition: opacity .7s var(--ease-expo), transform .7s var(--ease-expo);
}

/* Каскад в сетках: контейнер не двигается — карточки по очереди,
   с лёгким масштабом, чтобы движение читалось */
:is(#colors-grid, .steps, .perks-band__row, .clients__grid,
    .order__grid, .docs__grid, .quality__list, .stock__list, .mix-grid)[data-reveal] {
  opacity: 1;
  transform: none;
  transition: none;
}
:is(#colors-grid, .steps, .perks-band__row, .clients__grid,
    .order__grid, .docs__grid, .quality__list, .stock__list, .mix-grid)[data-reveal] > * {
  opacity: 0;
  transform: translateY(30px) scale(.97);
  transition: opacity .65s var(--ease-expo), transform .65s var(--ease-expo);
}
:is(#colors-grid, .steps, .perks-band__row, .clients__grid,
    .order__grid, .docs__grid, .quality__list, .stock__list, .mix-grid)[data-reveal].is-revealed > * {
  opacity: 1;
  transform: none;
}
:is(#colors-grid, .steps, .perks-band__row, .clients__grid,
    .order__grid, .docs__grid, .quality__list, .stock__list, .mix-grid)[data-reveal] > :nth-child(2) { transition-delay: .1s; }
:is(#colors-grid, .steps, .perks-band__row, .clients__grid,
    .order__grid, .docs__grid, .quality__list, .stock__list, .mix-grid)[data-reveal] > :nth-child(3) { transition-delay: .2s; }
:is(#colors-grid, .steps, .perks-band__row, .clients__grid,
    .order__grid, .docs__grid, .quality__list, .stock__list, .mix-grid)[data-reveal] > :nth-child(4) { transition-delay: .3s; }
:is(#colors-grid, .steps, .perks-band__row, .clients__grid,
    .order__grid, .docs__grid, .quality__list, .stock__list, .mix-grid)[data-reveal] > :nth-child(5) { transition-delay: .4s; }
:is(#colors-grid, .steps, .perks-band__row, .clients__grid,
    .order__grid, .docs__grid, .quality__list, .stock__list, .mix-grid)[data-reveal] > :nth-child(n+6) { transition-delay: .5s; }

/* ---------- Микро-отклики -------------------------------------------------- */

/* стрелка в кнопке уезжает вправо */
.btn__arrow { transition: transform .25s var(--ease-expo); }
.btn:hover .btn__arrow, .btn:focus-visible .btn__arrow { transform: translateX(4px); }

/* нажатие на кнопки слайдеров ощущается */
.case-btn, .circle-btn, .mslider__btn, .mix-tab, .mix-tool {
  transition: transform var(--dur-fast) var(--ease),
              opacity var(--dur-base) var(--ease),
              background-color var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease),
              color var(--dur-base) var(--ease);
}
.case-btn:active, .circle-btn:active, .mslider__btn:active,
.mix-tab:active, .mix-tool:active { transform: scale(.92); }

/* прогресс мобильных слайдеров движется плавно */
.mslider__bar i { transition: left .2s linear, width .2s linear; }

/* только устройства с курсором — зум фото и подъём иллюстраций */
@media (hover: hover) and (pointer: fine) {
  .client-card { overflow: hidden; }
  .client-card img,
  .doc-card__preview img,
  .case-slide__media img,
  .step__disc img { transition: transform .6s var(--ease-expo); }

  .client-card:hover img,
  .doc-card:hover .doc-card__preview img,
  .case-slide__media:hover img,
  .step:hover .step__disc img { transform: scale(1.05); }

  /* Иллюстрация преимуществ по макету и так выступает за верх карточки,
     поэтому подъём при наведении убран: картинка наезжала на соседний блок.
     В «От заявки до отгрузки» рисунок внутри карточки — там движение уместно. */
  .order-card__art { transition: transform .45s var(--ease-expo); }
  .order-card:hover .order-card__art { transform: translateY(-6px); }

  .quality-row__num { transition: opacity var(--dur-base) var(--ease); }
  .quality-row:hover .quality-row__num { opacity: .6; }
}

/* ---------- Страховка reduced-motion --------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .hero__title, .hero__lead, .hero__aside .btn, .hero__media,
  .hero__media .hero__img, .hero__badges .badge {
    animation: none;
    opacity: 1;
    transform: none;
  }
  [data-reveal] > * {
    opacity: 1 !important;
    transform: none !important;
    transition-delay: 0s !important;
  }
}