/* ===== O tanque do Pacus — elemento de assinatura da interface ===== */

.pacus-tank {
  position: relative;
  width: 100%;
  height: 220px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(180deg, #1E7A74 0%, var(--color-lagoon) 45%, var(--color-tide) 100%);
  box-shadow: var(--shadow-card), inset 0 0 0 1px rgba(234, 246, 243, 0.12);
  /* Da profundidade real para o giro do PACUS (ver @keyframes pacus-swim). */
  perspective: 560px;
}

/* Linha d'agua com leve ondulacao continua no topo do tanque */
.pacus-tank::before {
  content: "";
  position: absolute;
  top: 0; left: -10%;
  width: 120%;
  height: 18px;
  background: repeating-linear-gradient(
    100deg,
    rgba(234, 246, 243, 0.35) 0 2px,
    transparent 2px 26px
  );
  animation: tank-water-drift 7s linear infinite;
  opacity: 0.5;
}

@keyframes tank-water-drift {
  from { transform: translateX(0); }
  to { transform: translateX(26px); }
}

/* Bolhas subindo, timings dessincronizados para nao parecer um loop mecanico */
.tank-bubble {
  position: absolute;
  bottom: -10px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(234, 246, 243, 0.45);
  animation: tank-bubble-rise 4.5s ease-in infinite;
}
.tank-bubble:nth-child(1) { left: 18%; width: 5px; height: 5px; animation-delay: 0s; animation-duration: 5.2s; }
.tank-bubble:nth-child(2) { left: 42%; width: 8px; height: 8px; animation-delay: 1.3s; animation-duration: 4.1s; }
.tank-bubble:nth-child(3) { left: 65%; width: 4px; height: 4px; animation-delay: 2.6s; animation-duration: 6s; }
.tank-bubble:nth-child(4) { left: 82%; width: 6px; height: 6px; animation-delay: 0.7s; animation-duration: 4.8s; }

@keyframes tank-bubble-rise {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  10% { opacity: 0.7; }
  90% { opacity: 0.4; }
  100% { transform: translateY(-200px) translateX(6px); opacity: 0; }
}

/* Fundo: areia e pedras */
.tank-floor {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 34px;
  background: linear-gradient(180deg, transparent, rgba(232, 217, 181, 0.25));
}
.tank-rock {
  position: absolute;
  bottom: 6px;
  background: rgba(232, 217, 181, 0.3);
  border-radius: 50% 50% 45% 45%;
}
.tank-rock--1 { left: 10%; width: 30px; height: 14px; }
.tank-rock--2 { right: 14%; width: 44px; height: 18px; }

/* Toca de pedra — esconderijo no fundo, atras do PACUS (ele nada na frente dela,
   mas pausa por perto no inicio/fim do trajeto de nado, "quase escondido"). */
.tank-cave {
  position: absolute;
  left: 3%;
  bottom: 4px;
  width: 92px;
  height: 60px;
  background: linear-gradient(160deg, #8a7a63, #5f5240);
  border-radius: 50% 50% 14% 14% / 65% 65% 12% 12%;
  box-shadow: inset -6px -8px 10px rgba(0, 0, 0, 0.25);
}
.tank-cave__opening {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 44px;
  height: 38px;
  transform: translateX(-50%);
  background: radial-gradient(circle at 50% 30%, rgba(6, 20, 19, 0.9), rgba(6, 20, 19, 0.55) 70%, transparent 100%);
  border-radius: 50% 50% 40% 40% / 60% 60% 30% 30%;
}

/* Tronco decorativo, so paisagem (fica atras do PACUS). */
.tank-driftwood {
  position: absolute;
  left: 40%;
  bottom: 10px;
  width: 70px;
  height: 12px;
  background: linear-gradient(180deg, #7a5a3c, #55402a);
  border-radius: 40% 60% 50% 50% / 80% 80% 40% 40%;
  transform: rotate(-6deg);
  box-shadow: inset 0 -3px 4px rgba(0, 0, 0, 0.2);
}

/* Tufos de alga — ficam NA FRENTE do PACUS (depois dele no DOM), entao quando
   o trajeto de nado passa perto, ele visualmente "some" atras das folhas. */
.tank-plant {
  position: absolute;
  bottom: 8px;
  display: flex;
  align-items: flex-end;
  gap: 4px;
}
.tank-plant--left { left: 5%; }
.tank-plant--right { right: 6%; }

.tank-plant__blade {
  display: block;
  width: 8px;
  background: linear-gradient(180deg, #2F8F72, #1D6650);
  border-radius: 50% 50% 6px 6px / 70% 70% 6px 6px;
  transform-origin: bottom center;
  animation: tank-plant-sway 4s ease-in-out infinite;
}
.tank-plant__blade:nth-child(1) { height: 46px; animation-delay: 0s; }
.tank-plant__blade:nth-child(2) { height: 60px; animation-delay: 0.6s; }
.tank-plant__blade:nth-child(3) { height: 40px; animation-delay: 1.2s; }

@keyframes tank-plant-sway {
  0%, 100% { transform: rotate(-8deg); }
  50% { transform: rotate(8deg); }
}

/* O proprio PACUS: forma organica simples, sem pixel art — um corpo oval com
   3 fios de guelra por lado, balancando devagar como se nadasse em suspensao.
   O tamanho cresce por estagio via --pacus-scale (ver modificadores abaixo). */
.pacus-body {
  position: absolute;
  bottom: 46px;
  left: 50%;
  width: 90px;
  height: 45px;
  transform-style: preserve-3d;
  animation: pacus-swim var(--swim-duration, 16s) ease-in-out infinite;
}

/* Trajeto: sai de perto da toca (esquerda), nada com forca pro centro/direita,
   faz uma pausa quase escondido atras da alga e vira de verdade pra voltar —
   o giro passa por rotateY (de perfil, "de canto", ate mostrar as costas),
   nao um espelhamento instantaneo, entao parece o corpo virando de verdade. */
@keyframes pacus-swim {
  0%   { transform: translate(-128px, 4px)   rotate(-3deg) rotateY(0deg)   scale(var(--pacus-scale, 1)); opacity: 0.9; }
  6%   { transform: translate(-126px, 0px)   rotate(-1deg) rotateY(0deg)   scale(var(--pacus-scale, 1)); opacity: 0.85; }
  14%  { transform: translate(-118px, 4px)   rotate(-4deg) rotateY(0deg)   scale(var(--pacus-scale, 1)); opacity: 1; }
  32%  { transform: translate(-8px, -18px)   rotate(4deg)  rotateY(0deg)   scale(var(--pacus-scale, 1)); opacity: 1; }
  48%  { transform: translate(112px, -8px)   rotate(-2deg) rotateY(0deg)   scale(var(--pacus-scale, 1)); opacity: 1; }
  53%  { transform: translate(116px, -10px)  rotate(0deg)  rotateY(15deg)  scale(var(--pacus-scale, 1)); opacity: 0.85; }
  57%  { transform: translate(117px, -10px)  rotate(0deg)  rotateY(95deg) scale(var(--pacus-scale, 1)); opacity: 0.5; }
  61%  { transform: translate(114px, -9px)   rotate(1deg)  rotateY(180deg) scale(var(--pacus-scale, 1)); opacity: 0.9; }
  62%  { transform: translate(108px, -6px)   rotate(2deg)  rotateY(180deg) scale(var(--pacus-scale, 1)); opacity: 1; }
  80%  { transform: translate(-14px, -14px)  rotate(-4deg) rotateY(180deg) scale(var(--pacus-scale, 1)); opacity: 1; }
  91%  { transform: translate(-122px, 4px)   rotate(1deg)  rotateY(180deg) scale(var(--pacus-scale, 1)); opacity: 0.85; }
  95%  { transform: translate(-126px, 4px)   rotate(0deg)  rotateY(95deg) scale(var(--pacus-scale, 1)); opacity: 0.5; }
  99%  { transform: translate(-128px, 4px)   rotate(-2deg) rotateY(0deg)   scale(var(--pacus-scale, 1)); opacity: 0.85; }
  100% { transform: translate(-128px, 4px)   rotate(-3deg) rotateY(0deg)   scale(var(--pacus-scale, 1)); opacity: 0.9; }
}

/* Estagios ainda nadando, cada um um pouco maior que o anterior. */
.pacus-tank--baby { --pacus-scale: 0.55; }
.pacus-tank--young { --pacus-scale: 0.8; }
.pacus-tank--adult { --pacus-scale: 1; }

.pacus-critter {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.pacus-critter__tail,
.pacus-critter__body,
.pacus-critter__head {
  fill: var(--pacus-color, var(--color-coral));
  transition: fill 900ms var(--ease-water);
}
.pacus-critter__body {
  filter: drop-shadow(-2px 3px 3px rgba(15, 61, 58, 0.15));
}
.pacus-critter__tail {
  transform-box: fill-box;
  transform-origin: 100% 50%;
  animation: pacus-tail-wag 1.2s ease-in-out infinite;
}

@keyframes pacus-tail-wag {
  0%, 100% { transform: rotate(-7deg); }
  50% { transform: rotate(7deg); }
}

.pacus-critter__leg {
  fill: var(--pacus-color, var(--color-coral));
  transform-box: fill-box;
  transform-origin: center;
  animation: pacus-leg-paddle 2.6s ease-in-out infinite;
  transition: fill 900ms var(--ease-water);
}
.pacus-critter__leg:nth-of-type(1) { animation-delay: 0s; }
.pacus-critter__leg:nth-of-type(2) { animation-delay: 0.7s; }
.pacus-critter__leg:nth-of-type(3) { animation-delay: 0.3s; }
.pacus-critter__leg:nth-of-type(4) { animation-delay: 1s; }

@keyframes pacus-leg-paddle {
  0%, 100% { transform: rotate(-6deg); }
  50% { transform: rotate(6deg); }
}

.pacus-critter__eye { fill: #143430; }

.pacus-critter__mouth {
  fill: none;
  stroke: #143430;
  stroke-width: 2;
  stroke-linecap: round;
}

.pacus-critter__gill {
  transform-box: fill-box;
  transform-origin: 0% 100%;
  animation: pacus-gill-wave 1.8s ease-in-out infinite;
}
.pacus-critter__gill path {
  fill: none;
  stroke: var(--pacus-color-dark, var(--color-coral-dark));
  stroke-width: 2.4;
  stroke-linecap: round;
  transition: stroke 900ms var(--ease-water);
}
.pacus-critter__gill circle {
  fill: var(--pacus-color-dark, var(--color-coral-dark));
  transition: fill 900ms var(--ease-water);
}
.pacus-critter__gill--1 { animation-delay: 0s; }
.pacus-critter__gill--2 { animation-delay: 0.15s; }
.pacus-critter__gill--3 { animation-delay: 0.3s; }

@keyframes pacus-gill-wave {
  0%, 100% { transform: rotate(-8deg); }
  50% { transform: rotate(10deg); }
}

/* Estagios de ovo: egg / cracking / hatching. Repousa no fundo, sem nadar —
   so um leve balanco, cada vez mais agitado conforme se aproxima de eclodir. */
.pacus-egg {
  position: absolute;
  bottom: 30px;
  left: 50%;
  width: 46px;
  height: 58px;
  background: radial-gradient(120% 120% at 30% 20%, #FDF6E8 0%, #EFE3C2 55%, #DDCB9C 100%);
  border-radius: 50% 50% 48% 48% / 60% 60% 40% 40%;
  box-shadow: inset -6px -6px 10px rgba(120, 100, 60, 0.25), var(--shadow-card);
  animation: pacus-egg-wobble 3.2s ease-in-out infinite;
}

@keyframes pacus-egg-wobble {
  0%, 100% { transform: translateX(-50%) rotate(-2deg); }
  50% { transform: translateX(-50%) rotate(2deg); }
}

/* Cracking: uma rachadura em zigue-zague aparece e o balanco acelera. */
.pacus-tank--cracking .pacus-egg {
  animation-duration: 1.6s;
}
.pacus-tank--cracking .pacus-egg::before {
  content: "";
  position: absolute;
  top: 20%;
  left: 8%;
  width: 84%;
  height: 3px;
  background: rgba(90, 70, 40, 0.55);
  clip-path: polygon(0% 50%, 10% 0%, 20% 100%, 35% 10%, 50% 90%, 65% 5%, 80% 100%, 90% 20%, 100% 50%);
  transform: rotate(-4deg);
}

/* Hatching: a rachadura se abre e uma pontinha colorida do PACUS ja aparece. */
.pacus-tank--hatching .pacus-egg {
  animation-duration: 0.9s;
}
.pacus-tank--hatching .pacus-egg::before {
  content: "";
  position: absolute;
  top: 20%;
  left: 8%;
  width: 84%;
  height: 5px;
  background: rgba(20, 43, 41, 0.7);
  clip-path: polygon(0% 50%, 10% 0%, 20% 100%, 35% 10%, 50% 90%, 65% 5%, 80% 100%, 90% 20%, 100% 50%);
  transform: rotate(-4deg);
}
.pacus-tank--hatching .pacus-egg::after {
  content: "";
  position: absolute;
  top: -8px;
  left: 18%;
  width: 24px;
  height: 16px;
  /* Primeira pontinha do PACUS ja mostra a cor com que ele vai nascer. */
  background: var(--pacus-color, var(--color-coral));
  border-radius: 50% 50% 40% 40%;
  box-shadow: inset -3px -3px 6px rgba(15, 61, 58, 0.15);
}

.tank-caption {
  position: absolute;
  left: var(--space-4);
  bottom: var(--space-3);
  color: var(--text-on-dark);
  font-family: var(--font-display);
  font-size: var(--step-sm);
  background: rgba(10, 43, 41, 0.45);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  backdrop-filter: blur(2px);
}

.pacus-tank--has-reaction { cursor: pointer; }

/* Vinculo (relatedness -- ver docs/PROPOSITO.md e pacus/habitat.js): indicador discreto
   de que ha uma reacao do adulto esperando -- "toque no Pacus pra ver", nao um badge
   berrante. Pulso suave chama atencao sem virar notificacao ansiosa. */
.tank-reaction-hint {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(10, 43, 41, 0.5);
  backdrop-filter: blur(2px);
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: tank-reaction-pulse 2.4s ease-in-out infinite;
}
@keyframes tank-reaction-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 200, 87, 0.35); }
  50% { transform: scale(1.08); box-shadow: 0 0 0 6px rgba(255, 200, 87, 0); }
}

/* Botao do adulto pra reagir/editar -- fora do tanque, sempre visivel pra quem tem
   permissao (diferente do hint acima, que so aparece quando ja existe reacao). */
.tank-reaction-cta {
  display: block;
  width: 100%;
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  border: 1.5px dashed rgba(234, 246, 243, 0.25);
  background: rgba(234, 246, 243, 0.05);
  color: var(--text-on-dark-dim);
  font-family: var(--font-display);
  font-size: var(--step-sm);
  text-align: center;
  transition: background var(--duration-fast) var(--ease-water), color var(--duration-fast) var(--ease-water);
}
.tank-reaction-cta:hover {
  background: rgba(234, 246, 243, 0.1);
  color: var(--text-on-dark);
}