/* ============================================================
   BUMBARI — Микроанимации (лёгкие, без jQuery)
   Появление карточек товара НЕ входит сюда специально — для витрины уже
   есть своя CSS-анимация волной прямо в index.html (см. .wb-card-wrapper
   там), дублировать/переопределять её здесь не нужно — это дало бы
   конфликт двух разных механизмов на одном и том же классе.
   ============================================================ */

/* 1. Липкая шапка с полупрозрачным фоном и тенью при прокрутке */
.wb-header {
    transition: background 0.3s, box-shadow 0.3s;
}
.wb-header.scrolled {
    background: rgba(36, 87, 131, 0.95);
    backdrop-filter: blur(6px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* 2. Пульсация бейджей "Хит" и "Новинка" — привлекает взгляд, не раздражает */
.badge-bestseller,
.badge-new {
    animation: bmbPulse 2.2s ease-in-out infinite;
}
@keyframes bmbPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.07); opacity: 0.88; }
}

/* 3. Плавное появление flash-уведомлений сверху */
.alert {
    animation: bmbSlideDown 0.4s ease forwards;
}
@keyframes bmbSlideDown {
    from { opacity: 0; transform: translateY(-16px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 4. Увеличение главного фото товара при наведении (карточка страницы товара) */
.main-img-box img {
    transition: transform 0.5s ease;
}
.main-img-box:hover img {
    transform: scale(1.05);
}

/* 5. Кнопка "В корзину" слегка растёт при наведении */
.btn-cart-circle {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn-cart-circle:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 15px rgba(0, 149, 217, 0.4);
}

/* 6. Сердечко "Избранное" — постоянный красный цвет, пока товар в избранном
   (класс is-active рисует сервер при загрузке страницы, см. index.html), плюс
   короткий пульс в момент клика (класс pulse добавляет/убирает animations.js) */
.wb-card-fav i {
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.2s;
}
.wb-card-fav.is-active i {
    color: #FF4757;
}
.wb-card-fav.pulse i {
    transform: scale(1.3);
}

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

@media (prefers-reduced-motion: reduce) {
    .badge-bestseller, .badge-new { animation: none; }
    .alert { animation: none; }
    html { scroll-behavior: auto; }
}