/* ------------------------------------------------------------------
   The Water.
   A page with nothing to read: one wet sheet below the header, the
   footer dry beneath it. The canvas paints on the site's own paper;
   the only words are a hint that leaves once the visitor arrives.
   ------------------------------------------------------------------ */

.water-stage {
  position: relative;
  min-height: calc(100vh - 90px);
  min-height: calc(100dvh - 90px);
  overflow: hidden;
  cursor: crosshair;
  /* Vertical scroll stays with the page so the footer is reachable;
     everything else the finger does is paint. */
  touch-action: pan-y;
}

#water {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.water-hint {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 340;
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  letter-spacing: 0.01em;
  color: var(--ink-soft);
  opacity: 1;
  animation: hint-surface 3.5s var(--ease-wash) 0.8s both;
  transition: opacity 2s var(--ease-wash);
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

@keyframes hint-surface {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Once touched, the words yield to the water and do not return. */
.water-stage.touched .water-hint {
  animation: none;
  opacity: 0;
}

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