@keyframes fade-in-fwd {
    0% {
        -webkit-transform: translateZ(-150px);
        transform: translateZ(-150px);
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
        -webkit-filter: blur(4px);
        filter: blur(4px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-filter: blur(0px);
        filter: blur(0px);
        opacity: 1;
    }
}  

@keyframes puff-in-center {
    0% {
        -webkit-transform: scale(2);
        transform: scale(2);
        -webkit-filter: blur(4px);
        filter: blur(4px);
        opacity: 0;
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-filter: blur(0px);
        filter: blur(0px);
        opacity: 1;
    }
}

@keyframes text-animate {
    0% {
      background-position: -500%;
    }
    100% {
      background-position: 500%;
      -webkit-text-fill-color: white;
    }
  }

  @keyframes bounceInLeft {
	0% {
		opacity: 0;
        transform: translateX(-1000px);
		-webkit-transform: translateX(-1000px);
	}
	60% {
		transform: translateX(20px);
        -webkit-transform: translateX(20px);
	}

	80% {
		transform: translateX(-5px);
        -webkit-transform: translateX(-5px);
	}

	100% {
		opacity: 1;
        transform: translateX(0);
		-webkit-transform: translateX(0);
	}
}

@keyframes bounceInRight {
	0% {
		opacity: 0;
        transform: translateX(1000px);
		-webkit-transform: translateX(1000px);
	}

	60% {
        transform: translateX(-20px);
		-webkit-transform: translateX(-20px);
	}

	80% {
        transform: translateX(5px);
		-webkit-transform: translateX(5px);
	}

	100% {
		opacity: 1;
        transform: translateX(0);
		-webkit-transform: translateX(0);
	}
}


.puff-in-center {
    -webkit-animation: puff-in-center 1.5s cubic-bezier(0.470, 0.000, 0.745, 0.715) 0.2s both;
    animation: puff-in-center 1.5s cubic-bezier(0.470, 0.000, 0.745, 0.715) 0.2s both;
}

.fade-in-fwd {
    -webkit-animation: fade-in-fwd 1.5s cubic-bezier(0.470, 0.000, 0.745, 0.715) 0s both;
    animation: fade-in-fwd 1.5s cubic-bezier(0.470, 0.000, 0.745, 0.715) 0s both;
}

.bounceInLeft
{
    -webkit-animation: bounceInLeft 1.5s cubic-bezier(0.470, 0.000, 0.745, 0.715) 0s both;
    animation: bounceInLeft 1.5s cubic-bezier(0.470, 0.000, 0.745, 0.715) 0s both;
}

.bounceInRight
{
    -webkit-animation: bounceInRight 1.5s cubic-bezier(0.470, 0.000, 0.745, 0.715) 0s both;
    animation: bounceInRight 1.5s cubic-bezier(0.470, 0.000, 0.745, 0.715) 0s both;
}

.text-anim-1
{
    
  background: linear-gradient(120deg, #000, #fff, #000);
  background-repeat: no-repeat;
  background-size: 80%;
  animation: text-animate 5s linear 0.5s both;
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(255, 255, 255, 0);
  transition: opacity 1s .5s ease-out;
    will-change: opacity;
}

.text-anim-2
{
    
  background: linear-gradient(120deg, #000, #fff, #000);
  background-repeat: no-repeat;
  background-size: 80%;
  animation: text-animate 5s linear 1s both;
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(255, 255, 255, 0);
  transition: opacity 1s .5s ease-out;
    will-change: opacity;
}

.text-anim-3
{
    opacity: 0;
    background: linear-gradient(120deg, #000, #fff, #000);
  background-repeat: no-repeat;
  background-size: 80%;
 
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(255, 255, 255, 0);
  transition: opacity 0.2s .1s ease-out;
    will-change: opacity;
}
    .text-anim-2.is-visible
    {
        opacity: 1;
        -webkit-animationn: text-animate 5s linear both;
        animation: text-animate 5s linear both;
    }

.visual-anim {
    opacity: 0;
    filter: blur(15px);
    transition: filter 1.0s .1s ease-out, opacity 1s .1s ease-out;
    will-change: opacity, filter;
}

    .visual-anim.is-visible {
        opacity: 1;
        filter: none;
    }

    .visual-anim-puff {
        transform: scale(1.2);
		-webkit-transform: scale(1.2);
        -webkit-filter: blur(10px);
        filter: blur(10px);
        opacity: 0;
        transition: filter 1.0s .1s ease-out, opacity 1s .1s ease-out, transform 1s .1s ease-out ;
        will-change: opacity, filter, transform;
    }
    
        .visual-anim-puff.is-visible {
            transform: scale(1);
		    -webkit-transform: scale(1);
            -webkit-filter: none;
            filter: none;
            opacity: 1;
            
            /* -webkit-animation: puff-in-center 1.5s cubic-bezier(0.470, 0.000, 0.745, 0.715) 0.2s both;
            animation: puff-in-center 1.5s cubic-bezier(0.470, 0.000, 0.745, 0.715) 0.2s both; */
        }

.visual-anim-left {
    transform: translateX(-1000px);
	-webkit-transform: translateX(-1000px);
    opacity: 0;
    filter: blur(15px);
    transition: filter 1.0s .5s ease-out, opacity 1s .5s ease-out, transform 1s .1s ease-out ;
    will-change: opacity, filter,transform;
}

    .visual-anim-left.is-visible {
        opacity: 1;
        transform: translateX(0px);
		-webkit-transform: translateX(0px);
        -webkit-filter: none;
        filter: none;
        
    }

    .visual-anim-right {
        transform: translateX(1000px);
		-webkit-transform: translateX(1000px);
        opacity: 0;
        filter: blur(15px);
        transition: filter 1.0s .5s ease-out, opacity 1s .5s ease-out, transform 1s .1s ease-out ;
        will-change: opacity, filter,transform;
    }
    
        .visual-anim-right.is-visible {
            opacity: 1;
            transform: translateX(0px);
            -webkit-transform: translateX(0px);
            -webkit-filter: none;
            filter: none;
            
        }

        .left-half img, .right-half img {
            transition: all 0.3s ease-out;
        }

    
        .left-half img:hover, .right-half img:hover {
            transform: scale(1.1, 1.1);
            z-index: 9;
        }

        .left-half, .right-half
        {
            overflow: hidden;
        }

        .nu-font.shine-text:hover , .nu-font.box-word:hover {
            -webkit-mask-image: linear-gradient(-75deg, rgba(0,0,0,.6) 30%, #000 50%, rgba(0,0,0,.6) 70%);
            -webkit-mask-size: 200%;
            animation: shine 2s infinite;
          }
          
          @keyframes shine {
            from {
              -webkit-mask-position: 150%;
            }
            
            to {
              -webkit-mask-position: -50%;
            }
          }