/* Barneo Filters Widget - Animations */

/* Skeleton pulse animation */
@keyframes barneo-skeleton-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* Fade in animation */
@keyframes barneo-fade-in {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade out animation */
@keyframes barneo-fade-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

/* Scale in animation */
@keyframes barneo-scale-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Slide in from left */
@keyframes barneo-slide-in-left {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Slide in from right */
@keyframes barneo-slide-in-right {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Bounce animation */
@keyframes barneo-bounce {
  0%,
  20%,
  53%,
  80%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  40%,
  43% {
    transform: translate3d(0, -8px, 0);
  }
  70% {
    transform: translate3d(0, -4px, 0);
  }
  90% {
    transform: translate3d(0, -2px, 0);
  }
}

/* Shake animation */
@keyframes barneo-shake {
  0%,
  100% {
    transform: translateX(0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translateX(-2px);
  }
  20%,
  40%,
  60%,
  80% {
    transform: translateX(2px);
  }
}

/* Rotate animation */
@keyframes barneo-rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Pulse animation */
@keyframes barneo-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

/* Checkbox animations */
@keyframes barneo-checkbox-check {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

/* Filter value hover animation */
@keyframes barneo-filter-hover {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(4px);
  }
}

/* Toggle icon rotation */
@keyframes barneo-toggle-rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(180deg);
  }
}

/* Loading spinner */
@keyframes barneo-spinner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Apply animations to elements */
.barneo-filters-widget {
  animation: barneo-fade-in var(--barneo-transition-normal);
}

.barneo-filter-value {
  animation: barneo-slide-in-left var(--barneo-transition-normal);
}

.barneo-filter-toggle-icon.expanded {
  transform: rotate(180deg);
}

/* Skeleton animations */
.barneo-filter-skeleton-header,
.barneo-filter-skeleton-checkbox,
.barneo-filter-skeleton-label,
.barneo-filter-skeleton-toggle-text,
.barneo-filter-skeleton-toggle-icon {
  animation: barneo-skeleton-pulse 2s infinite;
}

/* Loading state animations */
.barneo-filters-widget--loading .barneo-filter-skeleton-group {
  animation: barneo-fade-in var(--barneo-transition-normal);
}

/* Error state animations */
.barneo-filters-widget--error {
  animation: barneo-shake var(--barneo-transition-fast);
}

/* Success state animations */
.barneo-filters-widget--success {
  animation: barneo-pulse var(--barneo-transition-fast);
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .barneo-filters-widget,
  .barneo-filter-value,
  .barneo-filter-checkbox-input,
  .barneo-filter-toggle,
  .barneo-filter-skeleton-header,
  .barneo-filter-skeleton-checkbox,
  .barneo-filter-skeleton-label,
  .barneo-filter-skeleton-toggle-text,
  .barneo-filter-skeleton-toggle-icon {
    animation: none;
    transition: none;
  }

  .barneo-filter-toggle-icon.expanded {
    transform: rotate(180deg);
  }
}