/* Phase 2: fine-pointer fish companion and bounded water response. */
:root {
  --fish-pointer-ripple: rgba(139, 243, 228, .40);
  --fish-pointer-trail: rgba(139, 243, 228, .55);
  --fish-pointer-pearl: rgba(238, 252, 248, .92);
  --fish-pointer-aqua: rgba(98, 232, 213, .86);
  --fish-pointer-aqua-deep: rgba(47, 174, 164, .66);
}

html[data-depth-zone="twilight"] {
  --fish-pointer-ripple: rgba(120, 224, 214, .34);
  --fish-pointer-trail: rgba(120, 224, 214, .46);
}

html[data-depth-zone="midnight"] {
  --fish-pointer-ripple: rgba(112, 202, 211, .28);
  --fish-pointer-trail: rgba(112, 202, 211, .38);
}

html[data-depth-zone="deep"] {
  --fish-pointer-ripple: rgba(120, 194, 202, .23);
  --fish-pointer-trail: rgba(120, 194, 202, .30);
}

html.fish-pointer-water,
html.fish-pointer-water body { cursor: none; }

.fish-pointer {
  position: fixed;
  z-index: calc(var(--layer-nav) - 1);
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-80px, -80px, 0);
  transition: opacity 120ms var(--ease-standard);
  contain: layout paint style;
  will-change: transform, opacity;
}

.fish-pointer.is-visible { opacity: .94; }

.fish-pointer-shape {
  width: 100%;
  height: 100%;
  transform-origin: 50% 50%;
  will-change: transform;
}

.fish-pointer svg {
  display: block;
  width: 36px;
  height: 36px;
  margin: 2px;
  overflow: visible;
}

.fish-pointer-body { fill: var(--fish-pointer-aqua); }
.fish-pointer-belly { fill: var(--fish-pointer-pearl); opacity: .34; }
.fish-pointer-tail,
.fish-pointer-fin { fill: var(--fish-pointer-aqua-deep); }
.fish-pointer-seam { fill: none; stroke: rgba(238, 252, 248, .38); stroke-width: .55; }
.fish-pointer-eye { fill: var(--color-gold); }
.fish-pointer-pupil { fill: var(--color-ink); }

.fish-ripple,
.fish-trail {
  position: fixed;
  z-index: calc(var(--layer-nav) - 2);
  top: 0;
  left: 0;
  pointer-events: none;
  contain: layout paint style;
}

.fish-ripple {
  width: var(--fish-ring-large, 120px);
  height: var(--fish-ring-large, 120px);
  margin: -60px 0 0 -60px;
  border: 1px solid var(--fish-pointer-ripple);
  border-radius: 48% 52% 46% 54% / 53% 47% 55% 45%;
  opacity: 0;
  transform: translate3d(var(--fish-x), var(--fish-y), 0) scale(.18);
  animation: fish-ripple-large var(--fish-ring-large-duration, 1000ms) ease-out forwards;
}

.fish-ripple::before,
.fish-ripple::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px solid var(--fish-pointer-ripple);
  opacity: 0;
}

.fish-ripple::before {
  width: var(--fish-ring-small, 60px);
  height: var(--fish-ring-small, 60px);
  margin: -30px 0 0 -30px;
  border-radius: 53% 47% 51% 49% / 46% 54% 48% 52%;
  animation: fish-ripple-ring var(--fish-ring-small-duration, 600ms) ease-out forwards;
}

.fish-ripple::after {
  width: var(--fish-ring-medium, 90px);
  height: var(--fish-ring-medium, 90px);
  margin: -45px 0 0 -45px;
  border-radius: 46% 54% 48% 52% / 54% 46% 53% 47%;
  animation: fish-ripple-ring var(--fish-ring-medium-duration, 800ms) 60ms ease-out forwards;
}

.fish-trail {
  width: 4px;
  height: 2px;
  margin: -1px 0 0 -2px;
  border-radius: 50%;
  background: var(--fish-pointer-trail);
  opacity: var(--fish-trail-opacity, .16);
  transform: translate3d(var(--fish-x), var(--fish-y), 0) scale(1);
  animation: fish-trail-fade var(--fish-trail-duration, 500ms) ease-out forwards;
}

.fish-trail.is-dense { opacity: .08; }

@keyframes fish-ripple-ring {
  0% { opacity: 1; transform: scale(.24); }
  68% { border-radius: 49% 51% 55% 45% / 46% 54% 47% 53%; }
  100% { opacity: 0; transform: scale(1); }
}

@keyframes fish-ripple-large {
  0% { opacity: var(--fish-ripple-opacity, .32); transform: translate3d(var(--fish-x), var(--fish-y), 0) scale(.18); }
  70% { border-radius: 51% 49% 54% 46% / 47% 53% 45% 55%; }
  100% { opacity: 0; transform: translate3d(var(--fish-x), var(--fish-y), 0) scale(1); }
}

@keyframes fish-trail-fade {
  to { opacity: 0; transform: translate3d(var(--fish-x), var(--fish-y), 0) scale(.2); }
}

@media (pointer: coarse), (hover: none), (prefers-reduced-motion: reduce) {
  html.fish-pointer-water,
  html.fish-pointer-water body { cursor: auto; }
  .fish-pointer,
  .fish-ripple,
  .fish-trail { display: none !important; animation: none !important; transition: none !important; }
}