/*
 * mkind motion.css — только transform/opacity (Л-§2, Л-§3.7). Будет совмещено с motion.js ≤30 КБ gzip.
 */

/* --- базовые переключатели reduced-motion: урезаем, не выключаем (Л-§2) --- */
@media (prefers-reduced-motion: reduce) {
  :root { --mk-dur-fast: 1ms; --mk-dur-base: 1ms; --mk-dur-slow: 1ms; }
  .mk-parallax-layer { transform: none !important; }
}

/* --- scroll-driven reveal: animation-timeline: view(), JS добавляет .mk-reveal-io как fallback --- */
.mk-reveal {
  opacity: 0;
  transform: translateY(16px);
  animation: mk-reveal-in 0.6s var(--mk-ease-standard) forwards;
  animation-timeline: view();
  animation-range: entry 0% cover 30%;
}
@supports not (animation-timeline: view()) {
  .mk-reveal { animation: none; opacity: 0; transform: translateY(16px); }
  .mk-reveal.mk-reveal-io { opacity: 1; transform: none; transition: opacity 0.5s var(--mk-ease-standard), transform 0.5s var(--mk-ease-standard); }
}
@keyframes mk-reveal-in {
  to { opacity: 1; transform: none; }
}

/* --- пружинные микро-взаимодействия кнопок/чипов --- */
.mk-btn, .mk-chip {
  transition: transform var(--mk-dur-fast) var(--mk-ease-spring), box-shadow var(--mk-dur-base) var(--mk-ease-standard);
}
.mk-btn:active, .mk-chip:active { transform: scale(0.96); }
.mk-btn:hover { transform: translateY(-1px); box-shadow: var(--mk-shadow-brand); }
.mk-chip[aria-pressed="true"] { transform: scale(1.04); }

/* --- «полёт в корзину»: клон летит по transform от карточки к иконке корзины (координаты из JS) --- */
.mk-fly-clone {
  position: fixed;
  left: 0; top: 0;
  pointer-events: none;
  z-index: var(--mk-z-toast);
  width: 42px; height: 42px;
  border-radius: var(--mk-radius-md);
  will-change: transform, opacity;
  transition: transform 0.55s cubic-bezier(0.3, 0, 0.2, 1), opacity 0.55s ease-in;
}
.mk-fly-clone.mk-fly-done { opacity: 0; }

/* --- тilt-плитки: CSS perspective, угол задаёт JS через --tilt-x/--tilt-y --- */
.mk-tile-tilt {
  --tilt-x: 0deg; --tilt-y: 0deg;
  transform: perspective(700px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transition: transform var(--mk-dur-fast) var(--mk-ease-standard);
  transform-style: preserve-3d;
}
.mk-tile-tilt:not(:hover) { --tilt-x: 0deg; --tilt-y: 0deg; }

/* --- мегаменю: ступенчатое раскрытие столбцов --- */
.mk-megamenu-col {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity var(--mk-dur-base) var(--mk-ease-standard), transform var(--mk-dur-base) var(--mk-ease-standard);
  transition-delay: calc(var(--mk-col-i, 0) * 40ms);
}
.mk-megamenu[data-open="true"] .mk-megamenu-col { opacity: 1; transform: none; }

/* --- параллакс-слои баннера (translateY от JS/scroll-timeline) --- */
.mk-parallax-layer {
  will-change: transform;
}

/* --- счётчики цифр --- */
.mk-counter { font-variant-numeric: tabular-nums; }

/* --- skeleton при подгрузке «Показать ещё» --- */
.mk-skeleton {
  position: relative;
  overflow: hidden;
  background: var(--mk-warm-gray-200);
}
.mk-skeleton::after {
  content: "";
  position: absolute; inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
  animation: mk-skeleton-sweep 1.3s ease-in-out infinite;
}
@keyframes mk-skeleton-sweep { to { transform: translateX(100%); } }

/* --- анимированная отрисовка SVG-чертежа --- */
.mk-draw-path {
  stroke-dasharray: var(--mk-draw-len, 400);
  stroke-dashoffset: var(--mk-draw-len, 400);
  transition: stroke-dashoffset 1.1s var(--mk-ease-standard);
}
.mk-draw-path.mk-draw-in { stroke-dashoffset: 0; }

/* --- View Transitions: листинг → карточка (имена задаёт JS через view-transition-name) --- */
::view-transition-old(mk-product-photo),
::view-transition-new(mk-product-photo) {
  animation-duration: var(--mk-dur-slow);
  animation-timing-function: var(--mk-ease-standard);
}