/* Base state - elements are VISIBLE by default */
.service-card, 
.material-card, 
.industry-card, 
.about .section-title, 
.about .section-desc, 
.stat-item {
  opacity: 1;
  transform: none;
  transition: all 0.6s ease;
}

/* Animation states - only applied when intersection observer triggers them */
.service-card.preparing-animation {
  opacity: 0;
  transform: scale(0.95);
  filter: blur(2px);
}

.service-card.animate {
  animation: serviceReveal 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.material-card.preparing-animation {
  opacity: 0;
  transform: rotate(180deg) scale(0.8);
}

.material-card.animate {
  animation: materialReveal 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.industry-card.preparing-animation {
  opacity: 0;
  transform: rotateY(-90deg);
}

.industry-card.animate {
  animation: industryFlip 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.about .section-title.preparing-animation,
.about .section-desc.preparing-animation,
.stat-item.preparing-animation {
  opacity: 0;
  transform: translateY(40px);
}

.about .section-title.animate,
.about .section-desc.animate,
.stat-item.animate {
  animation: fadeInUp 0.8s ease forwards;
}

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

/* Gallery items */
.gallery-item {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.gallery-item.preparing-animation {
  opacity: 0;
  transform: translateY(50px);
}

.gallery-item.animate {
  opacity: 1;
  transform: translateY(0);
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .service-card,
  .material-card,
  .industry-card,
  .about .section-title,
  .about .section-desc,
  .stat-item,
  .gallery-item {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
}

/* Dark mode compatibility */
.dark-mode {
  --gray-200: #4b5563;
  --gray-600: #e5e7eb;
}