/* Animation Classes */
/* * Scroll Animation System
   *
   * Usage:
   * 1. Add base class: bc-animate
   * 2. Add animation type: bc-animate--slideInLeft, bc-animate--slideInRight, bc-animate--fadeInUp, bc-animate--fadeIn, bc-animate--scaleIn
   * 3. Optional delays: bc-animate--delay-100 through bc-animate--delay-800
   * 4. Optional duration: bc-animate--duration-fast, bc-animate--duration-slow
   *
   * Example: <div class="bc-animate bc-animate--fadeInUp bc-animate--delay-200">
   *
   * Animations trigger when elements enter the viewport (10% visible)
   * Uses Intersection Observer API for optimal performance
   */
.bc-animate {
  opacity: 0;
  transition: all 0.8s cubic-bezier(0.15, 0.75, 0.35, 1.2);
}

.bc-animate.bc-animate--visible {
  opacity: 1;
}

/* Slide In Left Animation */
.bc-animate--slideInLeft {
  transform: translateX(-100px);
}

.bc-animate--slideInLeft.bc-animate--visible {
  transform: translateX(0);
}

/* Slide In Right Animation */
.bc-animate--slideInRight {
  transform: translateX(100px);
}

.bc-animate--slideInRight.bc-animate--visible {
  transform: translateX(0);
}

/* Fade In Up Animation */
.bc-animate--fadeInUp {
  transform: translateY(50px);
}

.bc-animate--fadeInUp.bc-animate--visible {
  transform: translateY(0);
}

/* Fade In Animation */
.bc-animate--fadeIn {
  opacity: 0;
}

.bc-animate--fadeIn.bc-animate--visible {
  opacity: 1;
}

/* Scale In Animation */
.bc-animate--scaleIn {
  transform: scale(0.8) !important;
}

.bc-animate--scaleIn.bc-animate--visible {
  transform: scale(1) !important;
}

/* Animation Delays */
.bc-animate--delay-50 {
  transition-delay: 0.05s !important;
}

.bc-animate--delay-100 {
  transition-delay: 0.1s !important;
}

.bc-animate--delay-150 {
  transition-delay: 0.15s !important;
}

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

.bc-animate--delay-250 {
  transition-delay: 0.25s !important;
}

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

.bc-animate--delay-350 {
  transition-delay: 0.35s !important;
}

.bc-animate--delay-400 {
  transition-delay: 0.4s !important;
}

.bc-animate--delay-450 {
  transition-delay: 0.45s !important;
}

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

.bc-animate--delay-550 {
  transition-delay: 0.55s !important;
}

.bc-animate--delay-600 {
  transition-delay: 0.6s !important;
}

.bc-animate--delay-650 {
  transition-delay: 0.65s !important;
}

.bc-animate--delay-700 {
  transition-delay: 0.7s !important;
}

.bc-animate--delay-750 {
  transition-delay: 0.75s !important;
}

.bc-animate--delay-800 {
  transition-delay: 0.8s !important;
}

.bc-animate--delay-850 {
  transition-delay: 0.85s !important;
}

.bc-animate--delay-900 {
  transition-delay: 0.9s !important;
}

.bc-animate--delay-950 {
  transition-delay: 0.95s !important;
}

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

.bc-animate--delay-1050 {
  transition-delay: 1.05s !important;
}

.bc-animate--delay-1100 {
  transition-delay: 1.1s !important;
}

.bc-animate--delay-1150 {
  transition-delay: 1.15s !important;
}

.bc-animate--delay-1200 {
  transition-delay: 1.2s !important;
}

/* Animation Duration Overrides */
.bc-animate--duration-fast {
  transition-duration: 0.4s;
}

.bc-animate--duration-slow {
  transition-duration: 1.2s;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .bc-animate {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .bc-animate--slideInLeft,
  .bc-animate--slideInRight,
  .bc-animate--fadeInUp,
  .bc-animate--scaleIn {
    transform: none;
  }
}

/* Mobile optimizations */
@media (max-width: 991px) {
  .bc-animate--slideInRight {
    transform: translateX(50px);
  }

  .bc-animate--slideInLeft {
    transform: translateX(-50px);
  }
}

@media (max-width: 767px) {
  .bc-animate--fadeInUp {
    transform: translateY(30px);
  }
}