/* Fixed Scroll Animation Styles */

/* Base animation styles for hidden elements */
.fade-in,
.slide-in {
  opacity: 0;
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  will-change: opacity, transform;
  /* Force hardware acceleration for smoother animations */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Visible state (triggered by JS) */
.fade-in.visible {
  opacity: 1;
}

/* Basic slide-in animation (from bottom - default) */
.slide-in {
  transform: translateY(50px);
}

/* Visible state for slide-in elements */
.slide-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Additional directional variants */
.slide-in.from-left {
  transform: translateX(-50px);
}

.slide-in.from-right {
  transform: translateX(50px);
}

.slide-in.from-left.visible,
.slide-in.from-right.visible {
  transform: translateX(0);
}

/* Cascade effect for grid items */
.team-grid .team-member,
.investors-grid .investor-logo,
.product-card {
  transition-duration: 0.6s;
}

/* Hero section needs special treatment - always visible but animated */
#hero .fade-in,
#hero .slide-in {
  transition-delay: 0.2s;
}

/* Ensure everything is visible when JavaScript is disabled */
.no-js .fade-in,
.no-js .slide-in {
  opacity: 1;
  transform: none;
  transition: none;
}

/* Add this class to body via JS if animations are causing issues */
.disable-animations .fade-in,
.disable-animations .slide-in {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* Animation-specific classes that can be added to elements */
.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; }

/* Respect user preferences for reduced motion */
@media (prefers-reduced-motion: reduce) {
  .fade-in,
  .slide-in {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}