/* Animation Keyframes */
@keyframes fadeIn {
  0% { opacity: 0; transform: translateY(5px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes fadeOut {
  0% { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}

/* Scroll Animation Classes */
.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-in.appear {
  opacity: 1;
  transform: translateY(0);
}

.slide-in-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.slide-in-left.appear {
  opacity: 1;
  transform: translateX(0);
}

.slide-in-right {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.slide-in-right.appear {
  opacity: 1;
  transform: translateX(0);
}

.scale-in {
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.scale-in.appear {
  opacity: 1;
  transform: scale(1);
}

/* Staggered animation delays */
.delay-100 { transition-delay: 0.1s; }
.delay-200 { transition-delay: 0.2s; }
.delay-300 { transition-delay: 0.3s; }
.delay-400 { transition-delay: 0.4s; }
.delay-500 { transition-delay: 0.5s; }
.delay-600 { transition-delay: 0.6s; }
.delay-700 { transition-delay: 0.7s; }
.delay-800 { transition-delay: 0.8s; }
.delay-900 { transition-delay: 0.9s; }
.delay-1000 { transition-delay: 1s; }

/* Set proper transform origins for animations */
.section-intro, 
.features-split,
.steps-grid,
.specs-split,
.footer-content {
  transform-origin: center;
}

/* Animation Related Properties */
section {
  overflow: hidden;
}

/* Image Loading Placeholder - Shimmer Effect */
/* Exclude logos, SVGs, and nav/footer images which load instantly */
img:not([src*="data:"]):not(.loaded):not(.logo-svg):not([src$=".svg"]):not(.nav img):not(.footer img) {
  background: linear-gradient(110deg, #f0f0f0 8%, #f8f8f8 18%, #f0f0f0 33%);
  background-size: 200% 100%;
  animation: shimmer 1.5s linear infinite;
  min-height: 100px; /* Prevent collapsed images */
}

/* Ensure logo and nav images never get shimmer */
.logo-svg,
.nav img,
.footer img,
img[src$=".svg"] {
  background: none !important;
  animation: none !important;
  min-height: auto !important;
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Stop shimmer once image has loaded */
img.loaded {
  animation: none;
  background: none;
}