/* Animation Utilities */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

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

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

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

/* Apply animations to elements */
.hero-text h1 {
  animation: slideInRight 0.8s ease-out;
}

.hero-text p {
  animation: slideInRight 0.8s ease-out 0.2s forwards;
  opacity: 0;
  animation-fill-mode: forwards;
}

.hero-cta {
  animation: slideInRight 0.8s ease-out 0.4s forwards;
  opacity: 0;
  animation-fill-mode: forwards;
}

.hero-image {
  animation: slideInUp 0.8s ease-out 0.6s forwards;
  opacity: 0;
  animation-fill-mode: forwards;
}

.demo-card {
  animation: float 6s ease-in-out infinite;
}

.btn-primary {
  transition: all 0.3s ease;
}

.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 7px 14px rgba(0, 0, 0, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);
}

.btn-primary:active {
  transform: translateY(-1px);
}

/* AOS (Animate On Scroll) simulation */
[data-aos] {
  opacity: 0;
  transition: opacity 0.8s ease, transform 0.8s ease;
}

[data-aos="fade-up"] {
  transform: translateY(30px);
}

[data-aos="fade-right"] {
  transform: translateX(-30px);
}

[data-aos].aos-animate {
  opacity: 1;
  transform: translate(0);
}

/* Highlighted CTA pulse animation */
#pricing-cta, #final-cta {
  animation: pulse 2s infinite;
}

/* Video player hover effects */
.play-button {
  transition: all 0.3s ease;
}

.video-placeholder:hover .play-button {
  transform: scale(1.1);
  background-color: rgba(255, 255, 255, 0.3);
}

/* Tab transitions */
.tab-pane {
  transition: opacity 0.3s ease;
}

.tab-btn {
  position: relative;
}

.tab-btn::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background-color: var(--color-primary-600);
  transition: width 0.3s ease, left 0.3s ease;
}

.tab-btn:hover::after {
  width: 100%;
  left: 0;
}

.tab-btn.active::after {
  width: 100%;
  left: 0;
}

/* FAQ accordion animation */
.faq-question {
  transition: background-color 0.3s ease;
}

.faq-question:hover {
  background-color: var(--color-gray-50);
}

.faq-icon {
  transition: transform 0.3s ease;
}

.faq-item.active .faq-icon {
  transform: rotate(45deg);
}

.faq-answer {
  transition: max-height 0.5s ease, padding 0.5s ease;
}

/* Navigation hover effect */
.nav-menu a {
  position: relative;
}

.nav-menu a::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--color-primary-600);
  transition: width 0.3s ease;
}

.nav-menu a:hover::after {
  width: 100%;
}

/* Feature card hover animation */
.feature-card, .use-case-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-card:hover, .use-case-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}

/* Feature icon animation */
.feature-icon i {
  transition: transform 0.3s ease;
}

.feature-card:hover .feature-icon i {
  transform: scale(1.2);
}

/* Step number animation */
.step-number {
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.step:hover .step-number {
  transform: scale(1.1);
  background-color: var(--color-primary-600);
}

/* Mobile menu animation */
.mobile-menu-toggle {
  transition: transform 0.3s ease;
}

.mobile-menu-toggle:hover {
  transform: scale(1.1);
}

.mobile-menu-toggle span {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.mobile-menu-toggle.active span:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}

.mobile-menu-toggle.active span:nth-child(2) {
  opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}

/* Mobile menu animation */
.nav-mobile {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease;
}

.nav-mobile.active {
  max-height: 500px;
}