/* ==============================================
   LAZY LOADING ANIMATIONS SYSTEM
   Система плавных анимаций появления элементов
   ============================================== */
@import url('shared-utilities.css');

/* Базовые стили для элементов с lazy loading */
.lazy-element {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: opacity, transform;
}

/* Активное состояние (элемент появился в viewport) */
.lazy-element.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* Анимация fade-in (простое появление) */
.lazy-fade {
    opacity: 0;
    transition: opacity 0.8s ease-out;
}

.lazy-fade.in-view {
    opacity: 1;
}

/* Анимация slide-up (появление снизу) */
.lazy-slide-up {
    opacity: 0;
    transform: translateY(80px);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.lazy-slide-up.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* Анимация slide-down (появление сверху) */
.lazy-slide-down {
    opacity: 0;
    transform: translateY(-80px);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.lazy-slide-down.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* Анимация slide-left (появление справа) */
.lazy-slide-left {
    opacity: 0;
    transform: translateX(80px);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.lazy-slide-left.in-view {
    opacity: 1;
    transform: translateX(0);
}

/* Анимация slide-right (появление слева) */
.lazy-slide-right {
    opacity: 0;
    transform: translateX(-80px);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.lazy-slide-right.in-view {
    opacity: 1;
    transform: translateX(0);
}

/* Анимация zoom-in (увеличение) */
.lazy-zoom-in {
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.lazy-zoom-in.in-view {
    opacity: 1;
    transform: scale(1);
}

/* Анимация zoom-out (изначально увеличенный) */
.lazy-zoom-out {
    opacity: 0;
    transform: scale(1.2);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.lazy-zoom-out.in-view {
    opacity: 1;
    transform: scale(1);
}

/* Анимация flip-up (поворот по X) */
.lazy-flip-up {
    opacity: 0;
    transform: perspective(1000px) rotateX(80deg);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.lazy-flip-up.in-view {
    opacity: 1;
    transform: perspective(1000px) rotateX(0deg);
}

/* Анимация bounce-in (эластичное появление) */
.lazy-bounce-in {
    opacity: 0;
    transform: scale(0.3);
    transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.lazy-bounce-in.in-view {
    opacity: 1;
    transform: scale(1);
}

/* Анимация для карточек товаров */
.lazy-card {
    opacity: 0;
    transform: translateY(60px) scale(0.95);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.lazy-card.in-view {
    opacity: 1;
    transform: translateY(0) scale(1);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12);
}

/* Оптимизированные анимации для каталога (быстрее и менее заметны) */
#catalog .lazy-product-card {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

#catalog .lazy-product-card.in-view {
    opacity: 1;
    transform: translateY(0);
}

#catalog .lazy-text {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease-out;
}

#catalog .lazy-text.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* Анимация для текстовых блоков */
.lazy-text {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.lazy-text.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* Анимация для изображений */
.lazy-image {
    opacity: 0;
    transform: scale(1.1);
    transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}

.lazy-image.in-view {
    opacity: 1;
    transform: scale(1);
}

/* Анимация для секций */
.lazy-section {
    opacity: 0;
    transform: translateY(100px);
    transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.lazy-section.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* Задержки для последовательных анимаций */
.lazy-delay-100 { transition-delay: 0.1s; }
.lazy-delay-200 { transition-delay: 0.2s; }
.lazy-delay-300 { transition-delay: 0.3s; }
.lazy-delay-400 { transition-delay: 0.4s; }
.lazy-delay-500 { transition-delay: 0.5s; }
.lazy-delay-600 { transition-delay: 0.6s; }
.lazy-delay-700 { transition-delay: 0.7s; }
.lazy-delay-800 { transition-delay: 0.8s; }

/* Специальные анимации для vape shop элементов */
.lazy-product-card {
    opacity: 0;
    transform: translateY(40px) rotateX(10deg);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    perspective: 1000px;
}

.lazy-product-card.in-view {
    opacity: 1;
    transform: translateY(0) rotateX(0deg);
}

.lazy-hero-title {
    opacity: 0;
    transform: translateY(100px) scale(0.9);
    transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.lazy-hero-title.in-view {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.lazy-hero-subtitle {
    opacity: 0;
    transform: translateY(60px);
    transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: 0.3s;
}

.lazy-hero-subtitle.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* Анимация для статистики и чисел */
.lazy-counter {
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.lazy-counter.in-view {
    opacity: 1;
    transform: scale(1);
}

/* Респонсивные настройки */
@media (max-width: 768px) {
    .lazy-element,
    .lazy-slide-up,
    .lazy-slide-down {
        transform: translateY(30px);
    }
    
    .lazy-slide-left,
    .lazy-slide-right {
        transform: translateX(30px);
    }
    
    .lazy-section {
        transform: translateY(50px);
    }
    
    /* Уменьшаем длительность анимаций на мобильных */
    .lazy-element,
    .lazy-fade,
    .lazy-slide-up,
    .lazy-slide-down,
    .lazy-slide-left,
    .lazy-slide-right,
    .lazy-zoom-in,
    .lazy-zoom-out,
    .lazy-flip-up,
    .lazy-bounce-in,
    .lazy-card,
    .lazy-text,
    .lazy-image,
    .lazy-product-card,
    .lazy-counter {
        transition-duration: 0.6s;
    }
    
    .lazy-section,
    .lazy-hero-title {
        transition-duration: 0.8s;
    }
}

/* Отключение анимаций для пользователей с предпочтением уменьшенной анимации */
@media (prefers-reduced-motion: reduce) {
    .lazy-element,
    .lazy-fade,
    .lazy-slide-up,
    .lazy-slide-down,
    .lazy-slide-left,
    .lazy-slide-right,
    .lazy-zoom-in,
    .lazy-zoom-out,
    .lazy-flip-up,
    .lazy-bounce-in,
    .lazy-card,
    .lazy-text,
    .lazy-image,
    .lazy-section,
    .lazy-product-card,
    .lazy-hero-title,
    .lazy-hero-subtitle,
    .lazy-counter {
        transition: none;
        opacity: 1;
        transform: none;
    }
}

/* Плавная анимация загрузки изображений */
.lazy-img {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.lazy-img.loaded {
    opacity: 1;
}

/* Skeleton loading для изображений */
.lazy-img-skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}