/* animations.css - Centralized animation definitions */

:root {
  /* Animation timing and easing variables for easy tweaks */
  --anim-duration: 0.8s;
  --anim-easing: cubic-bezier(0.16, 1, 0.3, 1);
  /* Premium smooth easing */
}

/* Base state for any element that will be animated on scroll */
[data-animate] {
  opacity: 0;
}

/* Fade-up animation */
.animate-fade-up {
  animation: fade-up var(--anim-duration) var(--anim-easing) both;
}

@keyframes fade-up {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Blur-in animation (Premium) */
.animate-blur-in {
  animation: blur-in var(--anim-duration) var(--anim-easing) both;
}

@keyframes blur-in {
  0% {
    opacity: 0;
    filter: blur(12px);
    transform: translateY(20px) scale(0.95);
  }

  100% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
  }
}

/* Slide-left animation */
.animate-slide-left {
  animation: slide-left var(--anim-duration) var(--anim-easing) both;
}

@keyframes slide-left {
  0% {
    opacity: 0;
    transform: translateX(-50px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Slide-right animation */
.animate-slide-right {
  animation: slide-right var(--anim-duration) var(--anim-easing) both;
}

@keyframes slide-right {
  0% {
    opacity: 0;
    transform: translateX(50px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Zoom-in animation */
.animate-zoom-in {
  animation: zoom-in var(--anim-duration) var(--anim-easing) both;
}

@keyframes zoom-in {
  0% {
    opacity: 0;
    transform: scale(0.85);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Rotate-in animation */
.animate-rotate-in {
  animation: rotate-in var(--anim-duration) var(--anim-easing) both;
}

@keyframes rotate-in {
  0% {
    opacity: 0;
    transform: rotate(-10deg) scale(0.95);
  }

  100% {
    opacity: 1;
    transform: rotate(0deg) scale(1);
  }
}

/* Float animation (continuous) */
.animate-float {
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-15px);
  }

  100% {
    transform: translateY(0px);
  }
}

/* Hover effect utility – can be applied to any clickable element */
.hover-effect {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}

.hover-effect:hover {
  transform: translateY(-3px) scale(1.02);
}

/* Stagger Delays */
.delay-100 {
  animation-delay: 100ms !important;
}

.delay-200 {
  animation-delay: 200ms !important;
}

.delay-300 {
  animation-delay: 300ms !important;
}

.delay-400 {
  animation-delay: 400ms !important;
}

.delay-500 {
  animation-delay: 500ms !important;
}

.delay-600 {
  animation-delay: 600ms !important;
}

/* Ambient Pulse Animation (continuous) */
.animate-ambient-pulse {
  animation: ambient-pulse 8s ease-in-out infinite alternate;
}

@keyframes ambient-pulse {
  0% { opacity: 0.5; filter: blur(40px); }
  100% { opacity: 1; filter: blur(60px); }
}

/* Gradient Flow Animation (continuous) */
.animate-gradient-flow {
  background-size: 200% 200%;
  animation: gradient-flow 5s ease infinite;
}

@keyframes gradient-flow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}