/* Animation keyframes */
@keyframes float {
  0% {
    transform: translateY(0) translateX(0);
  }
  25% {
    transform: translateY(-20px) translateX(10px);
  }
  50% {
    transform: translateY(10px) translateX(-15px);
  }
  75% {
    transform: translateY(-15px) translateX(-10px);
  }
  100% {
    transform: translateY(0) translateX(0);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.8;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

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

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

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

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

@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-5px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(5px);
  }
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-20px);
  }
  60% {
    transform: translateY(-10px);
  }
}

@keyframes typing {
  0%, 100% {
    content: ".";
  }
  33% {
    content: "..";
  }
  66% {
    content: "...";
  }
}

/* Animation classes */
.animate-in {
  animation: fadeIn 1s ease-out forwards;
}

.animate-in-delayed {
  opacity: 0;
  animation: fadeIn 1s ease-out 0.3s forwards;
}

.animate-in-delayed-more {
  opacity: 0;
  animation: fadeIn 1s ease-out 0.6s forwards;
}

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

.animate-float {
  animation: float 8s infinite ease-in-out;
}

.animate-shake {
  animation: shake 0.8s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

.animate-bounce {
  animation: bounce 2s infinite;
}

/* Intersection Observer animations */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in.active {
  opacity: 1;
  transform: translateY(0);
}

.fade-in-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in-left.active {
  opacity: 1;
  transform: translateX(0);
}

.fade-in-right {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in-right.active {
  opacity: 1;
  transform: translateX(0);
}

/* Hover effects */
.hover-scale {
  transition: transform 0.3s ease;
}

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

.hover-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}

.hover-glow {
  transition: box-shadow 0.3s ease;
}

.hover-glow:hover {
  box-shadow: 0 0 15px rgba(124, 58, 237, 0.5);
}

/* Section animation */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered animations */
.stagger-item {
  opacity: 0;
  transform: translateY(20px);
}

.stagger-item.visible {
  animation: fadeIn 0.6s ease-out forwards;
}

.stagger-item:nth-child(1).visible {
  animation-delay: 0.1s;
}

.stagger-item:nth-child(2).visible {
  animation-delay: 0.2s;
}

.stagger-item:nth-child(3).visible {
  animation-delay: 0.3s;
}

.stagger-item:nth-child(4).visible {
  animation-delay: 0.4s;
}

.stagger-item:nth-child(5).visible {
  animation-delay: 0.5s;
}

.stagger-item:nth-child(6).visible {
  animation-delay: 0.6s;
}

/* Special effects */
.text-gradient {
  background: linear-gradient(135deg, var(--color-purple-700), var(--color-blue-600));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.btn-pulse {
  animation: pulse 2s infinite;
}

.bg-gradient-animate {
  background: linear-gradient(-45deg, var(--color-purple-500), var(--color-blue-500), var(--color-purple-600), var(--color-blue-600));
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Scroll indicator */
.scroll-indicator {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 50px;
  border: 2px solid var(--color-purple-600);
  border-radius: 15px;
  display: flex;
  justify-content: center;
  padding-top: 10px;
}

.scroll-indicator::before {
  content: '';
  width: 8px;
  height: 8px;
  background: var(--color-purple-600);
  border-radius: 50%;
  animation: scrollAnimation 2s infinite;
}

@keyframes scrollAnimation {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(20px);
    opacity: 0;
  }
}

/* Icon animations */
.icon-stopwatch::before {
  content: "⏱️";
  font-size: 24px;
}

.icon-dollar::before {
  content: "💰";
  font-size: 24px;
}

.icon-handshake::before {
  content: "🤝";
  font-size: 24px;
}

.icon-target::before {
  content: "🎯";
  font-size: 24px;
}

.icon-voice::before {
  content: "🎙️";
  font-size: 24px;
}

.icon-dashboard::before {
  content: "📊";
  font-size: 24px;
}

.icon-chat::before {
  content: "💬";
  font-size: 24px;
}

.icon.lock::before {
  content: "🔐";
  font-size: 24px;
}

.icon.bulb::before {
  content: "💡";
  font-size: 24px;
}

.icon.rocket::before {
  content: "🚀";
  font-size: 24px;
}