/* Кастомные анимации для проекта */

/* Fade in анимации */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

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

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

/* Рост элементов */
@keyframes grow {
  from {
    transform: scale(0.8);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Мерцание золотого свечения */
@keyframes glow {
  0%, 100% {
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
  }
  50% {
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.8), 0 0 30px rgba(255, 193, 7, 0.6);
  }
}

/* Пульсация */
@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

/* Рисование маршрута */
@keyframes drawRoute {
  from {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
  }
  to {
    stroke-dasharray: 1000;
    stroke-dashoffset: 0;
  }
}

/* Появление с золотым свечением */
@keyframes revealGlow {
  0% {
    opacity: 0;
    filter: brightness(0.5);
  }
  50% {
    filter: brightness(1.5);
  }
  100% {
    opacity: 1;
    filter: brightness(1);
  }
}

/* Плавное появление карточки */
@keyframes cardAppear {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Вращение компаса */
@keyframes rotateCompass {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Анимация звезд рейтинга */
@keyframes starFill {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Анимация загрузки карты */
@keyframes mapLoad {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Эффект hover для карточек локаций */
@keyframes locationHover {
  0% {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }
  100% {
    box-shadow: 0 10px 25px rgba(255, 215, 0, 0.3), 0 0 20px rgba(255, 193, 7, 0.2);
  }
}

/* Анимация появления галочки */
@keyframes checkmark {
  0% {
    transform: scale(0) rotate(45deg);
    opacity: 0;
  }
  50% {
    transform: scale(1.2) rotate(45deg);
  }
  100% {
    transform: scale(1) rotate(45deg);
    opacity: 1;
  }
}

/* Плавное появление текста */
@keyframes textReveal {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Анимация прогресс-бара */
@keyframes progressFill {
  from {
    width: 0%;
  }
  to {
    width: var(--progress-width);
  }
}

/* Классы для применения анимаций */
.animate-fade-in {
  animation: fadeIn 0.6s ease-in-out;
}

.animate-fade-in-up {
  animation: fadeInUp 0.8s ease-out;
}

.animate-fade-in-down {
  animation: fadeInDown 0.8s ease-out;
}

.animate-grow {
  animation: grow 0.6s ease-out;
}

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

.animate-pulse-custom {
  animation: pulse 2s ease-in-out infinite;
}

.animate-draw-route {
  animation: drawRoute 2s ease-in-out;
}

.animate-reveal-glow {
  animation: revealGlow 1s ease-out;
}

.animate-card-appear {
  animation: cardAppear 0.6s ease-out;
}

.animate-star-fill {
  animation: starFill 0.5s ease-out;
}

.animate-map-load {
  animation: mapLoad 0.8s ease-out;
}

.animate-checkmark {
  animation: checkmark 0.5s ease-out;
}

.animate-text-reveal {
  animation: textReveal 0.8s ease-out;
}

/* Hover эффекты */
.hover-glow:hover {
  animation: glow 1s ease-in-out infinite;
}

.hover-location:hover {
  animation: locationHover 0.3s ease-out forwards;
}