/* =============================================================================
   MINIMAL ANIMATIONS - Минималистичные анимации для творческой мастерской
   ============================================================================= */

/* Базовые анимации (только 3 для функциональности) */

/* 1. Анимация появления */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 2. Анимация скольжения */
@keyframes slideIn {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

/* 3. Пульсация для кнопок */
@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
}

/* =============================================================================
   ПРИМЕНЕНИЕ АНИМАЦИЙ
   ============================================================================= */

/* Появление элементов при загрузке */
.fade-in {
  animation: fadeIn 0.5s ease-out;
}

/* Скольжение для модальных окон */
.slide-in {
  animation: slideIn 0.3s ease-out;
}

/* Пульсация для активных кнопок */
.pulse {
  animation: pulse 2s infinite;
}

/* =============================================================================
   HOVER ЭФФЕКТЫ (только transition)
   ============================================================================= */

/* Плавное увеличение при hover */
.hover-scale {
  transition: transform 0.2s ease;
}

.hover-scale:hover {
  transform: scale(1.05);
}

/* Плавное изменение цвета при hover */
.hover-color {
  transition: color 0.2s ease;
}

/* Плавное изменение фона при hover */
.hover-bg {
  transition: background-color 0.2s ease;
}

/* =============================================================================
   LOADING АНИМАЦИЯ (простейшая)
   ============================================================================= */

.loading {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--light, #F8F9FA);
  border-top: 2px solid var(--accent, #3498DB);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* =============================================================================
   ACCESSIBILITY
   ============================================================================= */

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

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