/* Anim - CSS */



.element
{
    position: relative;  
    left: 0;
    opacity: 1;
    transform: scale(1);
    transition: ease 2s left, ease 2s opacity, ease 2s transform;
}

/*Text starts in the middle and expands*/


.anim-text-expand {
	-webkit-animation: anim-text-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
	        animation: anim-text-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}

@-webkit-keyframes anim-text-expand {
  0% {
    letter-spacing: -0.5em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}

@keyframes anim-text-expand {
  0% {
    letter-spacing: -0.5em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}

/*text starts blurry and then focuses */

.anim-unblur {
	-webkit-animation: anim-unblur 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
	        animation: anim-unblur 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

@-webkit-keyframes anim-unblur {
  0% {
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}

@keyframes anim-unblur {
  0% {
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}

.anim-scale
{
    transform: scale(0);
}

.anim-left
{
    left: -1200px;
}

.anim-right
{
    left: 1200px;
}

.anim-fade
{
    opacity: 0;
}

.anim-delay-1
{
    transition-delay: 0.5s;
}

.anim-delay-2
{
    transition-delay: 1s;
}

.anim-delay-3
{
    transition-delay: 1.5s;
}

/* - */

.workspace
{
    overflow-x: hidden;
}  

/* Bot Waves - CSS */  
#bot-wave-conainer
{
	overflow: hidden;
	width: 100%;
	height: 256px;
	margin-top: -256px;
	z-index: 2;
	display: grid;
}

#bot-wave-conainer .st0
{
	fill: var(--colour4);
}

#bot-wave-conainer .st1
{
	fill: rgba(29,27,28,0.66);
}