/* ==========================================================================
   EXCELL VALLEY TECHNOLOGIES - LIGHTWEIGHT HIGH-PERFORMANCE ANIMATIONS
   ========================================================================== */

/* 1. Keyframe Declarations */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

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

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

@keyframes pulseRipple {
  0% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.2), 0 0 0 10px rgba(16, 185, 129, 0.2);
  }
  100% {
    box-shadow: 0 0 0 15px rgba(16, 185, 129, 0), 0 0 0 30px rgba(16, 185, 129, 0);
  }
}

@keyframes slowOrbit {
  0% {
    transform: rotate(0deg) translateY(0) scale(1);
  }
  50% {
    transform: rotate(180deg) translateY(20px) scale(1.1);
  }
  100% {
    transform: rotate(360deg) translateY(0) scale(1);
  }
}

/* 2. Utility Animation Classes */
.animate-fade-in {
  animation: fadeIn var(--transition-slow) forwards;
}

.animate-slide-up {
  animation: slideUp var(--transition-slow) forwards;
}

.animate-slide-left {
  animation: slideLeft var(--transition-slow) forwards;
}

.animate-slide-right {
  animation: slideRight var(--transition-slow) forwards;
}

.pulse-ripple {
  animation: pulseRipple 2s infinite;
}

/* 3. Intersection Observer Animation Base States */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}

.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}

.reveal-left.revealed {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}

.reveal-right.revealed {
  opacity: 1;
  transform: translateX(0);
}

/* Stagger reveals for children */
.stagger-container .reveal {
  transition-delay: 0.1s;
}

.stagger-container .reveal:nth-child(2) {
  transition-delay: 0.2s;
}

.stagger-container .reveal:nth-child(3) {
  transition-delay: 0.3s;
}

.stagger-container .reveal:nth-child(4) {
  transition-delay: 0.4s;
}

.stagger-container .reveal:nth-child(5) {
  transition-delay: 0.5s;
}

/* 4. Ambient Animated Backdrops */
.ambient-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}

.ambient-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.15;
  mix-blend-mode: screen;
  pointer-events: none;
}

.ambient-blob-1 {
  width: 400px;
  height: 400px;
  background: var(--secondary);
  top: -10%;
  left: 10%;
  animation: slowOrbit 25s infinite linear;
}

.ambient-blob-2 {
  width: 500px;
  height: 500px;
  background: var(--primary-light);
  bottom: -10%;
  right: 10%;
  animation: slowOrbit 30s infinite linear reverse;
}

/* Accessibility: Respect Reduced Motion Preference */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-delay: 0s !important;
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0s !important;
    scroll-behavior: auto !important;
  }
  
  .reveal, .reveal-left, .reveal-right {
    opacity: 1 !important;
    transform: none !important;
  }
}