.fade-out {
	
	        animation: fade-out 1s ease-out forwards;
          animation-delay: 2s;
}
@keyframes fade-out {
  0% {
    opacity: 1;
  }
  99% {
    opacity: 0;
  }
  100% {
    opacity: 0;
    display: none;
  }
}

.fade-in {
	
	        animation: fade-in 1s ease-out forwards;
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  99% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

.reveal{
 animation:reveal 2s cubic-bezier(.86,.2,.03,.97) reverse forwards;
 animation-delay: 2s;
--top: 30%;
    --bottom: 55%;
}

@keyframes reveal {
  0%{
    clip-path: polygon(0 var(--top), 0 var(--bottom), 0% var(--bottom), 0% var(--top));
  }
  50%{
    clip-path: polygon(0 var(--top), 0 var(--bottom), 100% var(--bottom), 100% var(--top));
  }
  100%{
    clip-path: polygon(0 0%, 0 100%, 100% 100%, 100% 0%);
  }
}
@keyframes reveal2 {
  0%{
    clip-path: polygon(0 49%, 0 51%, 0% 51%, 0% 49%);
  }
  50%{
    clip-path: polygon(0 49%, 0 51%, 100% 51%, 100% 49%);
  }
  100%{
    clip-path: polygon(0 0%, 0 100%, 100% 100%, 100% 0%);
  }
}


.slide-in-bck-center {
	-webkit-animation: slide-in-bck-center 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-in-bck-center 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}


@keyframes slide-in-bck-center {
  0% {
    -webkit-transform: translateZ(600px);
            transform: translateZ(600px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
    opacity: 1;
  }
}

.text2 div {
  height:var(--fz);
  
  
  perspective:5000px;

    & span{
      opacity: 0;
      font-weight:bold;
  font-size:var(--fz);
  color:#fff;
  display:inline-block;
  transition:all .5s ease;
  position:relative;
      transform-style:preserve-3d;
      letter-spacing: -14px;
    transform-origin:center;
    animation: scale-in-center .5s linear forwards;
    animation-delay:calc(var(--delay)*1);
    }
  
}

.text3 div {
  height:var(--fz);
  
  
  perspective:5000px;

    & span{
      opacity: 0;
      font-weight:bold;
  font-size:var(--fz);
  color:var(--primaryColor);
  display:inline-block;
  transition:all .5s ease;
  position:relative;
      transform-style:preserve-3d;
      letter-spacing: -6px;
    transform-origin:center;
    animation: scale-in-center 0.2s linear forwards;
    animation-delay:calc(var(--delay)*0.5);
    }
  
}

@keyframes scale-in-center {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}


          @keyframes ltr {
              0% {
                  stroke-dashoffset: 10000;

              }

              100% {
                  stroke-dashoffset: 3000;
              }
          }
          .view-timeline{
            view-timeline:--section;
          }
          .path {
              animation: ltr ease-in-out both;
              animation-timeline: --section;
              animation-range: entry 100% cover 75%;
          }