body{ margin:0;
background: black;
height: 200vh;}

#parallax{
    position:relative;
    height: 100vh;
    background-image: url(../images/mulan-background.png);
    background-size: cover;
    overflow: hidden;

}


.layer5::after::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 30%;
    
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(255, 255, 255, 0.15) 40%,
        rgba(255, 255, 255, 0.75) 100%
    );

    z-index: 5;
    pointer-events: none;
}

.layer6::after::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 30%;
    
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(255, 255, 255, 0.15) 40%,
        rgba(255, 255, 255, 0.75) 100%
    );

    z-index: 6;
    pointer-events: none;
}



.parallax__layer{
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;

}

.layer1{z-index:1;
    --parallax-speed: 0.3;

  

}


.layer1 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
}

.layer2{z-index:2;
    
    --parallax-speed: 0.5;
    opacity: 1;
    mix-blend-mode:screen;

}


.layer3{z-index:3;
    --parallax-speed: 0.2;

   display: flex;
   justify-content: flex-end;
   align-items: flex-start;
   opacity: 1;
    mix-blend-mode:multiply;
}



.layer3 img{
    position: absolute;
    width: 20%;
    
    /* fondu vers le bas + vers la droite */
    -webkit-mask-image:
        linear-gradient(to bottom, 
            black 70%,
            transparent 100%
        ),
        linear-gradient(to right,
            black 75%,
            transparent 100%
        );

    -webkit-mask-composite: source-in;

    mask-image:
        linear-gradient(to bottom, 
            black 70%,
            transparent 100%
        ),
        linear-gradient(to right,
            black 75%,
            transparent 100%
        );

    mask-composite: intersect;
    opacity: 0.7;

}


.layer4{z-index:4;
    --parallax-speed: 0.2;

   display: flex;
   justify-content: flex-end;
   align-items: flex-start;
   opacity: 0.8;
   mix-blend-mode:multiply;
   height:20%;
   width: 30%;

}

.layer4::after::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50%;
    height: 20%;
    
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(255, 255, 255, 0.15) 40%,
        rgba(255, 255, 255, 0.75) 100%
    );

    z-index: 4;
    pointer-events: none;
}

.layer4{z-index:4;
    --parallax-speed: 0.2;

   display: flex;
   justify-content: flex-end;
   align-items: flex-start;
   opacity: 0.8;
   mix-blend-mode:multiply;
   height:20%;
   width: 30%;

}

.layer6 {z-index:4;

    --parallax-speed: -0.3;
    opacity: 0.8;
    mix-blend-mode: screen;
    display: flex;
   
  
}

.layer6 img {
    width: 100%;
    height: 120%;
    object-fit: cover;
}


.layer7{z-index:5;
    display: flex;
    justify-content: center;
    align-items: flex-end;

    --parallax-speed: -0.5;
    opacity: 1;
    mix-blend-mode: screen;

}

.layer7 img{
    position: absolute;
    width: 100%;

    
    /* fondu vers le bas + vers la droite */
    -webkit-mask-image:
        linear-gradient(to bottom, 
            black 70%,
            transparent 100%
        ),
        linear-gradient(to right,
            black 75%,
            transparent 100%
        );

    -webkit-mask-composite: source-in;

    mask-image:
        linear-gradient(to bottom, 
            black 70%,
            transparent 100%
        ),
        linear-gradient(to right,
            black 75%,
            transparent 100%
        );

    mask-composite: intersect;
    opacity: 0.7;
}

.layer8{z-index:6;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    
    --parallax-speed: -0.07;

}

.layer8 img {
    position: absolute;
    width: 85%;
    height: auto;

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            black 0%,
            black 82%,
            rgba(0, 0, 0, 0.85) 90%,
            rgba(0, 0, 0, 0.55) 96%,
            transparent 100%
        ),
        linear-gradient(
            to right,
            black 0%,
            black 75%,
            transparent 100%
        );

    -webkit-mask-composite: source-in;

    mask-image:
        linear-gradient(
            to bottom,
            black 0%,
            black 82%,
            rgba(0, 0, 0, 0.85) 90%,
            rgba(0, 0, 0, 0.55) 96%,
            transparent 100%
        ),
        linear-gradient(
            to right,
            black 0%,
            black 75%,
            transparent 100%
        );

    mask-composite: intersect;
}


.layer9{z-index:7;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
 
    --parallax-speed: -0.9
    ;
   
    opacity: 1;

}

.layer9 img{ width:40%;
    height: 40%;
    


    



}