@keyframes waveDrift {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-80px);
  }
}

@keyframes floatIdle {
  0%,
  100% {
    transform: translateY(0) rotate(-2deg);
  }
  50% {
    transform: translateY(4px) rotate(2deg);
  }
}

@keyframes floatShake {
  0%,
  100% {
    transform: translateX(0) rotate(0deg);
  }
  25% {
    transform: translateX(-7px) rotate(-8deg);
  }
  75% {
    transform: translateX(7px) rotate(8deg);
  }
}

@keyframes fishCruise {
  0%,
  100% {
    transform: translateX(-50%) translateY(0) scaleX(1);
  }
  50% {
    transform: translateX(-50%) translateY(10px) scaleX(1.05);
  }
}

@keyframes focusPulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.68;
  }
  50% {
    transform: scale(1.08);
    opacity: 1;
  }
}

.wave-a {
  animation: waveDrift 5s linear infinite;
}

.wave-b {
  animation: waveDrift 7s linear infinite reverse;
}

.wave-c {
  animation: waveDrift 9s linear infinite;
}

.state-idle,
.state-wave {
  animation: floatIdle 2.4s ease-in-out infinite;
}

.state-nibble,
.state-shake {
  animation: floatShake 0.42s linear infinite;
}

.state-half-sink {
  transform: translateY(18px) rotate(4deg);
}

.state-sink,
.state-hooked {
  transform: translateY(42px) rotate(5deg);
}

.state-drag-left {
  transform: translateX(-54px) translateY(7px) rotate(-20deg);
}

.state-drag-right {
  transform: translateX(54px) translateY(7px) rotate(20deg);
}

.state-miss {
  opacity: 0.55;
}

.fish-shadow {
  animation: fishCruise 4s ease-in-out infinite;
}