/* ==========================================================================
   BESTEC MARINE ENGINEERING - DEDICATED ANIMATIONS STYLESHEET
   Keyframes, Micro-interactions, and Motion Effects
   ========================================================================== */

/* Fade in up motion */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 30px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.7s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

/* Subtle marine wave / floating motion */
@keyframes marineFloat {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-8px);
  }
  100% {
    transform: translateY(0px);
  }
}

.animate-marine-float {
  animation: marineFloat 4s ease-in-out infinite;
}

/* Pulse beacon effect */
@keyframes pulseGlow {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 168, 255, 0.7);
  }
  70% {
    box-shadow: 0 0 0 12px rgba(0, 168, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 168, 255, 0);
  }
}

.animate-pulse-glow {
  animation: pulseGlow 2.5s infinite;
}

/* Shimmer / light sweep effect */
@keyframes shimmerSweep {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.shimmer-active {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.25) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  background-size: 200% 100%;
  animation: shimmerSweep 3s infinite;
}

/* Counter number zoom */
@keyframes counterZoom {
  0% {
    transform: scale(0.92);
    opacity: 0.5;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.animate-counter {
  animation: counterZoom 0.6s ease-out forwards;
}