/* ============================================================
   steel-knot.ru — СЛОЙ АНИМАЦИИ И ДИЗАЙНА (P11, фаза 1)
   Подключается ПОСЛЕ main-pack52.css и stilnot-ui.css.
   Ничего не переверстывает — только поверх существующих классов:
   fade-up секций, каскад плиток, hover чипов/плиток, кнопки,
   липкая шапка (topbar прячется при скролле, site-head — sticky).
   ============================================================ */

/* 1. Появление при скролле: стартовое состояние */
[data-anim] {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.5s var(--ease-out, cubic-bezier(.23, 1, .32, 1)),
    transform 0.5s var(--ease-out, cubic-bezier(.23, 1, .32, 1));
  transition-delay: var(--anim-delay, 0ms);
  will-change: opacity, transform;
}
[data-anim].anim-in { opacity: 1; transform: none; }

/* 2. Каскад для плиток: задержка через индекс (вешает JS) */
[data-anim-stagger] > * {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.5s var(--ease-out, cubic-bezier(.23, 1, .32, 1)),
    transform 0.5s var(--ease-out, cubic-bezier(.23, 1, .32, 1));
  transition-delay: calc(var(--anim-i, 0) * 60ms);
}
[data-anim-stagger].anim-in > * { opacity: 1; transform: none; }

/* 3. Шапка: липкая + тень при скролле; верхняя полоса прячется (JS) */
.site-head {
  position: sticky;
  top: 0;
  z-index: 150;
  transition: box-shadow 0.3s ease;
}
.site-head.is-scrolled { box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08); }
.topbar { transition: max-height 0.3s ease, opacity 0.25s ease; overflow: hidden; }
.topbar.tucked { opacity: 0; }

/* 3а. Модальные окна (счёт/КП) — ВЫШЕ липкой шапки */
.modal-root { z-index: 1000 !important; }

/* 4. Чипы и плитки: приподнимание + тень при наведении */
.tizer, .cat-tile, .good, .goods-tile, .qo-card, .consult-card {
  transition: box-shadow 0.3s ease, border-color 0.3s ease, transform 0.3s var(--ease-out, cubic-bezier(.23, 1, .32, 1));
}
.tizer:hover, .cat-tile:hover, .good:hover, .goods-tile:hover, .qo-card:hover, .consult-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.07);
}

/* 6. Не анимируем, если пользователь предпочитает без движения */
@media (prefers-reduced-motion: reduce) {
  [data-anim], [data-anim] > *, [data-anim-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  html { scroll-behavior: auto; }
}

/* 7. P11 фаза 2 — плитки каталога в формате демо */
.cat-grid { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
.cat-tile { border-radius: 10px; overflow: hidden; }
.cat-tile-desc { padding: 4px 12px 0; color: #666; font-size: 12px; line-height: 1.45; }
@media (max-width: 900px) { .cat-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } }

/* 8. P11 фаза 3 — карточка товара: buybox как на демо (скругление + липкий) */
.buybox { border-radius: 10px; }
@media (min-width: 901px) {
  .buybox { position: sticky; top: 84px; align-self: start; height: auto; min-height: 0; }
}

/* 9. P11 фаза 4 — баннер главной: сетка + оранжевое свечение демо, свои фото */
.slider::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 80px 80px;
}
.slider::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(60% 90% at 85% 20%, rgba(232,65,44,.20), transparent 60%);
}
.slider-copy h1 { font-size: clamp(28px, 4vw, 52px); font-weight: 800; max-width: 760px; }
.slider-arr, .slider-dots { z-index: 2; }