/* ======================================
   Scroll Animations CSS
   Animation effects for home page elements
   ====================================== */

/* Base animation classes */
.animate-on-scroll {
  opacity: 0;
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.animate-on-scroll.animated {
  opacity: 1;
}

/* Fade In Up Animation (for articles and specifications) */
.fade-in-up {
  transform: translateY(50px);
}

.fade-in-up.animated {
  transform: translateY(0);
}

/* Fade In Left Animation */
.fade-in-left {
  transform: translateX(-50px);
}

.fade-in-left.animated {
  transform: translateX(0);
}

/* Fade In Right Animation */
.fade-in-right {
  transform: translateX(50px);
}

.fade-in-right.animated {
  transform: translateX(0);
}

/* Fade In Animation */
.fade-in {
  transform: scale(0.95);
}

.fade-in.animated {
  transform: scale(1);
}

/* Zoom In Animation */
.zoom-in {
  transform: scale(0.8);
}

.zoom-in.animated {
  transform: scale(1);
}

/* Slide Up Animation */
.slide-up {
  transform: translateY(100px);
}

.slide-up.animated {
  transform: translateY(0);
}

/* Animation delays for staggered effects */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }
.delay-500 { transition-delay: 500ms; }
.delay-600 { transition-delay: 600ms; }
.delay-700 { transition-delay: 700ms; }
.delay-800 { transition-delay: 800ms; }

/* Specific styles for specification cards */
.spec-card-animate {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.spec-card-animate.animated {
  opacity: 1;
  transform: translateY(0);
}

/* Specific styles for article cards */
.article-card-animate {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.article-card-animate.animated {
  opacity: 1;
  transform: translateY(0);
}

/* Section title animations */
.section-title-animate {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s ease-out;
}

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

/* Section content animations */
.section-content-animate {
  opacity: 0;
  transition: all 0.7s ease-out;
}

.section-content-animate.animated {
  opacity: 1;
}

.section-image-left {
  transform: translateX(-60px);
}

.section-image-left.animated {
  transform: translateX(0);
}

.section-image-right {
  transform: translateX(60px);
}

.section-image-right.animated {
  transform: translateX(0);
}

.section-text-left {
  transform: translateX(-40px);
}

.section-text-left.animated {
  transform: translateX(0);
}

.section-text-right {
  transform: translateX(40px);
}

.section-text-right.animated {
  transform: translateX(0);
}

/* Partner section animations */
.partner-section-animate {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s ease-out;
}

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

/* Counter animation enhancement */
.counter-animate {
  opacity: 0;
  transform: scale(0.9);
  transition: all 0.5s ease-out;
}

.counter-animate.animated {
  opacity: 1;
  transform: scale(1);
}

/* Hover effects enhancement */
.hover-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

/* Pulse animation for icons */
@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

.pulse-on-hover:hover {
  animation: pulse 1s infinite;
}