/**
 * UI Improvements
 * Файл содержит улучшения интерфейса:
 * 1. Скрытие стрелочек главного слайдера при бездействии
 * 2. Анимации появления элементов при скролле
 * 3. Пульсирующее свечение элементов
 */

/* ===============================================
   1. Скрытие стрелочек главного слайдера при бездействии
   =============================================== */

@media (min-width: 991px) {
    .slider-index-box {
        position: relative;
    }

    .slider-index .slick-prev,
    .slider-index .slick-next {
        opacity: 0;
        transition: opacity 0.3s ease;
        pointer-events: none;
    }

    .slider-index-box:hover .slick-prev,
    .slider-index-box:hover .slick-next {
        opacity: 1;
        pointer-events: all;
    }
}

/* ===============================================
   2. Устранение дергания элементов при загрузке
   =============================================== */

/* Предотвращение дергания картинок при загрузке */
.product-card img,
.catalog-section img,
.index-page-section img {
    will-change: auto;
}

/* Плавное появление body после загрузки */
body {
    transition: opacity 0.3s ease;
}

body.doc-ready {
    opacity: 1 !important;
}

/* ===============================================
   3. Анимация появления при скролле
   =============================================== */

[data-scroll-animate] {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

[data-scroll-animate].animate-in {
    opacity: 1;
    transform: translateY(0);
}

/* Варианты анимаций */
[data-scroll-animate="fade"] {
    opacity: 0;
    transform: translateY(0);
}

[data-scroll-animate="fade"].animate-in {
    opacity: 1;
}

[data-scroll-animate="slide-up"] {
    opacity: 0;
    transform: translateY(50px);
}

[data-scroll-animate="slide-up"].animate-in {
    opacity: 1;
    transform: translateY(0);
}

[data-scroll-animate="slide-left"] {
    opacity: 0;
    transform: translateX(50px);
}

[data-scroll-animate="slide-left"].animate-in {
    opacity: 1;
    transform: translateX(0);
}

[data-scroll-animate="slide-right"] {
    opacity: 0;
    transform: translateX(-50px);
}

[data-scroll-animate="slide-right"].animate-in {
    opacity: 1;
    transform: translateX(0);
}

/* ===============================================
   4. Пульсирующее свечение (еле заметное)
   =============================================== */

@keyframes subtle-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(156, 197, 246, 0);
    }
    50% {
        box-shadow: 0 0 12px 2px rgba(156, 197, 246, 0.15);
    }
}

@keyframes subtle-glow {
    0%, 100% {
        filter: brightness(1);
    }
    50% {
        filter: brightness(1.02);
    }
}

/* Применяем пульсацию к элементам */
.product-card[data-pulse="true"],
.catalog-item[data-pulse="true"],
.index-section-item[data-pulse="true"] {
    animation: subtle-pulse 4s ease-in-out infinite;
}

/* Альтернативный вариант - легкое свечение */
.glow-effect {
    animation: subtle-glow 3s ease-in-out infinite;
}

/* Специфичные элементы с пульсацией */
.product-card:hover {
    animation: subtle-pulse 2s ease-in-out;
}

/* ===============================================
   5. Дополнительные улучшения для каталога
   =============================================== */

/* Плавное появление карточек товаров */
.product-card {
    transition: all 0.3s ease;
}

/* Задержки для последовательного появления */
[data-scroll-animate]:nth-child(1) { transition-delay: 0.05s; }
[data-scroll-animate]:nth-child(2) { transition-delay: 0.1s; }
[data-scroll-animate]:nth-child(3) { transition-delay: 0.15s; }
[data-scroll-animate]:nth-child(4) { transition-delay: 0.2s; }
[data-scroll-animate]:nth-child(5) { transition-delay: 0.25s; }
[data-scroll-animate]:nth-child(6) { transition-delay: 0.3s; }

/* Для более плавной загрузки изображений */
img.lazyload,
img.lazyloading {
    opacity: 0;
    transition: opacity 0.3s;
}

img.lazyloaded {
    opacity: 1;
}

/* ===============================================
   6. Улучшения для галереи товара (Fancybox)
   =============================================== */

/* Обеспечиваем что Fancybox будет работать */
.detail-slider__cell {
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.detail-slider__cell:hover {
    opacity: 0.85;
}

/* ===============================================
   7. Оптимизация производительности
   =============================================== */

/* Используем аппаратное ускорение для анимаций */
[data-scroll-animate],
.slider-index .slick-prev,
.slider-index .slick-next {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}