/* Animations */

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

@keyframes pulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4); }
  50% { transform: scale(1.05); box-shadow: 0 0 0 15px rgba(99, 102, 241, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
}

@keyframes float {
  0% { transform: translateY(0px) rotateY(-5deg) rotateX(2deg); }
  50% { transform: translateY(-15px) rotateY(-5deg) rotateX(2deg); }
  100% { transform: translateY(0px) rotateY(-5deg) rotateX(2deg); }
}

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

/* Animation Classes */
.animate-on-scroll {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  will-change: opacity, visibility;
}

.animate-on-scroll.is-visible {
  opacity: 1;
  visibility: visible;
  animation: fadeInUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }

/* Apply float to hero image */
.hero-image-container .hero-image {
  animation: float 6s ease-in-out infinite;
}

@media (max-width: 992px) {
  .hero-image-container .hero-image {
    animation: float-mobile 6s ease-in-out infinite;
  }
}