@charset "UTF-8";

/* ===========================================
   СОВРЕМЕННЫЕ АНИМАЦИИ И ЭФФЕКТЫ ДЛЯ ЯРГО
   =========================================== */

/* Базовые переменные для анимаций */
:root {
    --animation-duration: 0.3s;
    --animation-duration-slow: 0.6s;
    --animation-duration-fast: 0.15s;
    --easing-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --easing-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --easing-elastic: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --shadow-hover: 0 8px 25px rgba(0, 153, 0, 0.15);
    --shadow-active: 0 4px 15px rgba(0, 153, 0, 0.25);
    --gradient-primary: linear-gradient(135deg, #009900, #00cc00);
    --gradient-hover: linear-gradient(135deg, #00cc00, #33ff33);
}

/* ===========================================
   АНИМАЦИИ ЗАГРУЗКИ И ПОЯВЛЕНИЯ
   =========================================== */

/* Плавное появление элементов */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes slideInFromTop {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Пульсация для важных элементов */
@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(0, 153, 0, 0.7);
    }
    70% {
        transform: scale(1.05);
        box-shadow: 0 0 0 10px rgba(0, 153, 0, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(0, 153, 0, 0);
    }
}

/* Волновая анимация */
@keyframes wave {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

/* Дыхание элемента */
@keyframes breathe {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.02);
    }
}

/* ===========================================
   АНИМАЦИИ ДЛЯ КНОПОК
   =========================================== */

/* Улучшенные кнопки с анимациями */
.button {
    position: relative;
    overflow: hidden;
    transition: all var(--animation-duration) var(--easing-smooth);
    transform: translateZ(0);
    will-change: transform, box-shadow;
}

.button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.button:hover::before {
    left: 100%;
}

.button:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
    background: var(--gradient-hover);
}

.button:active {
    transform: translateY(0);
    box-shadow: var(--shadow-active);
    transition: all var(--animation-duration-fast) var(--easing-smooth);
}

.button_full:hover {
    background: var(--gradient-hover);
    transform: translateY(-2px) scale(1.02);
}

.button_succes:hover {
    background: linear-gradient(135deg, #00cc00, #33ff33);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 204, 0, 0.3);
}

.button_red:hover {
    background: linear-gradient(135deg, #ff4444, #ff6666);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 68, 68, 0.3);
}

/* Анимация для кнопки добавления товара */
.button-blink {
    animation: pulse 2s infinite;
}

/* ===========================================
   АНИМАЦИИ ДЛЯ КАРТОЧЕК ТОВАРОВ
   =========================================== */

.catalog__item {
    transition: all var(--animation-duration) var(--easing-smooth);
    transform: translateZ(0);
    will-change: transform, box-shadow;
}

.catalog__item:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.catalog__item__in {
    transition: all var(--animation-duration) var(--easing-smooth);
    position: relative;
    overflow: hidden;
}

.catalog__item__in::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--gradient-primary);
    opacity: 0;
    transition: opacity var(--animation-duration) var(--easing-smooth);
    z-index: -1;
}

.catalog__item:hover .catalog__item__in::before {
    opacity: 0.05;
}

.catalog__item img {
    transition: all var(--animation-duration-slow) var(--easing-smooth);
}

.catalog__item:hover img {
    transform: scale(1.05);
}

/* ===========================================
   АНИМАЦИИ ДЛЯ НАВИГАЦИИ
   =========================================== */

#mm li a {
    position: relative;
    transition: all var(--animation-duration) var(--easing-smooth);
    overflow: hidden;
}

#mm li a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: #ffba00;
    transition: width var(--animation-duration) var(--easing-smooth);
}

#mm li a:hover::after {
    width: 100%;
}

#mm li a:hover {
    color: #ffba00;
    transform: translateY(-2px);
}

/* Анимация для мобильного меню */
.mm__mobile button {
    transition: all var(--animation-duration) var(--easing-bounce);
}

.mm__mobile button:hover {
    transform: scale(1.1);
    background: var(--gradient-primary);
}

/* ===========================================
   АНИМАЦИИ ДЛЯ ФОРМ
   =========================================== */

.forma__field__itext,
.forma textarea,
.forma select {
    transition: all var(--animation-duration) var(--easing-smooth);
    position: relative;
}

.forma__field__itext:focus,
.forma textarea:focus,
.forma select:focus {
    transform: scale(1.02);
    box-shadow: 0 0 0 3px rgba(0, 153, 0, 0.1);
    border-color: #009900;
}

.forma__field__itext:hover,
.forma textarea:hover,
.forma select:hover {
    border-color: #00cc00;
    box-shadow: 0 2px 8px rgba(0, 153, 0, 0.1);
}

/* Анимация для лейблов */
.forma__field label {
    transition: all var(--animation-duration) var(--easing-smooth);
}

.forma__field:focus-within label {
    color: #009900;
    transform: translateY(-2px);
}

/* ===========================================
   АНИМАЦИИ ДЛЯ ТАБЛИЦ
   =========================================== */

.tableContent tr {
    transition: all var(--animation-duration) var(--easing-smooth);
}

.tableContent tr:hover {
    transform: scale(1.01);
    box-shadow: 0 4px 12px rgba(0, 153, 0, 0.1);
    background: linear-gradient(135deg, #ffffff, #f8fff8);
}

.tableContent td {
    transition: all var(--animation-duration) var(--easing-smooth);
}

.tableContent tr:hover td {
    border-color: #00cc00;
}

/* ===========================================
   АНИМАЦИИ ДЛЯ ПАГИНАЦИИ
   =========================================== */

.pagination__item a,
.pagination__item span {
    transition: all var(--animation-duration) var(--easing-smooth);
    position: relative;
    overflow: hidden;
}

.pagination__item a:hover {
    transform: translateY(-3px) scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 153, 0, 0.2);
}

.pagination__item.active a {
    animation: pulse 3s infinite;
}

/* ===========================================
   АНИМАЦИИ ДЛЯ СОЦИАЛЬНЫХ КНОПОК
   =========================================== */

.social a {
    transition: all var(--animation-duration) var(--easing-bounce);
    position: relative;
}

.social a:hover {
    transform: translateY(-5px) scale(1.2);
    filter: brightness(1.2);
}

.social a::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(0, 153, 0, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: all var(--animation-duration) var(--easing-smooth);
}

.social a:hover::after {
    width: 100%;
    height: 100%;
}

/* ===========================================
   АНИМАЦИИ ДЛЯ ПОИСКА
   =========================================== */

header .search .forma__field__itext {
    transition: all var(--animation-duration) var(--easing-smooth);
}

header .search .forma__field__itext:focus {
    transform: scale(1.02);
    box-shadow: 0 0 0 3px rgba(0, 153, 0, 0.1);
}

.search__but {
    transition: all var(--animation-duration) var(--easing-smooth);
}

.search__but:hover {
    transform: scale(1.1);
    background-color: #00cc00;
}

/* ===========================================
   АНИМАЦИИ ДЛЯ ЛОГОТИПА
   =========================================== */

#logo {
    transition: all var(--animation-duration-slow) var(--easing-smooth);
}

#logo:hover {
    transform: scale(1.05) rotate(2deg);
    filter: brightness(1.1);
}

/* ===========================================
   АНИМАЦИИ ДЛЯ ФУТЕРА
   =========================================== */

footer {
    position: relative;
    overflow: hidden;
}

footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    animation: shimmer 3s infinite;
}

@keyframes shimmer {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

/* ===========================================
   АНИМАЦИИ ДЛЯ МОДАЛЬНЫХ ОКОН
   =========================================== */

.mfpPopup {
    animation: fadeInScale var(--animation-duration-slow) var(--easing-bounce);
}

/* ===========================================
   АНИМАЦИИ ДЛЯ КНОПКИ "ВВЕРХ"
   =========================================== */

#scrollTop {
    transition: all var(--animation-duration) var(--easing-smooth);
}

#scrollTop:hover {
    transform: translate(-50%, -5px) scale(1.1);
    background: rgba(0, 153, 0, 0.8);
}

#scrollTop.show {
    animation: bounceIn 0.6s var(--easing-bounce);
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: translate(-50%, -20px) scale(0.3);
    }
    50% {
        opacity: 1;
        transform: translate(-50%, 5px) scale(1.1);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, 0) scale(1);
    }
}

/* ===========================================
   АНИМАЦИИ ДЛЯ ПРЕЛОАДЕРА
   =========================================== */

#preloader {
    animation: fadeIn 0.5s ease-in-out;
}

#preloader img {
    animation: spin 2s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* ===========================================
   АНИМАЦИИ ДЛЯ ГАЛЕРЕИ
   =========================================== */

.gallery a {
    transition: all var(--animation-duration) var(--easing-smooth);
    position: relative;
    overflow: hidden;
}

.gallery a:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.gallery img {
    transition: all var(--animation-duration-slow) var(--easing-smooth);
}

.gallery a:hover img {
    transform: scale(1.1);
}

/* ===========================================
   АНИМАЦИИ ДЛЯ КОММЕНТАРИЕВ
   =========================================== */

.comments__item {
    transition: all var(--animation-duration) var(--easing-smooth);
}

.comments__item:hover {
    transform: translateX(10px);
    box-shadow: 0 5px 15px rgba(0, 153, 0, 0.1);
    background: linear-gradient(135deg, #ffffff, #f8fff8);
}

/* ===========================================
   АНИМАЦИИ ДЛЯ ТАБОВ
   =========================================== */

.tabs__radio + label {
    transition: all var(--animation-duration) var(--easing-smooth);
    position: relative;
    overflow: hidden;
}

.tabs__radio + label::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.tabs__radio + label:hover::before {
    left: 100%;
}

.tabs__radio + label:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 153, 0, 0.2);
}

.tabs__radio:checked + label {
    animation: pulse 2s infinite;
}

/* ===========================================
   АНИМАЦИИ ДЛЯ АККОРДЕОНА
   =========================================== */

.accordionBlock__title a {
    transition: all var(--animation-duration) var(--easing-smooth);
}

.accordionBlock__title a:hover {
    color: #009900;
    transform: translateX(5px);
}

.accordionBlock__box {
    animation: fadeInUp var(--animation-duration) var(--easing-smooth);
}

/* ===========================================
   АНИМАЦИИ ДЛЯ ПРОДАВЦОВ
   =========================================== */

.seller {
    transition: all var(--animation-duration) var(--easing-smooth);
}

.seller:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 10px 25px rgba(0, 153, 0, 0.15);
}

.seller__image img {
    transition: all var(--animation-duration-slow) var(--easing-smooth);
}

.seller:hover .seller__image img {
    transform: scale(1.1);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* ===========================================
   АНИМАЦИИ ДЛЯ КОМПАНИЙ
   =========================================== */

.company {
    transition: all var(--animation-duration) var(--easing-smooth);
}

.company:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0, 153, 0, 0.1);
}

/* ===========================================
   АНИМАЦИИ ДЛЯ АВАТАРОВ
   =========================================== */

.avatar__image img {
    transition: all var(--animation-duration-slow) var(--easing-smooth);
}

.avatar__image:hover img {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 8px 20px rgba(0, 153, 0, 0.2);
}

/* ===========================================
   АНИМАЦИИ ДЛЯ ИНКУТОВ
   =========================================== */

.incut {
    transition: all var(--animation-duration) var(--easing-smooth);
    position: relative;
    overflow: hidden;
}

.incut::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 153, 0, 0.1), transparent);
    transition: left 0.8s;
}

.incut:hover::before {
    left: 100%;
}

.incut:hover {
    transform: translateX(10px);
    box-shadow: 0 5px 15px rgba(0, 153, 0, 0.1);
}

/* ===========================================
   АНИМАЦИИ ДЛЯ ТЕКСТА
   =========================================== */

h1, h2, h3, h4, h5, h6 {
    transition: all var(--animation-duration) var(--easing-smooth);
}

h1:hover, h2:hover, h3:hover, h4:hover, h5:hover, h6:hover {
    transform: translateX(5px);
    color: #009900;
}

/* ===========================================
   АНИМАЦИИ ДЛЯ ССЫЛОК
   =========================================== */

a {
    transition: all var(--animation-duration) var(--easing-smooth);
    position: relative;
}

a:hover {
    transform: translateY(-1px);
}

a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: currentColor;
    transition: width var(--animation-duration) var(--easing-smooth);
}

a:hover::after {
    width: 100%;
}

/* ===========================================
   АНИМАЦИИ ДЛЯ ИЗОБРАЖЕНИЙ
   =========================================== */

img {
    transition: all var(--animation-duration) var(--easing-smooth);
}

img:hover {
    transform: scale(1.02);
    filter: brightness(1.1);
}

/* ===========================================
   АНИМАЦИИ ДЛЯ СПИСКОВ
   =========================================== */

ul li {
    transition: all var(--animation-duration) var(--easing-smooth);
}

ul li:hover {
    transform: translateX(10px);
    color: #009900;
}

ul li::marker {
    transition: all var(--animation-duration) var(--easing-smooth);
}

ul li:hover::marker {
    color: #00cc00;
    transform: scale(1.2);
}

/* ===========================================
   АНИМАЦИИ ДЛЯ ПОЛЕЙ АВТОЗАПОЛНЕНИЯ
   =========================================== */

.autocomplete-suggestion {
    transition: all var(--animation-duration) var(--easing-smooth);
}

.autocomplete-suggestion:hover {
    transform: translateX(5px);
    background: linear-gradient(135deg, #ffffff, #f8fff8);
    box-shadow: 0 3px 10px rgba(0, 153, 0, 0.1);
}

/* ===========================================
   АНИМАЦИИ ДЛЯ ТЕНЕЙ
   =========================================== */

.shadow {
    transition: all var(--animation-duration) var(--easing-smooth);
}

.shadow:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 153, 0, 0.15);
}

/* ===========================================
   АНИМАЦИИ ДЛЯ МОБИЛЬНЫХ УСТРОЙСТВ
   =========================================== */

@media (max-width: 768px) {
    .button:hover {
        transform: scale(1.05);
    }
    
    .catalog__item:hover {
        transform: translateY(-5px) scale(1.01);
    }
    
    .social a:hover {
        transform: scale(1.15);
    }
    
    /* Уменьшаем интенсивность анимаций на мобильных */
    .button::before {
        display: none;
    }
    
    .incut::before {
        display: none;
    }
}

/* ===========================================
   АНИМАЦИИ ДЛЯ ПРОИЗВОДИТЕЛЬНОСТИ
   =========================================== */

/* Отключаем анимации для пользователей с предпочтением уменьшенной анимации */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ===========================================
   ДОПОЛНИТЕЛЬНЫЕ ЭФФЕКТЫ
   =========================================== */

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

.typewriter {
    overflow: hidden;
    white-space: nowrap;
    animation: typewriter 2s steps(40, end);
}

/* Эффект мерцания для важных элементов */
@keyframes blink {
    0%, 50% {
        opacity: 1;
    }
    51%, 100% {
        opacity: 0.3;
    }
}

.blink {
    animation: blink 1s infinite;
}

/* Эффект радуги для текста */
@keyframes rainbow {
    0% { color: #ff0000; }
    16% { color: #ff8000; }
    33% { color: #ffff00; }
    50% { color: #00ff00; }
    66% { color: #0080ff; }
    83% { color: #8000ff; }
    100% { color: #ff0000; }
}

.rainbow-text {
    animation: rainbow 3s linear infinite;
}

/* Эффект плавания */
@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.float {
    animation: float 3s ease-in-out infinite;
}

/* Эффект вращения */
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.rotate {
    animation: rotate 2s linear infinite;
}

/* Эффект масштабирования */
@keyframes scale {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

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

/* ===========================================
   КОНЕЦ ФАЙЛА АНИМАЦИЙ
   =========================================== */