/* =========================================================
   ВИДЖЕТЫ И АНИМАЦИИ — Альтернативное Решение
   Подключается на всех страницах сайта.
   ========================================================= */

/* Плавный скролл по якорям */
html { scroll-behavior: smooth; }

/* Плавное появление страницы при загрузке */
body { opacity: 0; }
body.wr-loaded {
    opacity: 1;
    transition: opacity .45s ease;
}

/* ── "Дышащая" sticky-шапка ───────────────────────────── */
.wr-sticky-wrap {
    position: sticky;
    top: 0;
    z-index: 500;
    background: #fff;
}
.wr-sticky-wrap header {
    transition: padding .25s ease, box-shadow .25s ease;
}
.wr-sticky-wrap.wr-scrolled header {
    box-shadow: 0 4px 18px rgba(11,76,140,.12);
}
.wr-sticky-wrap.wr-scrolled header .logo-img {
    transition: height .25s ease;
    height: 60px;
}
@media (max-width: 768px) {
    .wr-sticky-wrap.wr-scrolled header .logo-img { height: 42px; }
}
.wr-sticky-wrap .navbar {
    transition: box-shadow .25s ease;
}
.wr-sticky-wrap.wr-scrolled .navbar {
    box-shadow: 0 4px 12px rgba(0,0,0,.10);
}

/* ── Кнопка "наверх" ───────────────────────────────────── */
.wr-top-btn {
    position: fixed;
    right: 22px;
    bottom: 22px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--primary-color, #0b4c8c);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0,0,0,.22);
    z-index: 600;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity .25s ease, transform .25s ease, background .2s ease, box-shadow .2s ease;
}
.wr-top-btn.wr-show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.wr-top-btn:hover {
    background: var(--accent-color, #f26522);
    box-shadow: 0 6px 18px rgba(0,0,0,.3);
}
.wr-top-btn svg { display: block; }
@media (max-width: 768px) {
    .wr-top-btn { right: 14px; bottom: 14px; width: 42px; height: 42px; }
}

/* ── Плавное появление блоков при скролле ─────────────── */
.wr-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s cubic-bezier(.2,.6,.2,1), transform .7s cubic-bezier(.2,.6,.2,1);
    will-change: opacity, transform;
}
.wr-reveal.wr-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Уважаем пользователей, отключивших анимации */
@media (prefers-reduced-motion: reduce) {
    .wr-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
    html { scroll-behavior: auto; }
}

/* ── Живые карточки: цифры, категории, преимущества ───── */
.stat-card,
.category-card,
.feature-item {
    transition: transform .25s ease, box-shadow .25s ease;
}
.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(11,76,140,.12);
}
.category-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 28px rgba(0,0,0,.14);
}
.feature-item:hover {
    transform: translateY(-3px);
}

/* Лёгкое "живое" подчёркивание при hover на пунктах меню — усиление уже существующего эффекта */
.nav-item > a {
    transition: color .2s, border-bottom-color .2s, background .2s, transform .2s;
}
.nav-item > a:hover {
    transform: translateY(-1px);
}

/* Счётчики цифр — небольшая пульсация в момент завершения подсчёта */
@keyframes wr-pop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.08); }
    100% { transform: scale(1); }
}
.stat-card h3.wr-counted {
    animation: wr-pop .35s ease;
}

/* ── Каталог: плавное появление карточек при рендере/фильтрации ──
   Работает только внутри #products-container — это id есть только
   на странице каталога, других карточек (избранное/сравнение) правило
   не касается. */
#products-container > * {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .38s ease, transform .38s ease;
}
#products-container > .wr-card-in {
    opacity: 1;
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    #products-container > * { opacity: 1 !important; transform: none !important; transition: none !important; }
}