/* Barneo Search Widget - Animations */

/* Основная анимация вращения для спиннеров */
@keyframes barneo-spin {
  0% { 
    transform: rotate(0deg); 
  }
  100% { 
    transform: rotate(360deg); 
  }
}

/* Анимация пульсации для скелетонов */
@keyframes barneo-skeleton-pulse {
  0% {
    background-color: var(--barneo-bg-skeleton);
  }
  50% {
    background-color: var(--barneo-gray-300);
  }
  100% {
    background-color: var(--barneo-bg-skeleton);
  }
}



/* Анимация появления выпадающего меню */
@keyframes barneo-dropdown-enter {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Анимация исчезновения выпадающего меню */
@keyframes barneo-dropdown-exit {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

/* Анимация появления результатов поиска */
@keyframes barneo-results-enter {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Анимация исчезновения результатов поиска */
@keyframes barneo-results-exit {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.95);
  }
}

/* Анимация фокуса для инпута */
@keyframes barneo-input-focus {
  0% {
    box-shadow: 0 0 0 0 var(--barneo-primary-light);
  }
  100% {
    box-shadow: 0 0 0 3px var(--barneo-primary-light);
  }
}

/* Анимация нажатия кнопки */
@keyframes barneo-button-press {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
  }
}

/* Анимация появления элемента списка */
@keyframes barneo-list-item-enter {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Анимация исчезновения элемента списка */
@keyframes barneo-list-item-exit {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(10px);
  }
}

/* Анимация загрузки */
@keyframes barneo-loading-dots {
  0%, 20% {
    color: var(--barneo-text-muted);
    text-shadow: 0.25em 0 0 var(--barneo-text-muted), 0.5em 0 0 var(--barneo-text-muted);
  }
  40% {
    color: var(--barneo-text-secondary);
    text-shadow: 0.25em 0 0 var(--barneo-text-muted), 0.5em 0 0 var(--barneo-text-muted);
  }
  60% {
    text-shadow: 0.25em 0 0 var(--barneo-text-secondary), 0.5em 0 0 var(--barneo-text-muted);
  }
  80%, 100% {
    text-shadow: 0.25em 0 0 var(--barneo-text-secondary), 0.5em 0 0 var(--barneo-text-secondary);
  }
}

/* Анимация ошибки */
@keyframes barneo-error-shake {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-5px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(5px);
  }
}

/* Применение анимаций к элементам */
.barneo-search-widget .suggestions-dropdown {
  animation: barneo-dropdown-enter 0.2s ease-out;
}

.barneo-search-widget .search-results {
  animation: barneo-results-enter 0.2s ease-out;
}



.barneo-search-widget .search-button:active {
  animation: barneo-button-press 0.1s ease-out;
}

/* Анимация фокуса для input и button только когда включен focus */
.barneo-search-widget--focus-enabled .search-input:focus {
  animation: barneo-input-focus 0.2s ease-out;
}

.barneo-search-widget--focus-enabled .search-button:focus {
  animation: barneo-input-focus 0.2s ease-out;
}

.barneo-search-widget .history-item,
.barneo-search-widget .hint-item,
.barneo-search-widget .product-item {
  animation: barneo-list-item-enter 0.2s ease-out;
}

.barneo-search-widget .error-state {
  animation: barneo-error-shake 0.5s ease-in-out;
}

/* Анимация для скелетонов */
.barneo-search-widget .skeleton-title,
.barneo-search-widget .skeleton-tag,
.barneo-search-widget .skeleton-image,
.barneo-search-widget .skeleton-product-name,
.barneo-search-widget .skeleton-product-price {
  animation: barneo-skeleton-pulse 1.5s ease-in-out infinite;
}

/* Анимация для спиннеров */
.barneo-search-widget .search-input__spinner,
.barneo-search-widget .search-results__spinner {
  animation: barneo-spin 1s linear infinite;
}

/* Плавные переходы для всех интерактивных элементов */
.barneo-search-widget * {
  transition: 
    background-color var(--barneo-transition-normal),
    border-color var(--barneo-transition-normal),
    color var(--barneo-transition-normal),
    transform var(--barneo-transition-normal),
    opacity var(--barneo-transition-normal),
    box-shadow var(--barneo-transition-normal);
}

/* Оптимизация производительности анимаций */
.barneo-search-widget .suggestions-dropdown,
.barneo-search-widget .search-results,
.barneo-search-widget .search-input,
.barneo-search-widget .search-button {
  will-change: transform, opacity;
}

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