/* =====================================================
   ANIMATIONS.CSS - Все анимации для сайта DoTerra
   ===================================================== */

/* Анимация вращения для спиннера загрузки */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Анимация градиентного фона */
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

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

/* Вращение на 360 градусов */
@keyframes rotate360 {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Мерцающий текст DoTerra */
@keyframes textShimmer {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}

/* Плавающие иконки */
@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(5deg); }
}

@keyframes sparkle {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.2); }
}

/* Бегущий блик на кнопке */
@keyframes buttonShine {
  0% {
    left: -100%;
  }
  100% {
    left: 200%;
  }
}

/* Пульсирующее свечение кнопки */
@keyframes buttonGlow {
  0%, 100% {
    box-shadow: 0 8px 35px rgba(255, 59, 92, 0.6),
                0 0 30px rgba(255, 107, 107, 0.4),
                inset 0 0 20px rgba(255, 255, 255, 0.1);
  }
  50% {
    box-shadow: 0 12px 50px rgba(255, 59, 92, 0.8),
                0 0 60px rgba(255, 107, 107, 0.6),
                inset 0 0 30px rgba(255, 255, 255, 0.2);
  }
}

/* Прыгающая иконка */
@keyframes iconBounce {
  0%, 100% {
    transform: scale(1) rotate(0deg);
  }
  25% {
    transform: scale(1.2) rotate(-10deg);
  }
  75% {
    transform: scale(1.2) rotate(10deg);
  }
}

/* Плавающие частицы на фоне */
@keyframes particleFloat {
  0%, 100% {
    transform: translateY(0) translateX(0) scale(1);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(-100vh) translateX(50px) scale(0);
  }
}

/* Ripple эффект при клике */
@keyframes rippleEffect {
  to {
    transform: scale(4);
    opacity: 0;
  }
}