/* A água e tudo que se move sozinho. Zero JavaScript nesta folha. */

#pond {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: var(--water-deep);
  /* Deixa o toque chegar como clique sem atraso de 300ms. */
  touch-action: manipulation;
}

/* ── Cáusticas: faixas de luz derivando devagar ──
   O deslocamento da animação é exatamente um período da onda (200 unidades),
   então o loop é invisível. */
.caustic {
  fill: none;
  stroke: var(--caustic);
  stroke-linecap: round;
  opacity: var(--op, 0.12);
  stroke-width: var(--w, 2.5);
  animation: caustic-drift var(--dur, 26s) linear infinite;
  animation-delay: var(--delay, 0s);
  will-change: transform;
}

@keyframes caustic-drift {
  from { transform: translateX(0); }
  to   { transform: translateX(200px); }
}

/* ── Brilho lento na superfície, para a água não parecer parada ── */
.sheen {
  animation: sheen-pulse 14s ease-in-out infinite;
  transform-origin: center;
}

@keyframes sheen-pulse {
  0%, 100% { opacity: 0.10; }
  50%      { opacity: 0.20; }
}

/* ── Ondulação do corpo dos bichos ──
   Três amplitudes crescentes em direção à cauda. O atraso por instância vem de
   --phase, que cada <use> define: propriedades customizadas HERDAM para dentro
   da shadow tree criada por <use>, e é isso que dá variedade com um só símbolo.

   A fluidez vem da DEFASAGEM entre as juntas (overlapping action): a onda
   viaja da cabeça para a cauda com ~16% do período de atraso por junta. Com
   menos que isso os três segmentos giram quase em fase e o peixe vira um
   graveto pivotando. O atraso é fração de --tail-dur, não valor fixo: assim o
   .saudoso (período 4.6s) mantém a onda coerente. */
@keyframes yaw-a { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }
@keyframes yaw-b { 0%, 100% { transform: rotate(-8deg);   } 50% { transform: rotate(8deg);   } }
@keyframes yaw-c { 0%, 100% { transform: rotate(-15deg);  } 50% { transform: rotate(15deg);  } }

/* Movimento secundário: as peitorais remam de leve, um pouco atrás do corpo.
   É o que tira a rigidez de "peça única". */
@keyframes pec-beat { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }

.k-body, .k-peduncle, .k-caudal, .k-pec {
  animation-duration: var(--tail-dur, 2.6s);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  will-change: transform;
}

/* Origem 0 0 em todos: o koi.js autora cada segmento com o pivô no (0,0)
   local (a junta da peitoral inclusive), e essa é a configuração mais
   interoperável dentro da shadow tree de <use> — Safari em especial, que é
   onde o jogo vai rodar. */
.k-body     { animation-name: yaw-a; transform-origin: 0 0; animation-delay: var(--phase, 0s); }
.k-peduncle { animation-name: yaw-b; transform-origin: 0 0; animation-delay: calc(var(--phase, 0s) + var(--tail-dur, 2.6s) * 0.16); }
.k-caudal   { animation-name: yaw-c; transform-origin: 0 0; animation-delay: calc(var(--phase, 0s) + var(--tail-dur, 2.6s) * 0.32); }
.k-pec      { animation-name: pec-beat; transform-origin: 0 0; animation-delay: calc(var(--phase, 0s) + var(--tail-dur, 2.6s) * 0.08); }

/* ── Flexão de manobra ──
   --koi-bend (graus) vem do loop: negativa do yaw suavizado do swim. Os
   fatores crescem para a cauda (0.3/0.7/1.0 — cumulativos 0.3/1.0/2.0), então
   a curva concentra na metade traseira, como num koi de verdade. Grupos
   separados dos keyframados: dois transforms nunca disputam o mesmo elemento. */
.k-bend-a { transform: rotate(calc(var(--koi-bend, 0deg) * 0.3)); }
.k-bend-b { transform: rotate(calc(var(--koi-bend, 0deg) * 0.7)); }
.k-bend-c { transform: rotate(calc(var(--koi-bend, 0deg) * 1.0)); }
.k-bend-a, .k-bend-b, .k-bend-c { transform-origin: 0 0; will-change: transform; }

/* ── Pausa total quando a aba perde o foco: zero CPU e zero bateria ── */
#pond.pausado * {
  animation-play-state: paused !important;
}

/* ── Acessibilidade: menos movimento para quem pediu menos movimento ── */
@media (prefers-reduced-motion: reduce) {
  .caustic, .sheen { animation: none; }
  .k-pec { animation: none; }
  .k-body, .k-peduncle, .k-caudal { animation-duration: 5s; }
  @keyframes yaw-c { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
}

/* Saudoso: nada mais devagar e perde um pouco da cor. Nunca morre. */
.koi-view.saudoso {
  --tail-dur: 4.6s;
  opacity: 0.72;
}

.koi-shadow {
  pointer-events: none;
}

/* O peixe inteiro é clicável, mas a área útil no celular é o corpo. */
.koi-view {
  cursor: pointer;
}

/* ── Ração caindo ── */
.pellet {
  animation: pellet-fall 1.4s ease-in forwards;
  will-change: transform, opacity;
}

@keyframes pellet-fall {
  0%   { transform: translateY(-26px) scale(0.7); opacity: 0; }
  18%  { transform: translateY(0) scale(1);       opacity: 1; }
  70%  { transform: translateY(16px) scale(1);    opacity: 1; }
  100% { transform: translateY(30px) scale(0.5);  opacity: 0; }
}

/* ── Onda na superfície ── */
.ripple {
  animation: ripple-out 0.9s ease-out forwards;
  transform-box: fill-box;
  transform-origin: center;
  will-change: transform, opacity;
}

@keyframes ripple-out {
  from { transform: scale(0.4); opacity: 0.7; }
  to   { transform: scale(5);   opacity: 0; }
}

/* ── Número subindo ── */
.float-text {
  fill: var(--accent-soft);
  font-family: var(--font);
  font-size: 22px;
  font-weight: 700;
  animation: float-up 1.1s ease-out forwards;
  will-change: transform, opacity;
}

@keyframes float-up {
  from { transform: translateY(0);    opacity: 1; }
  to   { transform: translateY(-42px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .pellet { animation-duration: 0.6s; }
  .ripple { animation: none; opacity: 0; }
}

/* ── Lírio: balança devagar, como folha na água ── */
.lily {
  animation: lily-sway var(--sway-dur, 7s) ease-in-out infinite;
  animation-delay: var(--sway-delay, 0s);
  transform-box: fill-box;
  transform-origin: center;
  will-change: transform;
}

@keyframes lily-sway {
  0%, 100% { rotate: -4deg; }
  50%      { rotate: 4deg; }
}

.lily-folha {
  filter: drop-shadow(0 3px 4px rgba(4, 22, 26, 0.45));
}

@media (prefers-reduced-motion: reduce) {
  .lily { animation: none; }
}