/* Shared fish button: identical size + bottom-right position on every page.
   Pages link this file and add .abo-fish-container / .abo-fish-btn / .abo-fish-img
   alongside their existing .fish-* classes. Old per-page .fish-* size/position
   rules are neutralized in each page's inline <style>.
   Visual size: 120px fixed width, height auto (990x308 aspect). No vw/vh/%/clamp/vmin.
   Position: absolute to bottom-right of .page-container (which is position:relative).
   Hidden footers (pterois .bottom-section, sphyrna .fish-button-container) stay
   hidden: this file never sets display with !important, so their display:none wins. */

.abo-fish-container {
  position: absolute;
  right: 24px;
  bottom: 24px;
  right: calc(24px + env(safe-area-inset-right, 0px));
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  z-index: 60;
}

.abo-fish-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  background: none;
  border: none;
  cursor: pointer;
  outline: none;
  margin: 0;
  padding: 8px;
  min-width: 48px;
  min-height: 48px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.abo-fish-img {
  width: 120px;
  height: auto;
  aspect-ratio: 990 / 308;
  object-fit: contain;
  display: block;
  box-sizing: border-box;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.08));
  transition: transform 0.3s ease;
}

/* Desktop hover: same look as before, guarded so touch never gets sticky hover */
@media (hover: hover) {
  .abo-fish-btn:hover {
    transform: scale(1.12) translateX(-4px);
  }
  .abo-fish-btn:hover .abo-fish-img {
    animation: aboFishSwim 1s ease-in-out infinite alternate;
  }
  .abo-fish-btn:active {
    transform: scale(0.96);
  }
}

/* Touch: continuous swim (same keyframes as periophthalmus approach) + press feedback. No JS. */
@media (hover: none) {
  .abo-fish-btn .abo-fish-img {
    animation: aboFishSwim 2.2s ease-in-out infinite alternate;
  }
  .abo-fish-btn:active {
    transform: scale(0.93);
  }
}

@keyframes aboFishSwim {
  0% { transform: rotate(0deg) translateY(0); }
  50% { transform: rotate(-3deg) translateY(-2px); }
  100% { transform: rotate(2deg) translateY(1px); }
}

/* Reduced motion: no unprompted continuous swim (touch idle animation).
   The hover-triggered swim stays enabled on explicit user action. */
@media (prefers-reduced-motion: reduce) and (hover: none) {
  .abo-fish-btn .abo-fish-img {
    animation: none !important;
  }
}

/* ---
   Little fish buttons (zebrasoma track minis, pterois banner fishes).
   Same swim movement as the main button, triggered by hover (desktop)
   or press (touch). Scope: .abo-mini-fish-btn + direct child <img>.
   --- */
.abo-mini-fish-btn {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
  .abo-mini-fish-btn:hover > img {
    animation: aboFishSwim 1s ease-in-out infinite alternate;
  }
  /* Mirrored fish (pterois banner 2): keep the scaleX(-1) flip while swimming */
  .abo-mini-fish-btn:hover > img.abo-mini-fish-flip {
    animation-name: aboFishSwimFlip;
  }
}

@media (hover: none) {
  .abo-mini-fish-btn:active {
    transform: scale(0.93);
  }
}

@keyframes aboFishSwimFlip {
  0% { transform: scaleX(-1) rotate(0deg) translateY(0); }
  50% { transform: scaleX(-1) rotate(-3deg) translateY(-2px); }
  100% { transform: scaleX(-1) rotate(2deg) translateY(1px); }
}