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

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

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

@keyframes pulse-ring {
  0% {
    box-shadow: 0 0 0 0 rgba(109, 40, 217, 0.35);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(109, 40, 217, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(109, 40, 217, 0);
  }
}

.hero-animate {
  animation: fadeInUp 0.7s ease both;
}

.hero-animate-delay-1 {
  animation-delay: 0.12s;
}

.hero-animate-delay-2 {
  animation-delay: 0.24s;
}

.hero-animate-delay-3 {
  animation-delay: 0.36s;
}

.hero-bg {
  background: linear-gradient(
    135deg,
    var(--background) 0%,
    rgba(139, 92, 246, 0.08) 50%,
    var(--background) 100%
  );
  background-size: 200% 200%;
  animation: gradientShift 12s ease infinite;
}

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }

.phone-mockup {
  animation: float 5s ease-in-out infinite;
}

.step-number {
  animation: pulse-ring 2.5s ease infinite;
}

@media (prefers-reduced-motion: reduce) {
  .hero-animate,
  .hero-animate-delay-1,
  .hero-animate-delay-2,
  .hero-animate-delay-3,
  .hero-bg,
  .phone-mockup,
  .step-number {
    animation: none;
  }

  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}