/* The pond (pond.js): the haiku as creatures in dark water, among pinpoints of light. */
body.pond { overflow: hidden; height: 100vh; height: 100dvh; }
.pond canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.pond-water { cursor: grab; touch-action: none; }
.pond-water.over { cursor: pointer; }
.pond-water.dragging { cursor: grabbing; }
.pond .bar { position: fixed; left: 0; right: var(--sbw, 0px); top: 0; z-index: 3; } /* (as far in from the right as on every other page: gutter.js) */
.pond-water, .pond-lights { animation: water-in 0.9s ease both; } /* (out of the water's colour the page came in) */
@keyframes water-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pond-water, .pond-lights { animation: none; } }
.pond-hint { position: fixed; left: 0; right: 0; bottom: 1.4rem; margin: 0; text-align: center; font-size: 0.8rem; letter-spacing: 0.06em; opacity: 0.45; transition: opacity 1s ease; pointer-events: none; z-index: 2; }
.pond-hint.gone { opacity: 0; }

/* a creature's haiku, beneath it (or above it, near the foot of the screen), following it as it swims: it grows out of
   the creature on a fine thread, faintly lit in the haiku's own colour, and its lines come one after another */
.pond-card { position: fixed; left: 0; top: 0; z-index: 2; color: var(--ink); width: max-content; max-width: min(22rem, 80vw); /* (its own width wherever it is: near an edge it does not narrow, it goes off) */
  padding: 1rem 1.25rem 0.85rem; border-radius: 16px; --accent: var(--ink);
  background: color-mix(in srgb, var(--paper) 78%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  box-shadow: 0 8px 24px -14px color-mix(in srgb, var(--accent) 16%, transparent), 0 0 0 1px color-mix(in srgb, var(--accent) 5%, transparent) inset; /* (only just there) */
  opacity: 0; filter: blur(6px); transform-origin: 50% 0; transform: translate(-50%, 0) scale(0.82);
  transition: opacity 0.4s ease, filter 0.45s ease, transform 0.55s cubic-bezier(0.2, 0.9, 0.25, 1.12); pointer-events: none; }
.pond-card.above { transform-origin: 50% 100%; transform: translate(-50%, -100%) scale(0.82); }
.pond-card.shown { opacity: 1; filter: none; transform: translate(-50%, 0) scale(1); pointer-events: auto; }
.pond-card.above.shown { transform: translate(-50%, -100%) scale(1); }
/* the thread to its creature */
.pond-card::before { content: ''; position: absolute; left: 50%; top: -10px; width: 1px; height: 10px; background: linear-gradient(transparent, color-mix(in srgb, var(--accent) 70%, var(--ink))); }
.pond-card.above::before { top: auto; bottom: -10px; background: linear-gradient(color-mix(in srgb, var(--accent) 70%, var(--ink)), transparent); }
.pond-card .poem { font-size: clamp(1.15rem, 2vw, 1.5rem); }
.pond-card .poem span { margin-bottom: 0.25em; white-space: normal; opacity: 0; transform: translateY(5px); transition: opacity 0.6s ease, transform 0.6s ease; transition-delay: calc(0.12s + var(--i, 0) * 0.11s); }
.pond-card.shown .poem span { opacity: 1; transform: none; }
.pond-card .foot { display: flex; justify-content: space-between; align-items: baseline; gap: 1.2rem; margin: 0.75rem 0 0; font-size: 0.78rem; letter-spacing: 0.01em; opacity: 0; transition: opacity 0.6s ease 0.5s; }
.pond-card.shown .foot { opacity: 0.75; }
.pond-card .by::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 0.45em; border-radius: 50%; background: var(--accent); vertical-align: 0.05em; }
/* "its page": sliding in after the words; pointed at, a soft light in the haiku's colour comes up behind it, it warms to
   that colour, and the arrow steps on */
.pond-card a.its-page { color: inherit; text-decoration: none; padding: 0.15em 0.55em; margin: -0.15em -0.55em; border-radius: 999px;
  display: inline-block; transform: translateX(-8px); opacity: 0;
  transition: background-color 0.4s ease, color 0.35s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.55s, opacity 0.6s ease 0.55s; }
.pond-card.shown a.its-page { transform: none; opacity: 1; }
.pond-card a.its-page:hover { color: color-mix(in srgb, var(--accent) 50%, var(--ink)); background-color: color-mix(in srgb, var(--accent) 18%, transparent); }
.pond-card a.its-page .arrow { display: inline-block; transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); }
.pond-card a.its-page:hover .arrow { transform: translateX(5px); }
/* leaving the pond, the haiku showing goes at once (the page is taking another's colours) */
html.departing .pond-card { opacity: 0; transition: opacity 0.2s ease; }

/* the depth gauge, at the left (pond.js): the surface at its top, the bed at its foot, the months between */
.depth { position: fixed; left: clamp(0.9rem, 2.4vw, 2rem); top: 6.5rem; bottom: 3rem; width: 4.5rem; z-index: 3; cursor: pointer; touch-action: none; font-family: var(--mono); }
.depth-line { position: absolute; left: 4px; top: 0; bottom: 0; width: 1px; background: color-mix(in srgb, var(--ink) 30%, transparent); }
.depth-band { position: absolute; left: 2px; width: 5px; border-radius: 3px; background: color-mix(in srgb, var(--ink) 22%, transparent); }
.depth-tick { position: absolute; left: 4px; width: 7px; height: 1px; background: color-mix(in srgb, var(--ink) 45%, transparent); }
.depth-tick span { position: absolute; left: 12px; top: -0.55em; font-size: 0.62rem; letter-spacing: 0.04em; white-space: nowrap; opacity: 0.45; }
.depth-mark { position: absolute; left: 0; width: 9px; height: 9px; margin-top: -5px; border-radius: 50%; border: 1px solid var(--ink); background: var(--paper); transition: transform 0.25s ease; }
.depth-label { position: absolute; left: 16px; top: -0.35em; padding: 0.05em 0.35em; border-radius: 4px; font-size: 0.68rem; letter-spacing: 0.04em; white-space: nowrap; background: color-mix(in srgb, var(--paper) 80%, transparent); }
.depth:hover .depth-mark, .depth.held .depth-mark { transform: scale(1.3); }
html.departing .depth { opacity: 0; transition: opacity 0.3s ease; }
/* the writer's name, leading to their page */
.pond-card a.writer:hover { background-color: color-mix(in srgb, var(--accent) 18%, transparent); }