.site-background {
  position: fixed;
  height: 100vh;
  width: 100vw;
  inset: 0;
  
}

.parallax {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.parallax .background {
    position: absolute;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    inset: 0;
    width: 100%;
    height: 100%;
    background-image: url('/media/parallax/background.png');
    z-index: -13;
}

.layer {
  position: absolute;
  inset: -10%;
  width: 120%;
  height: 120%;

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  will-change: transform, opacity;

  opacity: 0;
}

.site-background.loaded .layer {
  opacity: 1;
}

/* Layer order (back → front) */

.layer-1 { 
  z-index: -12; 
  background-image: url('/media/parallax/layer-12.png');
}
.layer-2 { 
  z-index: -11; 
  background-image: url('/media/parallax/layer-11.png');
}
.layer-3 { 
  z-index: -10; 
  background-image: url('/media/parallax/layer-10.png');
}
.layer-4 { 
  z-index: -9; 
  background-image: url('/media/parallax/layer-09.png');
}
.layer-5 { 
  z-index: -8; 
  background-image: url('/media/parallax/layer-08.png');
}
.layer-6 { 
  z-index: -7; 
  background-image: url('/media/parallax/layer-07.png');
}
.layer-7 { 
  z-index: -6; 
  background-image: url('/media/parallax/layer-06.png');
}
.layer-8 { 
  z-index: -5; 
  background-image: url('/media/parallax/layer-05.png');
}
.layer-9 { 
  z-index: -4; 
  background-image: url('/media/parallax/layer-04.png');
}
.layer-10 { 
  z-index: -3; 
  background-image: url('/media/parallax/layer-03.png');
}
.layer-11 { 
  z-index: -2; 
  background-image: url('/media/parallax/layer-02.png');
}
.layer-12 { 
  z-index: -1; 
  background-image: url('/media/parallax/layer-01.png');
}