/* Fade Up Animation Styles */

/* Initial state for elements that will animate - only on frontend */
body.bricks-is-frontend .fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: none; /* Disable CSS transitions, let GSAP handle it */
}

/* Variants for different timing and distances - only on frontend */
body.bricks-is-frontend .fade-up-small {
  opacity: 0;
  transform: translateY(15px);
}

body.bricks-is-frontend .fade-up-large {
  opacity: 0;
  transform: translateY(50px);
}

/* Alternative entrance animations - only on frontend */
body.bricks-is-frontend .fade-in {
  opacity: 0;
}

body.bricks-is-frontend .fade-left {
  opacity: 0;
  transform: translateX(-30px);
}

body.bricks-is-frontend .fade-right {
  opacity: 0;
  transform: translateX(30px);
}

/* Scale entrance - only on frontend */
body.bricks-is-frontend .fade-scale {
  opacity: 0;
  transform: scale(0.95);
}

/* Stagger delay classes for multiple elements */
.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }
.stagger-4 { animation-delay: 0.4s; }
.stagger-5 { animation-delay: 0.5s; }

/* Optional: Fallback CSS animations for when JS is disabled */
@media (prefers-reduced-motion: no-preference) {
  .fade-up.no-js {
    animation: fadeUpKeyframe 0.8s ease-out forwards;
  }
  
  .fade-in.no-js {
    animation: fadeInKeyframe 0.6s ease-out forwards;
  }
}

@keyframes fadeUpKeyframe {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInKeyframe {
  to {
    opacity: 1;
  }
}


/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
  .fade-up,
  .fade-up-small,
  .fade-up-large,
  .fade-left,
  .fade-right,
  .fade-scale {
    opacity: 1 !important;
    transform: none !important;
  }
}