/* Pencil marks share the creek illustration's coordinates, crop, and gray palette. */
.ambient-life {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}

.creek-surface {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: #625f5b;
  stroke-width: 1.15;
  stroke-linecap: round;
}

.water-ring {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation: pencil-ripple 7.2s linear infinite;
}

.water-ring:nth-child(2) { animation-delay: -2.4s; }
.water-ring:nth-child(3) { animation-delay: -4.8s; }
.ripple-upstream .water-ring { animation-duration: 8.4s; }
.ripple-upstream .water-ring:nth-child(2) { animation-delay: -2.8s; }
.ripple-upstream .water-ring:nth-child(3) { animation-delay: -5.6s; }
.ripple-downstream .water-ring { animation-duration: 6.6s; }
.ripple-downstream .water-ring:nth-child(2) { animation-delay: -2.2s; }
.ripple-downstream .water-ring:nth-child(3) { animation-delay: -4.4s; }
.ripple-pencil-echo { opacity: .28; stroke-width: .7; }
.water-dimple {
  opacity: 0;
  animation: creek-dimple 7.2s ease-out infinite;
}

/* The transparent pencil sheet contains four actual wing positions. */
.forest-flyby {
  position: absolute;
  top: 23%;
  left: 0;
  width: 76px;
  height: 90px;
  opacity: 0;
  will-change: transform;
  animation: woodland-bird-crossing 35s linear infinite;
}

.sketch-bird {
  display: block;
  width: 76px;
  height: 75px;
  background: url('ambient/songbird-pencil-flight.png') 0 0 / 200% 200% no-repeat;
  animation: songbird-wingbeat .64s steps(1, end) infinite;
}

@keyframes pencil-ripple {
  0% { opacity: 0; transform: scale(.3, .4); }
  12% { opacity: .65; }
  48% { opacity: .48; }
  90%, 100% { opacity: 0; transform: scale(1.5, 1.45); }
}

@keyframes creek-dimple {
  0%, 6%, 100% { opacity: 0; }
  2% { opacity: .52; }
}

@keyframes woodland-bird-crossing {
  0%, 10% { opacity: 0; transform: translate(-100px, 0) rotate(-4deg); }
  11.143% { opacity: .84; }
  16.286% { transform: translate(calc(43vw - 34px), -18px) rotate(-2deg); }
  20.571% { opacity: .84; }
  22%, 100% { opacity: 0; transform: translate(calc(100vw + 100px), 5px) rotate(3deg); }
}

@keyframes songbird-wingbeat {
  0%, 100% { background-position: 0 0; transform: translateY(0); }
  25% { background-position: 100% 0; transform: translateY(0); }
  50% { background-position: 0 100%; transform: translateY(21%); }
  75% { background-position: 100% 100%; transform: translateY(21%); }
}

@media (max-width: 680px) {
  .forest-flyby { top: 29%; width: 62px; height: 76px; }
  .sketch-bird { width: 62px; height: 61px; }
}

@media (prefers-reduced-motion: reduce) {
  .ambient-life { display: none; }
}