/* ============================================================
 * Скролл-эффекты: reveal при появлении, shrink хедера, посимвольный/
 * пословный reveal заголовков, градиентный текст hero, noise-текстура,
 * page transitions (View Transitions API), shimmer при AJAX-перезагрузке,
 * прогресс-бар скролла статьи.
 * Отдельный файл, не трогает основной style.css.
 * ============================================================ */

/* --- 1. Reveal блоков при появлении в вьюпорте ---
 * Класс .wow-reveal навешивается только через JS (scroll-fx.js) —
 * если скрипт не выполнится, блоки остаются видимыми как обычно. */
.wow-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s cubic-bezier(.22, 1, .36, 1), transform .6s cubic-bezier(.22, 1, .36, 1);
}
.wow-reveal.wow-in {
  opacity: 1;
  transform: translateY(0);
}

/* --- 2. Shrink хедера на десктопе при скролле ---
 * .header.active уже навешивается существующим JS сайта — просто
 * добавляем desktop-визуал на этот же класс. */
@media (min-width: 992px) {
  .header .navbar_row.navbar_center .inner {
    transition: padding .3s cubic-bezier(.22, 1, .36, 1);
  }
  .header.active .navbar_row.navbar_center .inner {
    padding-top: 6px;
    padding-bottom: 6px;
  }
  .header .navbar_row.navbar_center .box_logo {
    transition: transform .3s cubic-bezier(.22, 1, .36, 1);
    transform-origin: left center;
  }
  .header.active .navbar_row.navbar_center .box_logo {
    transform: scale(.86);
  }
}

/* --- 3. Пословный reveal заголовков секций (.box_zag h1/h2/h3) ---
 * Слова оборачиваются в span только через JS; без JS заголовок
 * отображается как обычный текст. */
.wow-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(.4em);
  transition: opacity .5s cubic-bezier(.22, 1, .36, 1), transform .5s cubic-bezier(.22, 1, .36, 1);
}
.wow-word.wow-in {
  opacity: 1;
  transform: translateY(0);
}

/* --- 4. Градиентный анимированный текст hero/промо-заголовков --- */
.s_main .box_slider .box_zag h1,
.s_main .box_slider .box_zag h2 {
  background: linear-gradient(90deg, #1d1d1f, #F06745, #6BBBF7, #1d1d1f);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: wow-gradient-text 6s ease infinite;
}
@keyframes wow-gradient-text {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* --- 5. Лёгкая noise-текстура на светлых "воздушных" карточках --- */
.s_main .box_container .box,
.p_about .bg1 .box_container .col_left .box,
.p_about .bg1 .box_container .col_center .box,
.p_about .bg1 .box_container .col_left .box_overflow_inner,
.p_guarantee .bg1 .box_container .box,
.p_guarantee .bg2 .box_container .col_right .box,
.p_delivery .bg2 .box_container .box,
.box_catalog_cat .box,
.p_faq .bg1 .box_container .tab-content,
.p_favorites .bg1 .box_container .col_left .block_total,
.p_blog .bg1 .box_container {
  position: relative;
}
.s_main .box_container .box::before,
.p_about .bg1 .box_container .col_left .box::before,
.p_about .bg1 .box_container .col_center .box::before,
.p_about .bg1 .box_container .col_left .box_overflow_inner::before,
.p_guarantee .bg1 .box_container .box::before,
.p_guarantee .bg2 .box_container .col_right .box::before,
.p_delivery .bg2 .box_container .box::before,
.box_catalog_cat .box::before,
.p_faq .bg1 .box_container .tab-content::before,
.p_favorites .bg1 .box_container .col_left .block_total::before,
.p_blog .bg1 .box_container::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  opacity: .035;
  mix-blend-mode: overlay;
  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' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- 6. Плавный переход между страницами через View Transitions API ---
 * Декларативно, без единой строки JS. В браузерах без поддержки
 * (@view-transition) правило просто игнорируется — обычная навигация. */
@view-transition {
  navigation: auto;
}
::view-transition-old(root) {
  animation: wow-vt-out .25s ease forwards;
}
::view-transition-new(root) {
  animation: wow-vt-in .25s ease forwards;
}
@keyframes wow-vt-out {
  to { opacity: 0; }
}
@keyframes wow-vt-in {
  from { opacity: 0; }
}

/* --- 7. Shimmer при AJAX-перезагрузке каталога (поверх существующего blur) ---
 * .kv_reloading уже навешивается существующим JS сайта во время
 * AJAX-фильтрации/сортировки каталога. */
.kv_reloading {
  position: relative;
}
.kv_reloading::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
  background-size: 200% 100%;
  animation: wow-shimmer 1.2s ease-in-out infinite;
}

@keyframes wow-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* --- 8. Прогресс-бар скролла статьи в блоге ---
 * Ширина обновляется через JS (scroll-fx.js). Если скрипт не
 * выполнится, бар остаётся нулевой ширины — не мешает контенту. */
.wow-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, #F06745, #6BBBF7);
  z-index: 100000;
  pointer-events: none;
  transition: width .1s linear;
}

@media (prefers-reduced-motion: reduce) {
  .wow-reveal,
  .wow-word {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .s_main .box_slider .box_zag h1,
  .s_main .box_slider .box_zag h2 {
    animation: none;
  }
  .kv_reloading::after {
    animation: none;
    display: none;
  }
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }
}