.showerWater{position:fixed;inset:0;z-index:2;pointer-events:none;overflow:hidden;}
/* Parallel water jets: the streak direction matches their travel direction. */
#showerField{isolation:isolate;}
.showerWater::before,.showerWater::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  opacity:0;background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22180%22%20height%3D%22240%22%20viewBox%3D%220%200%20180%20240%22%3E%3Cg%20stroke%3D%22%23c5e9ff%22%20stroke-width%3D%221%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M38%20-12l-30%2080M98%2032l-30%2080M157%20-20l-30%2080M194%20105l-30%2080M65%20155l-30%2080M127%20180l-30%2080%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-repeat:repeat;background-size:150px 200px;
  transition:opacity 800ms ease;animation:shower-water-flow 580ms linear infinite;
  animation-play-state:paused;
}
.showerWater::after{background-size:225px 300px;animation-name:shower-water-far;animation-duration:920ms;}
body.shower-running .showerWater::before{opacity:.15;animation-play-state:running;}
body.shower-running .showerWater::after{opacity:.08;animation-play-state:running;}
@keyframes shower-water-flow{from{background-position:0 0;}to{background-position:-150px 400px;}}
@keyframes shower-water-far{from{background-position:75px -50px;}to{background-position:-150px 550px;}}
@media(prefers-reduced-motion:reduce){
  .showerWater::before,.showerWater::after{display:none;animation:none;}
}