.river{
  position:absolute;
  left:0; right:0; bottom:0;
  height:var(--river-height);
  z-index:3;              
  overflow:hidden;
}

.water.layer{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, var(--river-1), var(--river-2)),
    repeating-linear-gradient(90deg, #ffffff15 0 40px, transparent 40px 120px);
  border-radius:0 0 42px 42px;
  animation: waterDrift var(--dur-river) linear infinite;
  opacity:.97;
}
@keyframes waterDrift{
  0%{background-position:0 0, 0 0}
  50%{background-position:-3% 0, -160px 0}
  100%{background-position:0 0, -320px 0}
}

.water.reflection{
  position:absolute; left:50%; transform:translateX(-50%);
  top:20%; width:90%; height:35%;
  background:radial-gradient(60% 120% at 50% 0%, #ffffff35 0, #ffffff15 45%, transparent 70%);
  border-radius:50%/80%;
  filter:blur(3px); opacity:.55; pointer-events:none;
}

.fish{
  position:absolute; left:-10vw;
  top:65%; width:28px; height:14px;
  background:#ff8c42; border-radius:14px 10px 10px 14px/8px 8px 8px 8px;
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.1);
  animation: swim 22s linear infinite;
}
.f1{top:68%; animation-duration:24s}
.f2{top:73%; animation-duration:20s; animation-delay:4s; transform:scale(.9)}
.f3{top:78%; animation-duration:26s; animation-delay:8s; transform:scale(1.1)}
.f4{top:71%; animation-duration:28s; animation-delay:12s; transform:scale(.85)}
.fish:after{content:""; position:absolute; right:-8px; top:2px; width:0; height:0; border-left:10px solid #ff6f2c; border-top:6px solid transparent; border-bottom:6px solid transparent}
.fish:before{content:""; position:absolute; left:4px; top:4px; width:4px; height:4px; border-radius:50%; background:#222}
@keyframes swim{
  0%{transform:translateX(0)}
  25%{transform:translateX(25vw)}
  50%{transform:translateX(55vw)}
  75%{transform:translateX(85vw)}
  100%{transform:translateX(110vw)}
}