/*--------------------------------------------------------------
# CUSTOM ANIMATIONS SYSTEM (AOS REPLACEMENT)
--------------------------------------------------------------*/

/* Base Animation Classes */
.animate-on-scroll {
  opacity: 0;
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.animate-on-scroll.animated {
  opacity: 1;
}

/* Fade Animations */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeDown {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeLeft {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeRight {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Zoom Animations */
@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes zoomOut {
  from {
    opacity: 0;
    transform: scale(1.2);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Slide Animations */
@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInDown {
  from {
    opacity: 0;
    transform: translateY(-100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Animation Classes */
.fade-up {
  animation: fadeUp 0.6s ease-out;
  animation-fill-mode: both;
}

.fade-down {
  animation: fadeDown 0.6s ease-out;
  animation-fill-mode: both;
}

.fade-left {
  animation: fadeLeft 0.6s ease-out;
  animation-fill-mode: both;
}

.fade-right {
  animation: fadeRight 0.6s ease-out;
  animation-fill-mode: both;
}

.zoom-in {
  animation: zoomIn 0.6s ease-out;
  animation-fill-mode: both;
}

.zoom-out {
  animation: zoomOut 0.6s ease-out;
  animation-fill-mode: both;
}

.slide-up {
  animation: slideInUp 0.6s ease-out;
  animation-fill-mode: both;
}

.slide-down {
  animation: slideInDown 0.6s ease-out;
  animation-fill-mode: both;
}

.slide-left {
  animation: slideInLeft 0.6s ease-out;
  animation-fill-mode: both;
}

.slide-right {
  animation: slideInRight 0.6s ease-out;
  animation-fill-mode: both;
}

/* Animation Delays */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }
.delay-600 { animation-delay: 0.6s; }
.delay-700 { animation-delay: 0.7s; }
.delay-800 { animation-delay: 0.8s; }

/* Animation Durations */
.duration-300 { animation-duration: 0.3s; }
.duration-500 { animation-duration: 0.5s; }
.duration-700 { animation-duration: 0.7s; }
.duration-1000 { animation-duration: 1s; }

/* Stagger Animation for Multiple Elements */
.stagger-children > * {
  animation-delay: calc(var(--stagger-delay, 100ms) * var(--index, 0));
}

/* Performance Optimizations */
.animate-on-scroll {
  will-change: transform, opacity;
}

.animated {
  will-change: auto;
}

/* Reduced Motion Respect */
@media (prefers-reduced-motion: reduce) {
  .animate-on-scroll {
    animation: none;
    transition: none;
    opacity: 1;
    transform: none;
  }
  
  .fade-up,
  .fade-down,
  .fade-left,
  .fade-right,
  .zoom-in,
  .zoom-out,
  .slide-up,
  .slide-down,
  .slide-left,
  .slide-right {
    animation: none;
    transform: none;
    opacity: 1;
  }
}

/* Loading Animation for Spinners */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.spin {
  animation: spin 1s linear infinite;
}

/* Pulse Animation */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.pulse {
  animation: pulse 2s ease-in-out infinite;
}

/* Bounce Animation */
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-10px); }
  60% { transform: translateY(-5px); }
}

.bounce {
  animation: bounce 1s ease-in-out infinite;
}

/* Shake Animation */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}

.shake {
  animation: shake 0.6s ease-in-out;
}

/* Advanced Animations */
@keyframes flipInX {
  from {
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
  to {
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }
}

@keyframes flipInY {
  from {
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }
  to {
    transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }
}

.flip-x {
  animation: flipInX 0.8s ease-out;
  animation-fill-mode: both;
}

.flip-y {
  animation: flipInY 0.8s ease-out;
  animation-fill-mode: both;
}

/* Visibility States for JS Control */
.animate-hidden {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.animate-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Performance hints */
.animate-on-scroll,
.fade-up,
.fade-down,
.fade-left,
.fade-right,
.zoom-in,
.zoom-out,
.slide-up,
.slide-down,
.slide-left,
.slide-right {
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}