/* Hero Section Animations */

/* Main title animation */
@keyframes fadeInScale {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Subtitle animation */
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Button container animation */
@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translateX(-30px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Tags animation */
@keyframes fadeInBottom {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Glowing effect for the hero section */
@keyframes glowPulse {
  0% {
    box-shadow: 0 0 0 rgba(88, 241, 255, 0);
  }
  50% {
    box-shadow: 0 0 30px rgba(88, 241, 255, 0.2);
  }
  100% {
    box-shadow: 0 0 0 rgba(88, 241, 255, 0);
  }
}

/* Floating animation for elements */
@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0px);
  }
}

/* Apply animations to hero elements - toned down */
.hero-animate .hero-header h1 {
  /* Simplify to a basic fade-in with no scaling */
  opacity: 0;
  animation: fadeIn 0.6s ease-out forwards;
}

.hero-animate .second-line-hero h3 {
  /* Simplify to a basic fade-in with minimal movement */
  opacity: 0;
  transform: translateY(5px);
  animation: simpleFadeUp 0.6s ease-out 0.2s forwards;
}

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

.hero-animate .hero-button-container {
  /* Simplify to a basic fade-in */
  opacity: 0;
  animation: fadeIn 0.6s ease-out 0.4s forwards;
}

.hero-animate .hero-tags {
  /* Keep this animation as is since you like it */
  animation: fadeInBottom 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.6s forwards;
  opacity: 0;
  animation-fill-mode: forwards;
}

.hero-animate .hero {
  /* Remove the glow pulse animation */
  /* animation: glowPulse 4s ease-in-out infinite; */
}

/* Individual tag animations with staggered delays */
.hero-animate .yc-backed-tag:nth-child(1) {
  animation: fadeInBottom 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.7s forwards, 
             float 6s ease-in-out 2s infinite;
  opacity: 0;
  animation-fill-mode: forwards;
}

.hero-animate .yc-backed-tag:nth-child(2) {
  animation: fadeInBottom 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.9s forwards,
             float 6s ease-in-out 2.5s infinite;
  opacity: 0;
  animation-fill-mode: forwards;
}

.hero-animate .yc-backed-tag:nth-child(3) {
  animation: fadeInBottom 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.1s forwards,
             float 6s ease-in-out 3s infinite;
  opacity: 0;
  animation-fill-mode: forwards;
}

/* Particles animation enhancement */
#particles-js {
  animation: fadeInScale 2s ease-out forwards;
}

/* Special animation for the primary button - toned down */
.hero-animate .primary-button {
  position: relative;
  overflow: hidden;
}

/* Checkmark icon entrance animation */
@keyframes checkmarkEntrance {
  0% {
    opacity: 0;
    transform: scale(0.5) rotate(-20deg);
  }
  50% {
    transform: scale(1.2) rotate(10deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

.security-feature.show-checkmark img {
  animation: checkmarkEntrance 0.5s ease-out forwards;
}

/* Footer animation */
.security-footer {
  opacity: 0;
  animation: fadeIn 1s ease-out 2s forwards;
}

.security-link {
  position: relative;
  overflow: hidden;
}

/* .security-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: #58F1FF;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s ease;
} */

.security-link:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* FAQ Section Animations */
.faqs-section-holder {
  position: relative;
  overflow: hidden;
}

/* Grid pattern animation */
.faqs-section-holder svg {
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.faqs-section-holder.animate-grid svg {
  opacity: 1;
}

/* Simple fade-in for FAQ header */
.faqs-section-holder .centered-header h2 {
  opacity: 0;
  transform: translateY(10px);
  animation: faqHeaderIn 0.8s ease-out forwards;
}

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

/* Animation for question boxes */
/* Removing the question box animation completely to prevent flickering */
/* .question-box.animate {
  opacity: 0;
  animation: faqBoxFadeIn 0.5s ease-out forwards;
}

@keyframes faqBoxFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
} */

/* Chevron rotation animation */
.chevron-up {
  transition: transform 0.4s ease;
}

/* Enhanced floating animation with rotation for the hero section */
.hero-animate {
  /* Remove the animation that might be contributing to the movement */
  /* animation: floatHero 8s ease-in-out infinite; */
}

/* @keyframes floatHero {
  0% {
    transform: translateY(0px) rotate(0deg);
  }
  25% {
    transform: translateY(-5px) rotate(0.5deg);
  }
  50% {
    transform: translateY(0px) rotate(0deg);
  }
  75% {
    transform: translateY(5px) rotate(-0.5deg);
  }
  100% {
    transform: translateY(0px) rotate(0deg);
  }
} */