@charset "UTF-8";
/* =====================================================
   all_micro.css v1.1 — Микровзаимодействия (единый файл)
   Путь: /css2/all_micro.css
   Подключение: после all_base.css, перед all_HEADER.css
   Реестр паттернов: DEMO_MICRO.md (Project Knowledge)

   v1.1: добавлена секция SELECTOR MAPPING — привязка mi-*
         к существующим элементам без изменения шаблонов
   Содержит:
     1. Timing-токены (--mi-t-*)
     2. Keyframes (mi-*)
     3. Утилитарные классы (.mi-*)
     4. Reusable components (ripple, confetti, reading-progress)
     5. @media (prefers-reduced-motion) — единый блок отключения
   ===================================================== */


/* ═══ 1. TIMING TOKENS ═══ */

:root {
  --mi-t-fast: 0.15s;
  --mi-t-base: 0.2s;
  --mi-t-bounce: 0.25s cubic-bezier(.34, 1.56, .64, 1);
  --mi-t-slide: 0.35s cubic-bezier(.22, 1, .36, 1);
  --mi-t-enter: 0.5s cubic-bezier(.22, 1, .36, 1);
  --mi-t-press: 0.06s;
}


/* ═══ 2. KEYFRAMES ═══ */

/* ── Entrance ── */

@keyframes mi-enter-card {
  from { opacity: 0; transform: translateY(24px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes mi-enter-sheet {
  from { opacity: 0; transform: translateY(100%); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes mi-fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes mi-stagger {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Feedback: click / select ── */

@keyframes mi-chip-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}

@keyframes mi-check-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.2); }
  100% { transform: scale(1); }
}

@keyframes mi-ripple {
  to { transform: scale(4); opacity: 0; }
}

/* ── Feedback: value ── */

@keyframes mi-pulse-value {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.08); color: var(--accent, #2563eb); }
  100% { transform: scale(1); }
}

@keyframes mi-pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, .4); }
  50%      { box-shadow: 0 0 0 6px rgba(22, 163, 74, 0); }
}

/* ── Feedback: hover ── */

@keyframes mi-shimmer {
  to { left: 150%; }
}

/* ── Success / status ── */

@keyframes mi-success-pop {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); }
}

@keyframes mi-success-draw {
  to { stroke-dashoffset: 0; }
}

@keyframes mi-spin {
  to { transform: rotate(360deg); }
}

/* ── Hint ── */

@keyframes mi-hint-pop {
  from { opacity: 0; transform: translateY(-50%) scale(.95); }
  to   { opacity: 1; transform: translateY(-50%) scale(1); }
}


/* ═══ 3. UTILITY CLASSES ═══ */

/* ── MI-ENTER-CARD: модалки, попапы ── */
.mi-enter-card {
  animation: mi-enter-card 0.35s cubic-bezier(.22, 1, .36, 1) both;
}
@media (max-width: 480px) {
  .mi-enter-sheet {
    animation: mi-enter-sheet 0.35s cubic-bezier(.22, 1, .36, 1) both;
  }
}

/* ── MI-FADE-UP: scroll reveal ── */
.mi-fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s cubic-bezier(.22, 1, .36, 1),
              transform 0.5s cubic-bezier(.22, 1, .36, 1);
}
.mi-fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── MI-STAGGER: каскадное появление ── */
.mi-stagger {
  opacity: 0;
  transform: translateY(12px);
  animation: mi-stagger 0.5s cubic-bezier(.22, 1, .36, 1) forwards;
  animation-delay: var(--mi-stagger-delay, 0ms);
}

/* ── MI-HOVER-LIFT: кликабельные элементы ── */
.mi-hover-lift {
  transition: transform var(--mi-t-fast), box-shadow var(--mi-t-fast);
}
.mi-hover-lift:hover {
  transform: translateY(-1px);
}

/* ── MI-HOVER-LIFT-MD: крупные карточки ── */
.mi-hover-lift-md {
  transition: transform var(--mi-t-base), box-shadow var(--mi-t-base);
}
.mi-hover-lift-md:hover {
  transform: translateY(-3px);
}

/* ── MI-THUMB-BOUNCE: миниатюры ── */
.mi-thumb-bounce {
  transition: transform var(--mi-t-bounce), box-shadow var(--mi-t-bounce);
}
.mi-thumb-bounce:hover {
  transform: translateY(-3px);
}

/* ── MI-CLOSE-ROTATE: крестик закрытия ── */
.mi-close-rotate {
  transition: background var(--mi-t-base), color var(--mi-t-base),
              transform var(--mi-t-bounce);
}
.mi-close-rotate:hover {
  transform: rotate(90deg);
}

/* ── MI-ACTIVE-PRESS: нажатие кнопки ── */
.mi-active-press:active {
  transform: scale(.96);
  transition-duration: var(--mi-t-press);
}

/* ── MI-CHIP-POP: выбор чипа/таба ── */
.mi-chip-pop {
  animation: mi-chip-pop 0.3s cubic-bezier(.34, 1.56, .64, 1);
}

/* ── MI-CHECK-DRAW: галочка штрихом ── */
.mi-check-draw {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  transition: opacity 0.15s, stroke-dashoffset 0.3s cubic-bezier(.22, 1, .36, 1) 0.1s;
}
.mi-check-draw.is-drawn {
  stroke-dashoffset: 0;
  opacity: 1;
}

/* ── MI-CHECK-POP: пружина чекбокса ── */
.mi-check-pop {
  animation: mi-check-pop 0.35s cubic-bezier(.34, 1.56, .64, 1);
}

/* ── MI-PULSE-VALUE: пульс числового значения ── */
.mi-pulse-value {
  animation: mi-pulse-value 0.35s cubic-bezier(.34, 1.56, .64, 1);
}

/* ── MI-PULSE-DOT: живой индикатор наличия ── */
.mi-pulse-dot {
  animation: mi-pulse-dot 2.5s ease infinite;
}

/* ── MI-SHIMMER: подсветка badge при hover ── */
.mi-shimmer { position: relative; overflow: hidden; }
.mi-shimmer::after {
  content: '';
  position: absolute;
  top: 0; left: -100%; width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .15), transparent);
  pointer-events: none;
}
.mi-shimmer:hover::after {
  animation: mi-shimmer 0.5s ease-out;
}

/* ── MI-SUCCESS-POP: зелёный круг успеха ── */
.mi-success-pop {
  animation: mi-success-pop 0.5s cubic-bezier(.34, 1.56, .64, 1);
}

/* ── MI-SUCCESS-DRAW: галочка внутри success ── */
.mi-success-draw {
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  animation: mi-success-draw 0.4s cubic-bezier(.22, 1, .36, 1) 0.25s forwards;
}

/* ── MI-SPIN: спиннер загрузки ── */
.mi-spin {
  animation: mi-spin 0.6s linear infinite;
}

/* ── MI-FOCUS-LABEL: подсветка label при фокусе ── */
.mi-focus-label {
  transition: color var(--mi-t-base);
}
/* Applied via parent :focus-within in page CSS */

/* ── MI-FOCUS-RING: a11y focus ── */
.mi-focus-ring:focus-visible {
  outline: 2px solid var(--accent, #3b82f6);
  outline-offset: 2px;
}


/* ═══ 4. SELECTOR MAPPING ═══
   Привязка mi-* поведения к существующим элементам.
   Новые элементы — используют .mi-* классы напрямую.
   Существующие — маппятся здесь по селекторам.
   ═══════════════════════════════════════════════════ */

/* MI-CLOSE-ROTATE → все крестики закрытия
   ВАЖНО: transition с transform должен быть в page-CSS,
   иначе более поздний transition: background .2s перебьёт.
   Проверить: cert-modal, lightbox, region-modal, sidebar. */
.cert-modal__close,
.invoice-modal__close,
.lightbox__close,
.region-modal-close,
.catalog-sidebar__close,
.sidebar__close {
  transition: background var(--mi-t-base), color var(--mi-t-base),
              transform var(--mi-t-bounce);
}
.cert-modal__close:hover,
.invoice-modal__close:hover,
.lightbox__close:hover,
.region-modal-close:hover,
.catalog-sidebar__close:hover,
.sidebar__close:hover {
  transform: rotate(90deg);
}

/* MI-ACTIVE-PRESS → основные кнопки */
.btn-cart:active,
.btn-invoice:active,
.invoice-modal__submit:active,
.product-card__buy:active,
.qty-selector__btn:active {
  transform: scale(.96);
  transition-duration: var(--mi-t-press);
}

/* MI-HOVER-LIFT → кликабельные блоки */
.trust-strip__item,
.delivery-info__item {
  transition: transform var(--mi-t-fast), box-shadow var(--mi-t-fast);
}
.trust-strip__item:hover,
.delivery-info__item:hover {
  transform: translateY(-1px);
}

/* MI-HOVER-LIFT-MD → крупные карточки */
.guarantee-card,
.partner-card {
  transition: transform var(--mi-t-base), box-shadow var(--mi-t-base);
}
.guarantee-card:hover,
.partner-card:hover {
  transform: translateY(-3px);
}

/* MI-FOCUS-LABEL → подсветка label при фокусе поля */
.invoice-modal__field:focus-within .invoice-modal__label {
  color: var(--accent, #2563eb);
}

/* Touch: disable hover transforms */
@media (hover: none) and (pointer: coarse) {
  .trust-strip__item:hover,
  .delivery-info__item:hover,
  .guarantee-card:hover,
  .partner-card:hover {
    transform: none;
  }
  .cert-modal__close:hover,
  .invoice-modal__close:hover,
  .lightbox__close:hover,
  .region-modal-close:hover,
  .catalog-sidebar__close:hover,
  .sidebar__close:hover {
    transform: none;
  }
}


/* ═══ 5. REUSABLE COMPONENTS ═══ */

/* ── Ripple effect (JS creates .ripple inside .ripple-wrap) ── */
.ripple-wrap { position: relative; overflow: hidden; }
.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, .35);
  transform: scale(0);
  animation: mi-ripple 0.5s ease-out forwards;
  pointer-events: none;
}

/* ── Reading progress bar ── */
.reading-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent, #2563eb), var(--green, #16a34a));
  z-index: 200;
  width: 0%;
  transition: width 0.1s linear, opacity 0.3s;
  opacity: 0;
}
.reading-progress.is-active { opacity: 1; }

/* ── Stagger entrance (legacy class alias) ── */
.stagger-in {
  opacity: 0;
  transform: translateY(12px);
  animation: mi-stagger 0.5s cubic-bezier(.22, 1, .36, 1) forwards;
}

/* ── Fade section (legacy class alias) ── */
.fade-section {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s cubic-bezier(.22, 1, .36, 1),
              transform 0.5s cubic-bezier(.22, 1, .36, 1);
}
.fade-section.is-visible {
  opacity: 1;
  transform: translateY(0);
}


/* ═══ 6. REDUCED MOTION — единый блок ═══ */

@media (prefers-reduced-motion: reduce) {
  /* Kill all animations and transitions globally */
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Ensure entrance elements are visible */
  .mi-fade-up,
  .mi-stagger,
  .fade-section,
  .stagger-in {
    opacity: 1 !important;
    transform: none !important;
  }

  /* Modal entrances — no animation, just appear */
  .mi-enter-card,
  .mi-enter-sheet {
    animation: none;
    opacity: 1;
    transform: none;
  }

  /* Success state — visible immediately */
  .mi-success-pop { animation: none; }
  .mi-success-draw { animation: none; stroke-dashoffset: 0; }

  /* Value pulse — static */
  .mi-pulse-value { animation: none; }
  .mi-pulse-dot { animation: none; }

  /* Spinner — allowed even in reduced motion (functional) */
  .mi-spin { animation: mi-spin 0.6s linear infinite; }

  /* Reading progress bar */
  .reading-progress { transition: none; }
}

/* ── Touch devices: disable hover effects ── */
@media (hover: none) and (pointer: coarse) {
  .mi-hover-lift:hover,
  .mi-hover-lift-md:hover,
  .mi-thumb-bounce:hover {
    transform: none;
  }
  .mi-shimmer:hover::after {
    animation: none;
  }
}