:root {
  --hdr-gradient: linear-gradient(
    167deg in oklab,
    oklch(100% 0 340 / 5%) 32% 8%, oklch(100% 0 200 / 20%) 85%
  );
  --sdr-gradient: linear-gradient(167deg, #fff3 32% 8%, #fff9 85%);



}



body{background: black;


}



.container{


height: 300vh;
position: relative;
}



.stack{
  position:fixed;
  top:30%;
  width:90%;
  left:5%;
  animation-name:fadein;
  -webkit-animation-name:fadein;
  animation-duration:500ms;
  -webkit-animation-duration:500ms;
  animation-fill-mode:forwards;
  -webkit-animation-fill-mode:forwards;
  animation-timing-function:ease-in-out;
  -webkit-animation-timing-function:ease-in-out;
}


#imagestack{
	max-height: 100vh;
	max-width: 100vh;
	margin:auto;
}

.info-box{

background:var(--hdr-gradient);
backdrop-filter: blur(32px);
height: 200px;
position: fixed;
bottom:5%;
left:5%;
width:90%;
color:white;
border-radius: 8px;
border: 1px solid #FFFFFF60;
transition: opacity 400ms ease-in-out;

}

#box-1{
opacity: 0;
}
#box-2{
opacity: 0;
}


.text-info{

padding:32px;


}




@keyframes fadein {
  0% {
    opacity: 0;
    filter: blur(60px);
    -webkit-transform: scale(0.1);
            transform: scale(0.1);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes firststep {
  0% {
    -webkit-transform: scale(1) translateY(0%);
            transform: scale(1) translateY(0%);
  }
  100% {
    -webkit-transform: scale(1.4) translateY(15%);
            transform: scale(1.4) translateY(15%);
  }
}

@keyframes secondstep {
  0% {
    -webkit-transform: scale(1.4) translateY(15%) rotate(0deg);
            transform: scale(1.4) translateY(15%) rotate(0deg);
  }
  100% {
    -webkit-transform: scale(1.4) translateY(15%) rotate(180deg);
            transform: scale(1.4) translateY(15%) rotate(180deg);
  }
}

@keyframes secondstepback {
  0% {
    -webkit-transform: scale(1.4) translateY(15%) rotate(180deg);
            transform: scale(1.4) translateY(15%) rotate(180deg);
  }
  100% {
    -webkit-transform: scale(1.4) translateY(15%) rotate(0deg);
            transform: scale(1.4) translateY(15%) rotate(0deg);
  }
}

@keyframes firststepback {
  0% {
    -webkit-transform: scale(1.4) translateY(15%);
            transform: scale(1.4) translateY(15%);
  }
  100% {
    -webkit-transform: scale(1) translateY(0%);
            transform: scale(1) translateY(0%);
  }
}

.animation-firststep{
  animation-name:firststep;
  -webkit-animation-name:firststep;
  animation-duration:400ms;
  -webkit-animation-duration:400ms;
  animation-fill-mode:forwards;
  -webkit-animation-fill-mode:forwards;
  animation-timing-function:ease-in;
  -webkit-animation-timing-function:ease-in;
}

.animation-secondstep{
  animation-name:secondstep;
  -webkit-animation-name:secondstep;
  animation-duration:1.2s;
  -webkit-animation-duration:1.2s;
  animation-fill-mode:forwards;
  -webkit-animation-fill-mode:forwards;
  animation-timing-function:ease-in-out;
  -webkit-animation-timing-function:ease-in-out;
}

.animation-firststep-reverse{
  animation-name:firststepback;
  -webkit-animation-name:firststepback;
  animation-duration:400ms;
  -webkit-animation-duration:400ms;
  animation-timing-function:ease-in;
  -webkit-animation-timing-function:ease-in;
}

.animation-secondstep-reverse{
  animation-name:secondstepback;
  -webkit-animation-name:secondstepback;
  animation-duration:1.2s;
  -webkit-animation-duration:1.2s;
  animation-timing-function:ease-in-out;
  -webkit-animation-timing-function:ease-in-out;
}