/* POND — layout, water, налим (Wave 9.1: the pond got DEEP).
   The SVG viewBox is 1200×1800; the element is sized to cover the viewport
   and pond.js slides it up as you scroll — the page dives underwater.
   Creatures/plants/night live in pond-life.css. */

.pond {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}
.pond-svg {
  --pw: max(100vw, 150vh);   /* wide enough for the viewport, tall enough to dive */
  position: absolute;
  left: 50%;
  top: 0;
  width: var(--pw);
  height: calc(var(--pw) * 1.5);   /* 1200:1800 aspect */
  transform: translate(-50%, var(--dive, 0px));
  will-change: transform;
}

/* deep-water tint — pond.js raises opacity as you dive */
.depth-tint {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: #22384a;
  opacity: var(--depth, 0);
}

/* water */
.pond .water-fill { fill: var(--water); opacity: 0.55; }
.pond .waterline {
  fill: none;
  stroke: var(--accent);
  stroke-width: 4;
  stroke-linecap: round;
  opacity: 0.75;
}
.pond .wave {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.5;
  stroke-linecap: round;
  opacity: 0.3;
}

/* reeds + lily pad */
.pond .reed { stroke: var(--grass); stroke-width: 4; stroke-linecap: round; fill: none; }
.pond .reed-head { fill: var(--nalim); opacity: 0.85; }
.pond .lily { fill: var(--grass); opacity: 0.5; stroke: var(--grass); stroke-width: 2; }

/* ── налим ─────────────────────────────────────────────── */
.nalim-body   { fill: #b18a61; fill-opacity: 0.85; stroke: rgb(var(--ink-rgb) / 0.75); stroke-width: 3; stroke-linejoin: round; }
.nalim-fin    { fill: #9c7752; fill-opacity: 0.8; stroke: rgb(var(--ink-rgb) / 0.6); stroke-width: 2.2; stroke-linejoin: round; }
.nalim-spot   { fill: #6e5138; opacity: 0.4; }
.nalim-eye    { fill: #3a3530; }
.nalim-glint  { fill: #f6efe0; }
.nalim-line   { fill: none; stroke: rgb(var(--ink-rgb) / 0.65); stroke-width: 2.2; stroke-linecap: round; }

/* swim across the pond and back; the flip is a separate synced animation */
@media (prefers-reduced-motion: no-preference) {
  .nalim-track { animation: nalim-swim 75s ease-in-out infinite; }
  .nalim-flip {
    transform-box: fill-box;
    transform-origin: center;
    animation: nalim-turn 75s step-end infinite;
  }
  .nalim-bob {
    transform-box: fill-box;
    transform-origin: center;
    animation: nalim-bob 7s ease-in-out infinite;
  }
  .nalim-tail-grp {
    transform-box: fill-box;
    transform-origin: right center;
    animation: nalim-tail 1.8s ease-in-out infinite;
  }
  .nalim-pect {
    transform-box: fill-box;
    transform-origin: top center;
    animation: nalim-pect 2.6s ease-in-out infinite;
  }
  .pond .bubble { animation: bubble-rise 9s linear infinite; }
  .pond .bubble.b2 { animation-delay: 3s; }
  .pond .bubble.b3 { animation-delay: 6s; }
  .pond .bubble.b4 { animation-delay: 1.5s; animation-duration: 12s; }
  .pond .bubble.b5 { animation-delay: 5s; animation-duration: 13s; }
  .pond .bubble.b6 { animation-delay: 8s; animation-duration: 11s; }
  .pond .reed-sway {
    transform-box: fill-box;
    transform-origin: bottom center;
    animation: reed-sway 6s ease-in-out infinite alternate;
  }
  .pond .reed-sway.r2 { animation-delay: 1.4s; }
  .pond .reed-sway.r3 { animation-delay: 2.6s; }
}

@keyframes nalim-swim {
  0%   { transform: translateX(-280px); }
  50%  { transform: translateX(1480px); }
  100% { transform: translateX(-280px); }
}
@keyframes nalim-turn {
  0%   { transform: scaleX(1); }
  50%  { transform: scaleX(-1); }
  100% { transform: scaleX(1); }
}
@keyframes nalim-bob {
  0%, 100% { transform: translateY(0) rotate(0.6deg); }
  50%      { transform: translateY(-16px) rotate(-1.2deg); }
}
@keyframes nalim-tail {
  0%, 100% { transform: rotate(6deg); }
  50%      { transform: rotate(-6deg); }
}
@keyframes nalim-pect {
  0%, 100% { transform: rotate(8deg); }
  50%      { transform: rotate(-10deg); }
}
@keyframes bubble-rise {
  0%   { transform: translateY(0);      opacity: 0; }
  8%   { opacity: 0.55; }
  85%  { opacity: 0.55; }
  100% { transform: translateY(-190px); opacity: 0; }
}
@keyframes reed-sway {
  from { transform: rotate(-2.4deg); }
  to   { transform: rotate(2.4deg); }
}

/* bubbles are drawn as small stroked circles */
.pond .bubble {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  opacity: 0;
}

@media (max-width: 640px) {
  .pond .waterline { stroke-width: 3; }
}