#text-1{
    animation: text1;
    animation-duration: 3s;
}
@keyframes text1{
    0%{
      
        opacity: 0;
        transform: translateY(50px);
    }
    100%{
      
        opacity: 1;
        transform: translateY(0px);
    }
}
#text-2{
    animation: text2;
    animation-duration: 3s;
    
}
@keyframes text2{
    0%{
       
        opacity: 0;
        transform: translateY(50px);
    }
    100%{
     
        opacity: 1;
        transform: translateY(0px);
    }
}
.navber{
    animation-name: navber;
    animation-duration: 2s;

}
@keyframes navber{
    0%{
        transform: translateY(-50px);
        opacity: 0;
    }
    100%{
     
        opacity: 1;
          transform: translateY(0px);
    }
}

.logo-2{
    animation-name: logo-2;
    animation-duration: 2s;
}
@keyframes logo-2{
    0%{
        transform: translateX(200px);
        opacity: 0;
    }
    100%{
     
        opacity: 1;
          transform: translateX(0px);
    }
}

.shop-box > div:first-child img{
    animation: logo-3;
    animation-timeline: view();
    animation-range: entry 0% cover 50%;
}
@keyframes logo-3{
    0%{
        transform: scale(0) rotate(0deg);
        opacity: 0.5;
    }
      100%{
        transform: scale(1) rotate(360deg) ;
        opacity: 1;
    }
}
.shop-box > div:nth-child(2){
    animation: scal;
    animation-timeline: view();
}
.shop-box > div:nth-child(3){
    animation: scal;
    animation-timeline: view();
}
.shop-box > div:nth-child(4){
    animation: scal;
    animation-timeline: view();
}
.shop-box > div:nth-child(5){
    animation: scal;
    animation-timeline: view();
}
.shop-box > div:nth-child(6){
    animation: scal;
    animation-timeline: view();
}
@keyframes scal{
    0%{
        transform: scale(0.5);
        opacity: 0.5;
        filter: blur(1px);
    }
    100%{
          transform: scale(1);
        opacity: 1;
        filter: none;
    }
}

.details-box>div:nth-child(1){
    animation: same;
    animation-timeline: view();
    animation-range: entry 0% cover 20%;

}
.details-box>div:nth-child(4){
    animation: same2;
    animation-timeline: view();
        animation-range: entry 20% cover 40%;

}

@keyframes same{
      0%{
        transform: scale(0.4);
    }
      100%{
        transform: scale(1);
    }
}

@keyframes same2{
     0%{
        transform: scale(0.4);
    }
      100%{
        transform: scale(1);
    }
}

.details-box>div:nth-child(3){
    animation: same3;
    animation-timeline: view();
      animation-range: entry 40% cover 100%;

}
.details-box>div:nth-child(2){
    animation: same3;
    animation-timeline: view();
      animation-range: entry 40% cover 100%;
}
@keyframes same3{
      0%{
        transform: scale(0.4);
    }
      100%{
        transform: scale(1);
    }
}
#shop{
    animation: btn;
    animation-duration: 2s;
    
}
@keyframes btn{
    0%{
        transform: scale(0);
        opacity: 0;
      
    }
    100%{
        transform: scale(1);
        opacity: 1;
      
    }
}