#alleen-ambient-root{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999999;
  overflow: hidden;
}

#alleen-ambient-root .pl-band{
  position:absolute; left:0; right:0; bottom:0;
  pointer-events:none;
}

#alleen-ambient-root .pl-band.water{
  height: 90px;
  background: rgba(0, 140, 170, 0.30);
  backdrop-filter: blur(2px);
}
#alleen-ambient-root .pl-band.water::before{
  content:"";
  position:absolute; left:-20%; right:-20%; top:12px; height:18px;
  background: rgba(255,255,255,0.12);
  border-radius: 999px;
  animation: plWave 3.5s linear infinite;
}
@keyframes plWave{ 0%{transform:translateX(0);} 100%{transform:translateX(20%);} }

#alleen-ambient-root .pl-band.mud{
  height: var(--mudH, 60px);
  background: rgba(90,55,25,0.88);
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
}

/* sprite basis */
#alleen-ambient-root .pl-sprite{
  position:absolute;
  bottom: 18px;
  width: var(--w, 600px);
  height: var(--h, 300px);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: var(--w, 600px) calc(var(--h, 300px) * var(--frames, 4));
  will-change: transform, background-position;
}

/* frames animatie */
#alleen-ambient-root .pl-sprite.anim{
  animation: plFrames var(--frameDur, 0.6s) steps(var(--frames, 4)) infinite;
}
@keyframes plFrames{
  from { background-position-y: 0; }
  to   { background-position-y: calc(-1 * var(--h, 300px) * var(--frames, 4)); }
}

/* rijden */
#alleen-ambient-root .pl-sprite.rtl{ animation: plDriveRTL var(--driveDur, 22s) linear infinite; }
#alleen-ambient-root .pl-sprite.ltr{ animation: plDriveLTR var(--driveDur, 22s) linear infinite; }

@keyframes plDriveRTL{
  from { transform: translateX(calc(100vw + 700px)); }
  to   { transform: translateX(-900px); }
}
@keyframes plDriveLTR{
  from { transform: translateX(-900px); }
  to   { transform: translateX(calc(100vw + 700px)); }
}