/* Keyframes & Aquatic Visual Animations */

@keyframes floatUp {
  0% {
    transform: translateY(0) scale(0.8);
    opacity: 0;
  }
  15% {
    opacity: 0.6;
  }
  85% {
    opacity: 0.6;
  }
  100% {
    transform: translateY(-110vh) scale(1.2);
    opacity: 0;
  }
}

@keyframes waterCaustics {
  0% {
    background-position: 0% 0%;
    filter: hue-rotate(0deg);
  }
  50% {
    background-position: 100% 100%;
    filter: hue-rotate(15deg);
  }
  100% {
    background-position: 0% 0%;
    filter: hue-rotate(0deg);
  }
}

@keyframes pulseDot {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.4;
    transform: scale(1.3);
  }
}

@keyframes swimSlow {
  0% {
    transform: translateX(-120px) translateY(0) scaleX(1);
  }
  48% {
    transform: translateX(calc(100vw + 60px)) translateY(-20px) scaleX(1);
  }
  50% {
    transform: translateX(calc(100vw + 60px)) translateY(-20px) scaleX(-1);
  }
  98% {
    transform: translateX(-120px) translateY(10px) scaleX(-1);
  }
  100% {
    transform: translateX(-120px) translateY(0) scaleX(1);
  }
}

@keyframes pulseGlow {
  0% {
    box-shadow: 0 0 15px rgba(0, 210, 255, 0.2);
  }
  50% {
    box-shadow: 0 0 35px rgba(0, 210, 255, 0.5);
  }
  100% {
    box-shadow: 0 0 15px rgba(0, 210, 255, 0.2);
  }
}

@keyframes shimmerEffect {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

@keyframes cartBounce {
  0%, 100% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.25) rotate(-8deg);
  }
  60% {
    transform: scale(1.15) rotate(8deg);
  }
}

.pulse-glow {
  animation: pulseGlow 1.2s ease-in-out;
}

.cart-bounce {
  animation: cartBounce 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Background animated fish silhouettes */
.ambient-fish-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
  opacity: 0.18;
}

.swimming-silhouette {
  position: absolute;
  animation: swimSlow 28s linear infinite;
  filter: blur(1px);
}

.fish-1 {
  top: 25%;
  font-size: 2.2rem;
  animation-duration: 32s;
  animation-delay: -4s;
}

.fish-2 {
  top: 60%;
  font-size: 1.8rem;
  animation-duration: 24s;
  animation-delay: -12s;
}

.fish-3 {
  top: 80%;
  font-size: 2.8rem;
  animation-duration: 38s;
  animation-delay: -18s;
}