/* ==========================================================================
   pond.css — the drifting tilapia school.

   The fish now live in the Dè Tillapia chapter (see .brand__fish in the
   markup), swimming behind the content to tie the table back to the water it
   comes from. All vector/CSS — no images, no licensing weight. The tilapia
   silhouette itself is the #tilapia <symbol> defined once in index.html.
   ========================================================================== */

.brand__fish {
  position: absolute;
  inset: 0;
  z-index: 0;          /* behind .brand > .shell (z-index: 1) */
  overflow: hidden;
  pointer-events: none;
}

/* A faint watery wash so the section reads as a pond the fish live in. */
.brand__fish::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 78% 8%, rgba(47, 143, 125, 0.12), transparent 55%),
    linear-gradient(to top, rgba(28, 74, 65, 0.18), transparent 60%);
}

/* --- A single fish -------------------------------------------------------- */

.fish {
  position: absolute;
  top: var(--lane, 40%);
  left: 0;
  width: var(--size, 120px);
  color: var(--tint, #2f8f7d);   /* body fill = currentColor */
  opacity: var(--fade, 0.4);
  transform: translateX(-30vw) scale(var(--depth, 1));
  animation: swim var(--dur, 44s) linear var(--delay, 0s) infinite;
  will-change: transform;
}

/* Fish going the other way enter from the right, mirrored to face their way. */
.fish--rev { animation-name: swim-rev; }

@keyframes swim {
  from { transform: translateX(-30vw) scale(var(--depth, 1)); }
  to   { transform: translateX(112vw) scale(var(--depth, 1)); }
}
@keyframes swim-rev {
  from { transform: translateX(112vw) scale(var(--depth, 1)) scaleX(-1); }
  to   { transform: translateX(-30vw) scale(var(--depth, 1)) scaleX(-1); }
}

/* The body flexes and bobs — the tell that makes a shape read as a fish. */
.fish__inner {
  display: block;
  transform-origin: 22% 50%;
  animation: fish-wag var(--wag, 2.8s) ease-in-out infinite;
}
@keyframes fish-wag {
  0%   { transform: translateY(0)    rotate(-1.6deg); }
  50%  { transform: translateY(-5px) rotate(1.6deg); }
  100% { transform: translateY(0)    rotate(-1.6deg); }
}

.fish svg { display: block; width: 100%; height: auto; overflow: visible; }

.fish__body { fill: currentColor; }
.fish__tail { fill: currentColor; opacity: 0.9; }
.fish__fin,
.fish__pec  { fill: currentColor; opacity: 0.72; }
.fish__eye  { fill: rgba(243, 236, 221, 0.55); }

/* --- Bubbles -------------------------------------------------------------- */

.bubble {
  position: absolute;
  bottom: -24px;
  left: var(--x, 50%);
  width: var(--bw, 8px);
  height: var(--bw, 8px);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(230, 245, 235, 0.75), rgba(140, 200, 185, 0.14) 60%, transparent 72%);
  box-shadow: inset 0 0 0 1px rgba(210, 240, 230, 0.25);
  opacity: 0;
  animation: bubble-rise var(--bdur, 12s) ease-in var(--bdelay, 0s) infinite;
}
@keyframes bubble-rise {
  0%   { transform: translate3d(0, 0, 0) scale(0.5); opacity: 0; }
  14%  { opacity: 0.6; }
  85%  { opacity: 0.4; }
  100% { transform: translate3d(var(--drift, 10px), -88vh, 0) scale(1); opacity: 0; }
}

/* Under reduced motion the school holds still and out of the way. */
@media (prefers-reduced-motion: reduce) {
  .brand__fish { display: none; }
}