/* Tiny, silent visitors behind the interface. Never a touch target. */
.river-happenings { position: absolute; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; }
.river-happening { position: absolute; pointer-events: none; }
.river-shadow { width: 122px; height: 32px; opacity: .9; transform-origin: top left; }
.river-swimmer {
  position: absolute; left: 0; top: 4px; width: 72px; height: 24px;
  fill: #1f3027; filter: blur(.6px);
  animation: river-swim-past 8s ease-in-out both;
}
.river-wake {
  position: absolute; left: 53px; top: 16px; width: 28px; height: 7px;
  border: 1px solid #e5e1bf; border-bottom-color: #43554699; border-left-color: transparent; border-radius: 50%;
  animation: river-wake-spread 8s ease-out both;
}
.river-wake-late { left: 78px; top: 18px; animation-name: river-wake-after; }
.river-eyes { width: 32px; height: 14px; overflow: hidden; }
.river-eyes-peek {
  position: absolute; inset: 2px 1px -4px; border-radius: 50% 55% 0 0;
  background: radial-gradient(ellipse at 50% 100%, #252d22e6 35%, #30372bbb 65%, transparent 73%);
  animation: river-peek 8s ease-in-out both;
}
.river-eyes-peek i {
  position: absolute; top: 4px; left: 7px; width: 6px; height: 5px;
  border-radius: 47% 53% 45% 55%; background: #d2ce9b;
  animation: river-blink 8s linear both;
}
.river-eyes-peek i:after {
  content: ''; position: absolute; left: 2px; top: 1px; width: 2px; height: 3px;
  border-radius: 50%; background: #252c22;
}
.river-eyes-peek i + i { left: 17px; animation-name: river-blink-late; }
[data-light="day"] .river-eyes { opacity: .8; }
[data-light="night"] .river-shadow { opacity: .7; }
[data-light="night"] .river-eyes-peek i { background: #c7c393; }
[data-weather="rain"] .river-shadow { opacity: .7; }
[data-atmosphere-paused] .river-happenings { display: none; }

@keyframes river-swim-past {
  0% { opacity: 0; transform: translate3d(0, 2px, 0) scale(.9); }
  12% { opacity: .72; }
  48% { opacity: .8; transform: translate3d(26px, -1px, 0) scale(1); }
  72% { opacity: .72; transform: translate3d(44px, 1px, 0) scale(.95); }
  94%, 100% { opacity: 0; transform: translate3d(50px, 3px, 0) scale(.9, .8); }
}
@keyframes river-wake-spread {
  0%, 32% { opacity: 0; transform: scale(.55); }
  46% { opacity: .7; }
  85%, 100% { opacity: 0; transform: scale(1.65, 1.5); }
}
@keyframes river-wake-after {
  0%, 58% { opacity: 0; transform: scale(.45); }
  70% { opacity: .6; }
  100% { opacity: 0; transform: scale(1.45); }
}
@keyframes river-peek {
  0%, 8% { opacity: 0; transform: translateY(13px); }
  23%, 70% { opacity: 1; transform: translateY(0); }
  87%, 100% { opacity: 0; transform: translateY(13px); }
}
@keyframes river-blink {
  0%, 41%, 45%, 100% { transform: scaleY(1); }
  43% { transform: scaleY(.08); }
}
@keyframes river-blink-late {
  0%, 43%, 47%, 100% { transform: scaleY(1); }
  45% { transform: scaleY(.08); }
}
@media (prefers-reduced-motion: reduce) {
  .river-happenings { display: none; }
}