/* ==========================================================================
   NEXILLIUM TECH SOLUTION - ANIMATIONS & TRANSITIONS
   ========================================================================== */

/* Fade Up Entrance */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade Down Entrance */
@keyframes fadeDown {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade Left Entrance */
@keyframes fadeLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Fade Right Entrance */
@keyframes fadeRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Zoom In Entrance */
@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Floating animation for decorative hero images */
@keyframes floatAnim {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-12px);
  }
  100% {
    transform: translateY(0px);
  }
}

.floating-elem {
  animation: floatAnim 4s ease-in-out infinite;
}

/* Intersection Observer Animation Helpers */
.reveal-on-scroll {
  opacity: 0;
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal-on-scroll.fade-up {
  transform: translateY(30px);
}

.reveal-on-scroll.fade-left {
  transform: translateX(-30px);
}

.reveal-on-scroll.fade-right {
  transform: translateX(30px);
}

.reveal-on-scroll.zoom-in {
  transform: scale(0.92);
}

.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}