/* =============================================
   CLUB SIREN — creatures.css
   Sea creature elements injected into #creature-layer
   ============================================= */

.creature {
  position: absolute;
  pointer-events: none;
  will-change: transform, opacity;
}

/* Fish tail fin animation */
.creature--fish svg .tail {
  transform-origin: 85% 50%;
  animation: fish-tail 0.6s ease-in-out infinite alternate;
}
@keyframes fish-tail {
  from { transform: rotate(-12deg); }
  to   { transform: rotate(12deg); }
}

/* Fish body subtle undulation */
.creature--fish svg .body {
  transform-origin: 50% 50%;
  animation: fish-body 1.2s ease-in-out infinite alternate;
}
@keyframes fish-body {
  from { transform: rotate(-2deg); }
  to   { transform: rotate(2deg); }
}

/* Jellyfish bell pulse */
.creature--jellyfish svg .bell {
  transform-origin: 50% 90%;
  animation: jelly-pulse 1.8s ease-in-out infinite alternate;
}
@keyframes jelly-pulse {
  from { transform: scaleX(1) scaleY(1); }
  to   { transform: scaleX(1.12) scaleY(0.92); }
}

/* Jellyfish tentacle drift */
.creature--jellyfish svg .tentacle {
  transform-origin: 50% 0%;
  animation: tentacle-drift 2.5s ease-in-out infinite alternate;
}
.creature--jellyfish svg .tentacle:nth-child(odd) {
  animation-direction: alternate-reverse;
  animation-duration: 3s;
}
@keyframes tentacle-drift {
  from { transform: rotate(-8deg) skewX(-4deg); }
  to   { transform: rotate(8deg)  skewX(4deg); }
}

/* Manta ray wing flap */
.creature--manta svg .wing-left {
  transform-origin: 60% 50%;
  animation: wing-left 2s ease-in-out infinite alternate;
}
.creature--manta svg .wing-right {
  transform-origin: 40% 50%;
  animation: wing-right 2s ease-in-out infinite alternate;
}
@keyframes wing-left {
  from { transform: rotate(-8deg); }
  to   { transform: rotate(6deg); }
}
@keyframes wing-right {
  from { transform: rotate(8deg); }
  to   { transform: rotate(-6deg); }
}

/* Bioluminescent glow pulse (jellyfish and manta) */
.creature--jellyfish,
.creature--manta {
  filter: drop-shadow(0 0 8px rgba(0,212,255,0.6));
  animation: bio-glow 3s ease-in-out infinite alternate;
}
@keyframes bio-glow {
  from { filter: drop-shadow(0 0 6px rgba(0,212,255,0.5)); }
  to   { filter: drop-shadow(0 0 18px rgba(0,212,255,0.9)) drop-shadow(0 0 40px rgba(100,0,255,0.4)); }
}

/* Mirrored fish (traveling left) */
.creature--mirror {
  transform: scaleX(-1);
}

/* School of small fish (spawned as a group) */
.creature--school {
  display: flex;
  gap: 20px;
}
.creature--school .mini-fish {
  animation: school-drift 2s ease-in-out infinite alternate;
}
.creature--school .mini-fish:nth-child(2) { animation-delay: 0.3s; margin-top: 12px; }
.creature--school .mini-fish:nth-child(3) { animation-delay: 0.6s; margin-top: -8px; }
@keyframes school-drift {
  from { transform: translateY(0); }
  to   { transform: translateY(8px); }
}