/*!
 * ScrollTrigger Animation Library
 * Lightweight scroll-triggered animations for any website builder
 * Compatible with Webflow, Shopify, WordPress, and custom sites
 * Version: 1.0.0
 * Size: ~8KB
 */

/* Base Animation Classes - Hidden by default, revealed when triggered */
.fade-in, .slide-up, .slide-down, .slide-left, .slide-right,
.zoom-in, .zoom-out, .scale-up, .rotate-in, .bounce-in {
  opacity: 0;
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform, opacity;
}

/* Triggered state - shown when element enters viewport */
.fade-in.triggered, .slide-up.triggered, .slide-down.triggered, 
.slide-left.triggered, .slide-right.triggered, .zoom-in.triggered, 
.zoom-out.triggered, .scale-up.triggered, .rotate-in.triggered, 
.bounce-in.triggered {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
}

/* Core Animation Definitions */

/* Fade Animations */
.fade-in {
  opacity: 0;
}

/* Slide Animations */
.slide-up {
  opacity: 0;
  transform: translateY(30px);
}

.slide-down {
  opacity: 0;
  transform: translateY(-30px);
}

.slide-left {
  opacity: 0;
  transform: translateX(30px);
}

.slide-right {
  opacity: 0;
  transform: translateX(-30px);
}

/* Scale Animations */
.scale-up {
  opacity: 0;
  transform: scale(0.8);
}

.zoom-in {
  opacity: 0;
  transform: scale(0.5);
}

.zoom-out {
  opacity: 0;
  transform: scale(1.2);
}

/* Rotation Animation */
.rotate-in {
  opacity: 0;
  transform: rotate(-180deg) scale(0.8);
}

/* Bounce Animation */
.bounce-in {
  opacity: 0;
  transform: scale(0.3);
  transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Modifier Classes */

/* Duration Modifiers */
.duration-fast {
  transition-duration: 0.3s !important;
}

.duration-slow {
  transition-duration: 1.2s !important;
}

.duration-slower {
  transition-duration: 2s !important;
}

/* Delay Modifiers */
.delay-100 {
  transition-delay: 0.1s !important;
}

.delay-200 {
  transition-delay: 0.2s !important;
}

.delay-300 {
  transition-delay: 0.3s !important;
}

.delay-500 {
  transition-delay: 0.5s !important;
}

.delay-1000 {
  transition-delay: 1s !important;
}

/* Data Attribute Support for Custom Durations and Delays */
[data-duration="0.3"] { transition-duration: 0.3s !important; }
[data-duration="0.5"] { transition-duration: 0.5s !important; }
[data-duration="0.8"] { transition-duration: 0.8s !important; }
[data-duration="1"] { transition-duration: 1s !important; }
[data-duration="1.5"] { transition-duration: 1.5s !important; }
[data-duration="2"] { transition-duration: 2s !important; }

[data-delay="0.1"] { transition-delay: 0.1s !important; }
[data-delay="0.2"] { transition-delay: 0.2s !important; }
[data-delay="0.3"] { transition-delay: 0.3s !important; }
[data-delay="0.5"] { transition-delay: 0.5s !important; }
[data-delay="1"] { transition-delay: 1s !important; }

/* Performance Optimizations */
.fade-in, .slide-up, .slide-down, .slide-left, .slide-right,
.zoom-in, .zoom-out, .scale-up, .rotate-in, .bounce-in {
  backface-visibility: hidden;
  perspective: 1000px;
}

/* Accessibility - Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .fade-in, .slide-up, .slide-down, .slide-left, .slide-right,
  .zoom-in, .zoom-out, .scale-up, .rotate-in, .bounce-in {
    transition-duration: 0.01ms !important;
    transition-delay: 0.01ms !important;
  }
}