/* Minimal Animations for Boost Productivity Page */

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

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

/* Staggered animations for multiple elements */
.animate-on-scroll.stagger-1 { transition-delay: 0.1s; }
.animate-on-scroll.stagger-2 { transition-delay: 0.2s; }
.animate-on-scroll.stagger-3 { transition-delay: 0.3s; }
.animate-on-scroll.stagger-4 { transition-delay: 0.4s; }

/* Hover animations for cards */
.boost-benefits__card,
.boost-usecases__card,
.roi-stat,
.boost-faq__item {
  transition: all 0.3s ease;
}

.boost-benefits__card:hover,
.boost-usecases__card:hover,
.roi-stat:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* FAQ item hover enhancement */
.boost-faq__item:hover {
  background: rgba(130, 114, 254, 0.02);
}

/* Button hover animations */
.boost-hero__btn,
.boost-cta__btn,
.boost-faq__question {
  transition: all 0.3s ease;
}

.boost-hero__btn:hover,
.boost-cta__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

/* Hero section animations */
.boost-hero__title,
.boost-hero__btn {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.boost-hero__subtitle {
  opacity: 1;
  transform: translateY(0);
  transition: none;
}

.boost-hero__title.animate-in {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.2s;
}

.boost-hero__btn.animate-in {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.6s;
}

/* Section entrance animations */
.boost-benefits,
.boost-usecases,
.boost-how-it-works,
.boost-roi,
.boost-faq,
.boost-cta {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.boost-benefits.animate-in,
.boost-usecases.animate-in,
.boost-how-it-works.animate-in,
.boost-roi.animate-in,
.boost-faq.animate-in,
.boost-cta.animate-in {
  opacity: 1;
  transform: translateY(0);
}

/* Stats grid animations */
.roi-stat {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.roi-stat.animate-in {
  opacity: 1;
  transform: translateY(0);
}

/* FAQ items staggered animation */
.boost-faq__item {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.boost-faq__item.animate-in {
  opacity: 1;
  transform: translateY(0);
}

/* Chat message animations */
.boost-how-it-works__chat-message {
  opacity: 0;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Customer message - slides in from left */
.boost-how-it-works__chat-message.customer {
  transform: translateX(-50px);
}

.boost-how-it-works__chat-message.customer.animate-in {
  opacity: 1;
  transform: translateX(0);
}

/* AI message - slides in from right */
.boost-how-it-works__chat-message.ai {
  transform: translateX(50px);
}

.boost-how-it-works__chat-message.ai.animate-in {
  opacity: 1;
  transform: translateX(0);
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  .animate-on-scroll,
  .boost-benefits__card,
  .boost-usecases__card,
  .roi-stat,
  .boost-faq__item,
  .boost-hero__title,
  .boost-hero__subtitle,
  .boost-hero__btn,
  .boost-benefits,
  .boost-usecases,
  .boost-how-it-works,
  .boost-roi,
  .boost-faq,
  .boost-cta,
  .boost-how-it-works__chat-message {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}