/* Scroll-triggered Fade Animations - Base Styles */

/* Base animation styles */
.fade-element {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-delay: 0s;
}

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

/* Hero-specific animation classes that preserve layout */
.hero-fade {
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-delay: 0s;
}

.hero-fade.fade-in {
  opacity: 1;
}

.hero-fade.hero-delay-1 { transition-delay: 0.1s; }
.hero-fade.hero-delay-2 { transition-delay: 0.2s; }
.hero-fade.hero-delay-3 { transition-delay: 0.3s; }
.hero-fade.hero-delay-4 { transition-delay: 0.4s; }

/* Staggered animations for child elements */
.fade-element.delay-1 { transition-delay: 0.1s; }
.fade-element.delay-2 { transition-delay: 0.2s; }
.fade-element.delay-3 { transition-delay: 0.3s; }
.fade-element.delay-4 { transition-delay: 0.4s; }
.fade-element.delay-5 { transition-delay: 0.5s; }
.fade-element.delay-6 { transition-delay: 0.6s; }

/* Scale animation */
.fade-element.fade-scale {
  transform: scale(0.9) translateY(30px);
}

.fade-element.fade-scale.fade-in {
  transform: scale(1) translateY(0);
}

/* Hero section special animation - REMOVED to prevent layout issues */
/* .hero .fade-element {
  transform: translateY(80px);
} */

/* Grid items stagger */
.grid .fade-element:nth-child(1) { transition-delay: 0.1s; }
.grid .fade-element:nth-child(2) { transition-delay: 0.2s; }
.grid .fade-element:nth-child(3) { transition-delay: 0.3s; }
.grid .fade-element:nth-child(4) { transition-delay: 0.4s; }
.grid .fade-element:nth-child(5) { transition-delay: 0.5s; }
.grid .fade-element:nth-child(6) { transition-delay: 0.6s; }

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .fade-element, .hero-fade {
    transition: opacity 0.3s ease;
    transform: none !important;
  }
}