/* Scroll Animation Styles */

/* Base animation classes */
.animate-on-scroll {
  opacity: 0;
  transition-duration: 0.8s;
  transition-timing-function: cubic-bezier(0.5, 0, 0, 1);
  transition-property: opacity, transform;
  will-change: transform, opacity;
}

.animated {
  opacity: 1;
}

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

.fade-in.animated {
  opacity: 1;
}

/* Slide up animation */
.slide-up {
  transform: translateY(50px);
}

.slide-up.animated {
  transform: translateY(0);
}

/* Slide down animation */
.slide-down {
  transform: translateY(-50px);
}

.slide-down.animated {
  transform: translateY(0);
}

/* Slide in from left */
.slide-left {
  transform: translateX(-50px);
}

.slide-left.animated {
  transform: translateX(0);
}

/* Slide in from right */
.slide-right {
  transform: translateX(50px);
}

.slide-right.animated {
  transform: translateX(0);
}

/* Scale up animation */
.scale-up {
  transform: scale(0.8);
}

.scale-up.animated {
  transform: scale(1);
}

/* Zoom in animation */
.zoom-in {
  transform: scale(0.5);
}

.zoom-in.animated {
  transform: scale(1);
}

/* Rotate animation */
.rotate {
  transform: rotate(-10deg);
}

.rotate.animated {
  transform: rotate(0deg);
}

/* Flip animation */
.flip {
  transform: perspective(600px) rotateY(90deg);
}

.flip.animated {
  transform: perspective(600px) rotateY(0deg);
}

/* Scroll progress bar */
.scroll-progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 4px;
  width: 0;
  background: linear-gradient(90deg, #3498db, #9b59b6);
  z-index: 100;
  transition: width 0.1s ease-out;
}

[data-progress] {
  position: relative;
}

/* Staggered animation containers */
[data-stagger] [data-stagger-item] {
  opacity: 0;
  transition-duration: 0.8s;
  transition-timing-function: cubic-bezier(0.5, 0, 0, 1);
  will-change: transform, opacity;
}

/* Custom timing classes */
.delay-100 { transition-delay: 0.1s; }
.delay-200 { transition-delay: 0.2s; }
.delay-300 { transition-delay: 0.3s; }
.delay-400 { transition-delay: 0.4s; }
.delay-500 { transition-delay: 0.5s; }
.delay-600 { transition-delay: 0.6s; }
.delay-700 { transition-delay: 0.7s; }
.delay-800 { transition-delay: 0.8s; }
.delay-900 { transition-delay: 0.9s; }
.delay-1000 { transition-delay: 1s; }

/* Custom duration classes */
.duration-300 { transition-duration: 0.3s; }
.duration-500 { transition-duration: 0.5s; }
.duration-700 { transition-duration: 0.7s; }
.duration-1000 { transition-duration: 1s; }
.duration-1500 { transition-duration: 1.5s; }
.duration-2000 { transition-duration: 2s; }

/* Floating animation */
@keyframes floating {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-15px); }
  100% { transform: translateY(0px); }
}

.floating {
  animation: floating 3s ease-in-out infinite;
}

/* Pulse animation */
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.pulse {
  animation: pulse 2s 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 3s ease-in-out;
}

/* Wave animation */
@keyframes wave {
  0% { transform: rotate(0deg); }
  10% { transform: rotate(14deg); }
  20% { transform: rotate(-8deg); }
  30% { transform: rotate(14deg); }
  40% { transform: rotate(-4deg); }
  50% { transform: rotate(10deg); }
  60% { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}

.wave {
  animation: wave 2.5s ease-in-out;
  transform-origin: 70% 70%;
}

/* Blur in animation */
.blur-in {
  opacity: 0;
  filter: blur(10px);
}

.blur-in.animated {
  opacity: 1;
  filter: blur(0);
}

/* Fade in up animation */
.fade-in-up {
  opacity: 0;
  transform: translateY(75px);
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  transition-duration: 1.2s;
}

.fade-in-up.animated {
  opacity: 1;
  transform: translateY(0);
}

/* 3D Tilt effect on hover */
.tilt-on-hover {
  transition: transform 0.5s;
  transform-style: preserve-3d;
}

.tilt-on-hover:hover {
  transform: perspective(1000px) rotateX(5deg) rotateY(5deg);
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .animate-on-scroll {
    transition-duration: 0.6s; /* Slightly faster on mobile */
  }
  
  .slide-up, .slide-down {
    transform: translateY(30px); /* Smaller distance on mobile */
  }
  
  .slide-left, .slide-right {
    transform: translateX(0); /* Disable horizontal animations on mobile */
  }
}