:root {
  --scroll:0;
}

#parallax-bg {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: -1;
  pointer-events: none;
}

#parallax-fg {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: 9999;
  pointer-events: none;
}

.p {
  position: absolute;
  left: 50%;
  top: 50%;
  min-width: 100vw;
  min-height: 100vh;
  object-fit: cover;

  transform:
    translate(
      calc(-50% + var(--x,0px)),
      calc(-50% + var(--y,0px) - var(--scroll) * var(--speed,0))
    )
    scale(var(--scale,1));

  z-index: var(--z,1);
}

.l0 { --speed:0.15; --scale:1;   --x:0px;   --y:0px;   --direction:0;  --z:1; filter:blur(px); }
.l1 { --speed:0.12; --scale:0.1; --x:-120px;--y:0px;   --direction:45; --z:2; }
.l2 { --speed:0.2;  --scale:0.8; --x:80px;  --y:-120px;--direction:80; --z:3; }
.l3 { --speed:0.35; --scale:0.9; --x:0px;   --y:120px; --direction:135;--z:4; }
.l4 { --speed:3;  --scale:0.5; --x:-700px;   --y:-620px;   --direction:0;  --z:5; filter:blur(px); }
.l5 { --speed:1.5;    --scale:0.3; --x:-700px;--y:-250; --direction:180;  --z:6; filter:blur(px);  }
.l6 { --speed:1.2;  --scale:1.3; --x:50px;  --y:-80px; --direction:270;--z:7; }