/* WebFlow-style scroll animations */

/* Base animation styles - Initial state for all animated elements */
.webflow-slide-up,
.webflow-slide-up-200,
.webflow-slide-up-400 {
  opacity: 0;
  transform: translate3d(0px, 50px, 0px);
  transition: opacity 800ms ease-out, transform 800ms ease-out;
}

.webflow-slide-left {
  opacity: 0;
  transform: translate3d(50px, 0px, 0px);
  transition: opacity 800ms ease-out, transform 800ms ease-out;
}

.webflow-slide-right {
  opacity: 0;
  transform: translate3d(-50px, 0px, 0px);
  transition: opacity 800ms ease-out, transform 800ms ease-out;
}

.webflow-scale {
  opacity: 0;
  transform: scale3d(0.8, 0.8, 1);
  transition: opacity 800ms ease-out, transform 800ms ease-out;
}

.webflow-fade {
  opacity: 0;
  transform: none;
  transition: opacity 800ms ease-out;
}

/* Delays */
.webflow-slide-up-200 {
  transition-delay: 200ms;
}

.webflow-slide-up-400 {
  transition-delay: 400ms;
}

/* Animated state - Applied when element comes into view */
.webflow-animated {
  opacity: 1 !important;
  transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) !important;
}

/* Ensure animations are visible during development */
.webflow-slide-up:not(.webflow-animated),
.webflow-slide-up-200:not(.webflow-animated),
.webflow-slide-up-400:not(.webflow-animated),
.webflow-slide-left:not(.webflow-animated),
.webflow-slide-right:not(.webflow-animated),
.webflow-scale:not(.webflow-animated),
.webflow-fade:not(.webflow-animated) {
  /* Ensure initial state is maintained */
  will-change: opacity, transform;
}

/* For users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .webflow-slide-up,
  .webflow-slide-up-200,
  .webflow-slide-up-400,
  .webflow-slide-left,
  .webflow-slide-right,
  .webflow-scale,
  .webflow-fade {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}