/* ============================================================
   Соло Пак · FX-модуль
   Визуальные микрофишки: reveal-анимации, hover, параллакс-слои.
   Подключение: <link rel="stylesheet" href="solopack-fx.css">
   Все анимации — только transform/opacity (GPU), без layout-thrash.
   ============================================================ */

/* ---------- 1. Reveal: появление блоков при скролле ----------
   Использование: добавить класс .fx-reveal на любой блок.
   Варианты: .fx-reveal--left, .fx-reveal--right, .fx-reveal--scale
   Задержка: style="--fx-delay: .15s" или класс .fx-d1 ... .fx-d4 */

.fx-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity .25s cubic-bezier(.22, .61, .36, 1),
    transform .25s cubic-bezier(.22, .61, .36, 1);
  transition-delay: var(--fx-delay, 0s);
  will-change: opacity, transform;
}

.fx-reveal--left  { transform: translateX(-32px); }
.fx-reveal--right { transform: translateX(32px); }
.fx-reveal--scale { transform: scale(.94); }

.fx-reveal.fx-visible {
  opacity: 1;
  transform: none;
}

/* Готовые задержки для каскадного появления карточек */
.fx-d1 { --fx-delay: .03s; }
.fx-d2 { --fx-delay: .06s; }
.fx-d3 { --fx-delay: .09s; }
.fx-d4 { --fx-delay: .12s; }


/* ---------- 2. Hover: карточки товаров («эффект витрины») ----------
   Использование: .fx-card на карточку,
   <img class="fx-card__img"> внутри — фото увеличится. */

.fx-card {
  transition:
    transform .35s cubic-bezier(.22, .61, .36, 1),
    box-shadow .35s cubic-bezier(.22, .61, .36, 1);
}

.fx-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .12);
}

.fx-card__img-wrap {
  overflow: hidden;
}

.fx-card__img {
  transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}

.fx-card:hover .fx-card__img {
  transform: scale(1.05);
}


/* ---------- 3. Hover: кнопки ----------
   Использование: .fx-btn на ссылку/кнопку.
   Стрелка: <span class="fx-btn__arrow">→</span> — уедет вправо. */

.fx-btn {
  transition:
    background-color .25s ease,
    transform .25s ease,
    box-shadow .25s ease;
}

.fx-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .15);
}

.fx-btn:active {
  transform: translateY(0);
}

.fx-btn__arrow {
  display: inline-block;
  transition: transform .25s ease;
}

.fx-btn:hover .fx-btn__arrow {
  transform: translateX(5px);
}


/* ---------- 4. Hover: ссылки меню — выезжающее подчёркивание ---------- */

.fx-link {
  position: relative;
  text-decoration: none;
}

.fx-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s cubic-bezier(.22, .61, .36, 1);
}

.fx-link:hover::after {
  transform: scaleX(1);
}


/* ---------- 5. Параллакс ----------
   Слои помечаются .fx-parallax, скорость — data-fx-speed="0.15"
   (0.1–0.2 — комфортный диапазон). JS двигает только transform. */

.fx-parallax {
  will-change: transform;
}


/* ---------- 6. Magnetic-кнопка ----------
   JS сам найдёт .fx-magnetic и «приклеит» к курсору.
   Обертка .fx-magnetic нужна, чтобы transform JS не конфликтовал
   с hover-transform кнопки внутри. */

.fx-magnetic {
  display: inline-block;
  will-change: transform;
}


/* ---------- 7. Декор для упаковочной айдентики ---------- */

/* Текстура крафт-картона (SVG-noise, ~1 КБ, без картинок) */
.fx-craft {
  background-color: #f3ede3;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.55  0 0 0 0 0.48  0 0 0 0 0.38  0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Разделитель «перфорация», как линия сгиба на коробе */
.fx-perforation {
  border: 0;
  height: 2px;
  background-image: repeating-linear-gradient(
    to right,
    #c9bda6 0,
    #c9bda6 10px,
    transparent 10px,
    transparent 20px
  );
}


/* ---------- 8. Доступность: уважаем prefers-reduced-motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .fx-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .fx-card,
  .fx-card__img,
  .fx-btn,
  .fx-btn__arrow,
  .fx-link::after {
    transition: none;
  }
  .fx-card:hover,
  .fx-card:hover .fx-card__img,
  .fx-btn:hover,
  .fx-btn:hover .fx-btn__arrow {
    transform: none;
  }
  .fx-link::after {
    transform: scaleX(1);
  }
}