@import 'variables.css';

/* Базовые стили для анимированных элементов */
[data-animate] {
    will-change: opacity, transform;
}

/* Дополнительные стили для анимированных элементов */
.animated {
    /* Дополнительные стили после анимации */
}

/* Анимации для конкретных блоков */

/* Блок "О проекте" */
.about-project {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.about-project.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Карточки товаров */
.product-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

/* Карточки категорий */
.category-card, .categories-grid__item {
    transition: transform 0.3s ease;
}

.category-card:hover, .categories-grid__item:hover {
    transform: translateY(-4px);
}

.category-card__image, .category-card__img {
    transition: transform 0.3s ease;
}

.category-card:hover .category-card__image,
.category-card:hover .category-card__img {
    transform: scale(1.1) !important;
}

/* Слайдеры - базовые стили */
.swiper, .splide {
    transition: opacity 0.8s ease, transform 0.8s ease;
}

/* Hero Slider анимации */
.hero-slider {
    transition: opacity 1s ease, transform 1s ease;
}

.hero-slider__slide {
    transition: transform 0.3s ease;
}

.hero-slider__slide:hover {
    transform: scale(1.02);
}

/* Products Slider анимации */
.products-slider__header {
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.products-slider .swiper {
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.products-slider__navigation {
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.products-slider__prev,
.products-slider__next {
    transition: all 0.3s ease;
}

.products-slider__prev:hover,
.products-slider__next:hover {
    transform: scale(1.1);
    background-color: var(--primary-color);
    color: white;
}

/* Text Image Block анимации */
.text-image-block__text {
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.text-image-block__slider {
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.text-image-block__image {
    transition: transform 0.3s ease, filter 0.3s ease;
}

.text-image-block__image:hover {
    transform: scale(1.05);
    filter: brightness(1.1);
}

.text-image-block__prev,
.text-image-block__next {
    transition: all 0.3s ease;
}

.text-image-block__prev:hover,
.text-image-block__next:hover {
    transform: scale(1.1);
    background-color: var(--primary-color);
    color: white;
}

/* Swiper слайды анимации */
.swiper-slide {
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.swiper-slide:hover {
    transform: translateY(-5px);
}

/* Splide слайды анимации */
.splide__slide {
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.splide__slide:hover {
    transform: scale(1.02);
}

/* Анимации для навигации слайдеров */
.swiper-button-prev,
.swiper-button-next {
    transition: all 0.3s ease;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
    transform: scale(1.1);
}

/* Анимации для пагинации */
.swiper-pagination-bullet {
    transition: all 0.3s ease;
}

.swiper-pagination-bullet:hover {
    transform: scale(1.2);
}

.swiper-pagination-bullet-active {
    transform: scale(1.3);
}

/* Анимации для Splide пагинации */
.splide__pagination__page {
    transition: all 0.3s ease;
}

.splide__pagination__page:hover {
    transform: scale(1.2);
}

.splide__pagination__page.is-active {
    transform: scale(1.3);
}

/* Текстовые блоки */
.text-image-block, .hero-slider {
    transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Анимации для заголовков */
h1, h2, h3, h4, h5, h6 {
    transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Анимации для параграфов */
p, .text-content {
    transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Специальные анимации */

/* Анимация появления снизу */
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Анимация появления слева */
@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Анимация появления справа */
@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Анимация масштабирования */
@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Анимация поворота */
@keyframes rotateIn {
    from {
        opacity: 0;
        transform: rotate(-10deg) scale(0.8);
    }
    to {
        opacity: 1;
        transform: rotate(0deg) scale(1);
    }
}

/* Анимация пульсации для кнопок */
@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

/* Анимация для иконок */
.icon-animated {
    transition: transform 0.3s ease;
}

.icon-animated:hover {
    transform: scale(1.1) rotate(5deg);
}

/* Анимация для изображений */
.image-animated {
    transition: transform 0.3s ease, filter 0.3s ease;
}

.image-animated:hover {
    transform: scale(1.05);
    filter: brightness(1.1);
}

/* Анимация для ссылок */
.link-animated {
    position: relative;
    transition: color 0.3s ease;
}

.link-animated::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--primary-color);
    transition: width 0.3s ease;
}

.link-animated:hover::after {
    width: 100%;
}

/* Анимация для форм */
.form-animated input,
.form-animated textarea {
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-animated input:focus,
.form-animated textarea:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(43, 107, 77, 0.1);
}

/* Анимация для модальных окон */
.modal {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.modal.active {
    opacity: 1;
    transform: scale(1);
}

/* Анимация для уведомлений */
.notification {
    animation: slideInRight 0.5s ease;
}

.notification.hide {
    animation: slideOutRight 0.5s ease;
}

@keyframes slideOutRight {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(100%);
    }
}

/* Анимация для загрузки */
.loading {
    animation: pulse 1.5s ease-in-out infinite;
}

/* Анимация для прогресс-баров */
.progress-bar {
    transition: width 0.5s ease;
}

/* Анимация для счетчиков */
.counter {
    transition: transform 0.3s ease;
}

.counter.updated {
    animation: pulse 0.3s ease;
}

/* Адаптивность анимаций */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Анимации для мобильных устройств */
@media (max-width: 768px) {
    /* Уменьшаем интенсивность анимаций на мобильных */
    [data-animate] {
        transition-duration: 0.4s;
    }
    
    .about-project {
        transition-duration: 0.6s;
    }
    
    .product-card:hover {
        transform: none; /* Отключаем hover-эффекты на мобильных */
    }
}

/* Анимации для темной темы */
@media (prefers-color-scheme: dark) {
    .image-animated:hover {
        filter: brightness(1.2);
    }
}

/* Специальные эффекты */

/* Эффект печатания для текста */
@keyframes typewriter {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

.typewriter {
    overflow: hidden;
    border-right: 2px solid var(--primary-color);
    white-space: nowrap;
    animation: typewriter 3s steps(40, end);
}

/* Эффект мерцания */
@keyframes blink {
    0%, 50% {
        opacity: 1;
    }
    51%, 100% {
        opacity: 0;
    }
}

.blink {
    animation: blink 1s infinite;
}

/* Эффект волны */
@keyframes wave {
    0%, 100% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(20deg);
    }
    75% {
        transform: rotate(-10deg);
    }
}

.wave {
    animation: wave 2s ease-in-out infinite;
}