@keyframes scroll-watch{
to{scale :1 1 ;
}
 }
 .scroll-watch{
    height:1.5px;
    position:fixed;
    top:0;
    z-index:1000;
    background-color:#0f958c ;
    width:100%;
    scale: 0 1;
    transform-origin:center;
    box-shadow:0px 0px 10px #0f958c;

    animation: scroll-watch linear;
    animation-timeline:scroll();
 }

@keyframes arrow{ 
   0%{
     tranform: translate(0);
    opacity:1;
   }
    100%{ 
      transform: translate(40px,40px);
      opacity:0;
    } 
}
#arrow{
    animation:arrow ease-in-out;
    animation-duration:1.2s ;
    animation-iteration-count: infinite;
    }


    @keyframes arrow2{ 
   0%{
     opacity:20%;
     scale:70%
   }

   50%{
    opacity:100%;
    scale:100%;
   }
    100%{ 
      opacity:20%;
      scale:70%;
    } 
}
#arrow2{
    animation:arrow2 linear;
    animation-duration:1.2s ;
    animation-iteration-count: infinite;
    }


@keyframes circle{ 
   0%{
     transform: rotate(0deg);
   }
    100%{ 
      transform: rotate(360deg);
    } 
}
#circle{
    animation:circle linear;
    animation-duration:15s ;
    animation-iteration-count: infinite;
    }





@keyframes shield{ 
   0%{
     scale:0.85;
   }
   50%{
    scale:1;
   }
    100%{ 
      scale:0.85;
    } 
}
#shield{
    animation:shield ease-in-out;
    animation-duration:1s ;
    animation-iteration-count: infinite;
    }


    @keyframes lock{ 
   0%{
     opacity:20%;
   }
   50%{
    opacity:1;
   }
    100%{ 
      opacity:20%;
    } 
}
#lock{
    animation:lock ease-in-out;
    animation-duration:1.7s ;
    animation-iteration-count: infinite;
    }


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

#ai{
    animation:ai ease-in-out;
    animation-duration:4s ;
   animation-iteration-count: infinite;
    }

@keyframes ai2 {
   0%{
     opacity:50%;
     transform: translateX(-10px);
   }
   50%{
    opacity:100%;
     transform: translateY(0);
   }
    100%{ 
      opacity:50%;  
       transform: translateX(-10px);
    } 
}
#ai2{
    animation:ai2 ease-in-out;
    animation-duration:4s ;
   animation-iteration-count: infinite;
    }


@keyframes ai3 {
   0%{
     opacity:75%;
     transform: translateX(-15px);
   }
   50%{
    opacity:40%;
     transform: translateY(0);
   }
    100%{ 
      opacity:75%;  
       transform: translateX(-15px);
    } 
}
#ai3{
    animation:ai3 ease-in-out;
    animation-duration:4s ;
   animation-iteration-count: infinite;
    }

@keyframes ai5 {
   0%{
     opacity:75%;
     transform: translateY(-15px);
   }
   50%{
    opacity:40%;
     transform: translateY(0);
   }
    100%{ 
      opacity:75%;  
       transform: translateY(-15px);
    } 
}

#ai5{
    animation:ai5 ease-in-out;
    animation-duration:4s ;
   animation-iteration-count: infinite;
    }



@keyframes ai6 {
   0%{
     opacity:75%;
     transform: translateY(15px);
   }
   50%{
    opacity:40%;
     transform: translateY(0);
   }
    100%{ 
      opacity:75%;  
       transform: translateY(15px);
    } 
}

#ai6{
    animation:ai6 ease-in-out;
    animation-duration:4s ;
   animation-iteration-count: infinite;
    }

@keyframes ai7 {
   0%{
     opacity:40%;
     transform: translateX(-15px);
   }
   50%{
    opacity:75%;
     transform: translateY(0);
   }
    100%{ 
      opacity:40%;  
       transform: translateX(-15px);
    } 
}

#ai7{
    animation:ai7 ease-in-out;
    animation-duration:4s ;
   animation-iteration-count: infinite;
    }



    @keyframes ai8 {
   0%{
     opacity:40%;
     transform: translateX(-15px);
   }
   50%{
    opacity:75%;
     transform: translateY(15px);
   }
    100%{ 
      opacity:40%;  
       transform: translateX(-15px);
    } 
}

#ai8{
    animation:ai7 ease-in-out;
    animation-duration:4s ;
   animation-iteration-count: infinite;
    }
@keyframes text{ 
   from{
      transform: translateY(70px);
    opacity:0;
    filter:blur(3px);
   }
    to{ 
      transform: translate(0);
      opacity:1;
       filter:blur(0px);
    } 
}
#text{
    animation:text ease-out;
    animation-duration:1s ;
    animation-iteration-count:1;
    }



    
    @keyframes circuit{ 
   from{
      transform: translateY(70px);
    opacity:0;
    filter:blur(3px);
    filter:brightness(0)
   }
    to{ 
      transform: translate(0);
      opacity:1;
       filter:blur(0px);
        filter:brightness(0)
    } 
}
#circuit{
    animation:circuit ease-out;
    animation-duration:1s ;
    animation-iteration-count:1;
    }










  .show{
      opacity:1;
      transform:translateX(0);
      filter:blur(0);
    }

    .show1{
 opacity:1;
      filter:blur(0);
      scale:1;
    }

 .show2{
     opacity:1;
      filter:blur(0);
       transform: translate(0) rotate(0);

    }





  #b2 {
transition-delay:0.05s;
}
  #b3 {
transition-delay:0.1s;
}
  #b4 {
transition-delay:0.15s;
}
  #b5 {
transition-delay:0.2s;
}
  #b6 {
transition-delay:0.25s;
}
  #b7 {
transition-delay:0.3s;
}
  #b8 {
transition-delay:0.35s;
}
  #b9 {
transition-delay:0.4s;
}
  #b10 {
transition-delay:0.45s;
}



@keyframes animate-gradient {
  to{
    background-position:200%;
  }
}

@keyframes spin{
  from{
    --a:0deg;
  }
  to{
    --a:360deg;
  }
}