.water-surface{position:relative;isolation:isolate}
.water-lines{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1}
.water-lines>span{position:absolute;inset:-24px -70px;background:url('/assets/water-lines.svg') left center/1100px 600px repeat;opacity:.2;animation:water-drift 27s ease-in-out infinite alternate;will-change:transform}
.water-lines>span+span{background-position:440px 210px;background-size:1380px 750px;opacity:.11;animation-duration:35s;animation-direction:alternate-reverse}
@keyframes water-drift{from{transform:translate3d(-26px,-6px,0)}to{transform:translate3d(26px,6px,0)}}
@media(max-width:767px){.water-lines>span{background-size:900px 650px;opacity:.14}.water-lines>span+span{display:none}}
@media(prefers-reduced-motion:reduce){.water-lines>span{animation:none;will-change:auto}}
.water-lines>span{background-image:url('/assets/flowing-water.svg');background-size:max(100%,1100px) 700px;background-position:center top;background-repeat:repeat-y;opacity:.38}
.water-lines>span+span{background-position:180px 110px;background-size:max(115%,1300px) 840px;opacity:.13}
@media(max-width:767px){.water-lines>span{background-size:900px 700px;opacity:.24}}