/* ============================================================
   NAVI Animations v1
   ------------------------------------------------------------
   Лёгкая CSS-first система анимаций поверх navi2.css.
   Без зависимости от jQuery / WOW.js / animate.css (тяжёлых).
   Использует IntersectionObserver через navi-anim.js (1.5Кб).

   Принципы:
   1. Только transform + opacity (GPU-ускорено, не блокирует main thread)
   2. prefers-reduced-motion → все анимации отключаются
   3. Никаких «всех 100 плагинов» — только то, что реально нужно
   4. Длительность 200-400ms (быстро, не утомляет)
   5. Easing: cubic-bezier(.4, 0, .2, 1) (Material standard)
   ============================================================ */

/* ============================================================
   1. PRELOADER (загрузка страницы)
   ============================================================ */
.navi-preloader {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--navi-bg);
  transition: opacity .4s ease, visibility .4s ease;
}
.navi-preloader.navi-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Прелоадер: пульсирующий логотип + 3 точки */
.navi-preloader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.navi-preloader-logo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.navi-preloader-logo img {
  height: 80px;
  width: auto;
  display: block;
  /* pulse-subtle breathing */
  animation: navi-preloader-pulse 1.6s cubic-bezier(.4, 0, .2, 1) infinite;
}
.navi-preloader-logo::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 3px;
  background: var(--navi-teal);
  border-radius: 2px;
  animation: navi-preloader-bar 1.4s cubic-bezier(.4, 0, .2, 1) infinite;
}

.navi-preloader-dots {
  display: flex;
  gap: 6px;
}
.navi-preloader-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--navi-teal);
  animation: navi-preloader-bounce 1.2s ease-in-out infinite;
}
.navi-preloader-dots span:nth-child(2) { animation-delay: .15s; }
.navi-preloader-dots span:nth-child(3) { animation-delay: .3s; }

@keyframes navi-preloader-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .85; transform: scale(.97); }
}
@keyframes navi-preloader-bar {
  0%   { width: 0; left: 50%; transform: translateX(0); }
  50%  { width: 100%; left: 0; transform: translateX(0); }
  100% { width: 0; left: 0; transform: translateX(100%); }
}
@keyframes navi-preloader-bounce {
  0%, 80%, 100% { transform: scale(.5); opacity: .4; }
  40%           { transform: scale(1);  opacity: 1; }
}

/* ============================================================
   2. SCROLL REVEAL (появление элементов при скролле)
   ------------------------------------------------------------
   Используется через IntersectionObserver в navi-anim.js.
   Элементы с [data-reveal] стартуют скрытыми, при входе во
   viewport получают класс .navi-revealed → анимация.
   ============================================================ */

/* Базовое состояние (скрыто) */
[data-reveal] {
  opacity: 0;
  transition:
    opacity .5s cubic-bezier(.4, 0, .2, 1),
    transform .5s cubic-bezier(.4, 0, .2, 1);
  will-change: opacity, transform;
}
[data-reveal].navi-revealed {
  opacity: 1;
  transform: none;
}

/* Варианты появления (через data-reveal="variant") */
[data-reveal="fade"]    { transform: translateY(0); }
[data-reveal="up"]      { transform: translateY(24px); }
[data-reveal="down"]    { transform: translateY(-24px); }
[data-reveal="left"]    { transform: translateX(-24px); }
[data-reveal="right"]   { transform: translateX(24px); }
[data-reveal="scale"]   { transform: scale(.95); }
[data-reveal="blur"]    { filter: blur(8px); }

/* Stagger (задержка для дочерних элементов) */
[data-reveal-stagger] > * {
  opacity: 0;
  transition: opacity .5s ease, transform .5s cubic-bezier(.4, 0, .2, 1);
}
[data-reveal-stagger].navi-revealed > *:nth-child(1)  { transition-delay: .05s; }
[data-reveal-stagger].navi-revealed > *:nth-child(2)  { transition-delay: .10s; }
[data-reveal-stagger].navi-revealed > *:nth-child(3)  { transition-delay: .15s; }
[data-reveal-stagger].navi-revealed > *:nth-child(4)  { transition-delay: .20s; }
[data-reveal-stagger].navi-revealed > *:nth-child(5)  { transition-delay: .25s; }
[data-reveal-stagger].navi-revealed > *:nth-child(6)  { transition-delay: .30s; }
[data-reveal-stagger].navi-revealed > *:nth-child(7)  { transition-delay: .35s; }
[data-reveal-stagger].navi-revealed > *:nth-child(8)  { transition-delay: .40s; }
[data-reveal-stagger].navi-revealed > * {
  opacity: 0;
}
[data-reveal-stagger].navi-revealed > * {
  opacity: 1;
  transform: none;
}
[data-reveal-stagger="up"] > *      { transform: translateY(20px); }
[data-reveal-stagger="down"] > *    { transform: translateY(-20px); }
[data-reveal-stagger="left"] > *    { transform: translateX(-20px); }
[data-reveal-stagger="right"] > *   { transform: translateX(20px); }
[data-reveal-stagger="scale"] > *   { transform: scale(.92); }

/* ============================================================
   3. HOVER EFFECTS (карточки, кнопки, ссылки)
   ============================================================ */

/* Карточка: подъём + teal-граница (GPU-оптимизировано) */
.card,
.product,
.feature-box {
  transition:
    transform .2s cubic-bezier(.4, 0, .2, 1),
    box-shadow .2s cubic-bezier(.4, 0, .2, 1),
    border-color .2s cubic-bezier(.4, 0, .2, 1);
}
.card:hover,
.product:hover,
.feature-box:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-hover);
  border-color: var(--navi-teal);
}

/* Изображение в карточке: zoom при hover */
.product .product-image img,
.card-media img {
  transition: transform .4s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}
.product:hover .product-image img,
.card:hover .card-media img {
  transform: scale(1.05);
}

/* Кнопки: лёгкое нажатие */
.button,
.btn-primary {
  transition:
    background .15s ease,
    color .15s ease,
    border-color .15s ease,
    box-shadow .15s ease,
    transform .15s cubic-bezier(.4, 0, .2, 1);
}
.button:active,
.btn-primary:active {
  transform: scale(.98);
}

/* Ghost-ripple для primary кнопок (эффект Material ripple) */
.button.navi-ripple {
  position: relative;
  overflow: hidden;
}
.navi-ripple-effect {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, .35);
  transform: scale(0);
  animation: navi-ripple .6s ease-out;
  pointer-events: none;
}
@keyframes navi-ripple {
  to { transform: scale(4); opacity: 0; }
}

/* Ссылки в навигации: подчёркивание */
.navi-menu a,
.preview-menu a,
.breadcrumb a {
  position: relative;
  transition: color .15s ease;
}
.navi-menu a::after,
.preview-menu a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  background: var(--navi-teal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s cubic-bezier(.4, 0, .2, 1);
}
.navi-menu a:hover::after,
.preview-menu a:hover::after {
  transform: scaleX(1);
}

/* ============================================================
   4. PAGE TRANSITION (плавная смена страниц)
   ============================================================ */
body {
  animation: navi-page-in .35s cubic-bezier(.4, 0, .2, 1);
}
@keyframes navi-page-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* При уходе со страницы (если хочется явный fade-out) */
body.navi-page-leaving {
  animation: navi-page-out .25s cubic-bezier(.4, 0, .2, 1) forwards;
}
@keyframes navi-page-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-8px); }
}

/* ============================================================
   5. SKELETON LOADING (заглушки загрузки)
   ============================================================ */
.navi-skeleton {
  background: linear-gradient(
    90deg,
    var(--navi-bg) 0%,
    var(--navi-border) 50%,
    var(--navi-bg) 100%
  );
  background-size: 200% 100%;
  animation: navi-skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--r-md);
}
@keyframes navi-skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Skeleton variants для карточек товаров */
.navi-skeleton-product {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--navi-border);
  border-radius: var(--r-md);
  background: #fff;
}
.navi-skeleton-product .skel-image { height: 140px; }
.navi-skeleton-product .skel-title { height: 16px; width: 90%; }
.navi-skeleton-product .skel-line  { height: 12px; width: 60%; }
.navi-skeleton-product .skel-price { height: 22px; width: 50%; }

/* ============================================================
   6. MICRO-INTERACTIONS
   ============================================================ */

/* Number badge «bounce» при обновлении счётчика */
.navi-cart-badge,
.navi-wishlist-badge {
  transition: transform .15s cubic-bezier(.4, 0, .2, 1);
}
.navi-cart-badge.bump,
.navi-wishlist-badge.bump {
  animation: navi-badge-bump .35s cubic-bezier(.4, 0, .2, 1);
}
@keyframes navi-badge-bump {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.25); }
  100% { transform: scale(1); }
}

/* Tab indicator: плавное перемещение (если есть динамический индикатор) */
.navi-tab-indicator {
  transition: transform .25s cubic-bezier(.4, 0, .2, 1), width .25s cubic-bezier(.4, 0, .2, 1);
}

/* Dropdown menus: плавное появление */
.navi-dropdown-menu,
.dropdown-menu {
  opacity: 0;
  transform: translateY(-8px);
  visibility: hidden;
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  pointer-events: none;
}
.navi-dropdown:hover .navi-dropdown-menu,
.navi-dropdown.open .navi-dropdown-menu,
.show > .dropdown-menu {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
}

/* Modal: плавное появление */
.modal {
  transition: opacity .25s ease;
}
.modal-dialog {
  transform: translateY(20px);
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}
.modal.show .modal-dialog {
  transform: translateY(0);
}

/* Аккордеон: плавное раскрытие (через max-height) */
.accordion .acd-des,
.accordion .acd-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s cubic-bezier(.4, 0, .2, 1);
}
.accordion .acd-active .acd-des,
.accordion .acd-active .acd-content {
  max-height: 1000px;
}

/* ============================================================
   7. SCROLLBAR (smooth scroll feel)
   ============================================================ */
html {
  scroll-behavior: smooth;
}

/* Плавная прокрутка к якорям */
html:focus-within {
  scroll-behavior: smooth;
}

/* ============================================================
   8. PREFERS-REDUCED-MOTION (доступность)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  .navi-preloader { display: none !important; }
  body { animation: none !important; }
  html { scroll-behavior: auto !important; }
}

/* ============================================================
   9. MOBILE OPTIMIZATIONS
   ============================================================ */
@media (max-width: 991px) {
  /* На мобильных делаем scroll reveal быстрее */
  [data-reveal] {
    transition-duration: .35s;
    transform: translateY(16px);
  }
  [data-reveal="left"],
  [data-reveal="right"] {
    transform: translateY(16px);
  }
  /* Уменьшаем zoom изображений на мобильных (для производительности) */
  .product:hover .product-image img,
  .card:hover .card-media img {
    transform: scale(1.02);
  }
  /* Прелоадер лёгкий (без анимации полосы) */
  .navi-preloader-logo::after { display: none; }
}

/* ============================================================
   10. Print — анимации выключены
   ============================================================ */
@media print {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
  .navi-preloader { display: none !important; }
}

/* ============================================================
   11. end
   ============================================================ */