/* Section Header Staggered Animations */

/* Logo Animation - First to appear */
@keyframes logoFadeIn {
  0% {
    opacity: 0;
    transform: translateX(50px) translateY(20px) scale(0.8);
    filter: blur(3px);
  }
  50% {
    opacity: 0.7;
    transform: translateX(25px) translateY(10px) scale(0.9);
    filter: blur(1px);
  }
  100% {
    opacity: 1;
    transform: translateX(0) translateY(0) scale(1);
    filter: blur(0);
  }
}

.animate-logo-fade-in {
  opacity: 0;
  transform-origin: center;
  transition: all 0.3s ease;
}

.animate-logo-fade-in.animate {
  animation: logoFadeIn 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Subtitle Animation - Second to appear */
@keyframes subtitleSlideIn {
  0% {
    opacity: 0;
    transform: translateX(35px) translateY(15px) scale(0.9);
    filter: blur(1.5px);
  }
  50% {
    opacity: 0.8;
    transform: translateX(15px) translateY(5px) scale(0.95);
    filter: blur(0.5px);
  }
  100% {
    opacity: 1;
    transform: translateX(0) translateY(0) scale(1);
    filter: blur(0);
  }
}

.animate-subtitle-slide-in {
  opacity: 0;
  transform-origin: center;
  transition: all 0.3s ease;
}

.animate-subtitle-slide-in.animate {
  animation: subtitleSlideIn 1.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Title Animation - Third to appear */
@keyframes titleSlideIn {
  0% {
    opacity: 0;
    transform: translateX(40px) translateY(30px) scale(0.95);
    filter: blur(2px);
  }
  50% {
    opacity: 0.8;
    transform: translateX(20px) translateY(15px) scale(0.98);
    filter: blur(1px);
  }
  100% {
    opacity: 1;
    transform: translateX(0) translateY(0) scale(1);
    filter: blur(0);
  }
}

.animate-title-slide-in {
  opacity: 0;
  transform-origin: center;
  transition: all 0.3s ease;
}

.animate-title-slide-in.animate {
  animation: titleSlideIn 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Description Animation - Last to appear */
@keyframes descriptionFadeIn {
  0% {
    opacity: 0;
    transform: translateX(30px) translateY(20px) scale(0.98);
    filter: blur(1px);
  }
  50% {
    opacity: 0.7;
    transform: translateX(15px) translateY(10px) scale(0.99);
    filter: blur(0.5px);
  }
  100% {
    opacity: 1;
    transform: translateX(0) translateY(0) scale(1);
    filter: blur(0);
  }
}

.animate-description-fade-in {
  opacity: 0;
  transform-origin: center;
  transition: all 0.3s ease;
}

.animate-description-fade-in.animate {
  animation: descriptionFadeIn 2.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Intersection Observer Animation Trigger */
.section-header {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.6s ease;
}

.section-header.animate {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered Animation Delays */
.animate-logo-fade-in.animate {
  animation-delay: 0.1s;
}

.animate-subtitle-slide-in.animate {
  animation-delay: 0.3s;
}

.animate-title-slide-in.animate {
  animation-delay: 0.5s;
}

.animate-description-fade-in.animate {
  animation-delay: 0.7s;
}

/* Animation elements start invisible and become visible when .animate class is added */

/* Responsive adjustments */
@media (max-width: 768px) {
  @keyframes logoFadeIn {
    0% {
      opacity: 0;
      transform: translateX(30px) translateY(15px) scale(0.85);
      filter: blur(2px);
    }
    100% {
      opacity: 1;
      transform: translateX(0) translateY(0) scale(1);
      filter: blur(0);
    }
  }
  
  @keyframes subtitleSlideIn {
    0% {
      opacity: 0;
      transform: translateX(25px) translateY(10px) scale(0.9);
      filter: blur(1px);
    }
    100% {
      opacity: 1;
      transform: translateX(0) translateY(0) scale(1);
      filter: blur(0);
    }
  }
  
  @keyframes titleSlideIn {
    0% {
      opacity: 0;
      transform: translateX(30px) translateY(20px) scale(0.95);
      filter: blur(1px);
    }
    100% {
      opacity: 1;
      transform: translateX(0) translateY(0) scale(1);
      filter: blur(0);
    }
  }
  
  @keyframes descriptionFadeIn {
    0% {
      opacity: 0;
      transform: translateX(20px) translateY(15px) scale(0.98);
      filter: blur(0.5px);
    }
    100% {
      opacity: 1;
      transform: translateX(0) translateY(0) scale(1);
      filter: blur(0);
    }
  }
}