.infinite-text{
  cursor:default;
    font-size:2rem;
  white-space:nowrap;
  --color:var(--primaryColor);
  --_offset:50;
  transition:font-size .3s ease;
  color:var(--color);
  text-shadow: 
    calc(var(--charlength,1) * 1ch) 0 0 var(--color),
    calc(var(--charlength,1) * 2ch) 0 0 var(--color),
    calc(var(--charlength,1) * 3ch) 0 0 var(--color),
    calc(var(--charlength,1) * 4ch) 0 0 var(--color);
  animation : infinite-text 4s linear infinite  var(--direction,normal);
  @media(width < 992px){
      font-size:1.5rem;
}
}
@keyframes infinite-text{
  0%{
    translate:0px;
  }
  100%{
    translate:calc(var(--charlength) * -1ch);
  }
}
.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;
  }
}


.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;
  }
}