main #anim-stat,
main #anim-why3dviz,
main #anim-writeme,
main .anim-fade-left,
main .anim-fade-right,
main .anim-fade-box-left,
main .anim-fade-box-right,
main .anim-opa {
    opacity: 0;
}


.text-font-style-anim {
    animation: text-font-style 1s ease 1s forwards; 
}
@keyframes text-font-style {
	0% { font-style: normal;}
	100% {font-style: italic;}
}

@keyframes button-pulse {
	0% {
		transform: scale(1);
		box-shadow: 0 0 0 0 rgba(232, 0, 75, 0.7);
	}
	70% {
		transform: scale(1.05);
		box-shadow: 0 0 0 20px rgba(232, 0, 75, 0);
	}
	100% {
		transform: scale(1.05);
		box-shadow: 0 0 0 0 rgba(232, 0, 75, 0);
	}
}

.col-letter-anim {
    animation: col-letter 0.5s;
    animation-delay: calc(0.1s * var(--i));
	animation-fill-mode: forwards;
}
@keyframes col-letter {
    0% {
		color: var(--grey2);
	  }
	100% {
		color: white;
	}
}

.fade-box-left-anim {
    animation: fade-box-left 0.5s ease 0.2s forwards; 
}
@keyframes fade-box-left {
    0% {
		transform: translateX(-100%);
		opacity: 0;
	}
	100% {
		transform: translateX(0%);
		opacity: 1;
	}
}

.fade-box-right-anim {
    animation: fade-box-right 0.5s ease 0.2s forwards;
}
@keyframes fade-box-right {
    0% {
		opacity: 0;
		transform: translateX(100%) 
	}
	100% {
		opacity: 1;
		transform: translateX(0%) 
	}
}

.fade-para-left-anim {
    animation: fade-para-left 2s ease 1s forwards; 
}
@keyframes fade-para-left {
    0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(1em);
	}
}

.fade-up-long-anim {
    animation: fade-up-long 2s ease 0.5s forwards; 
}
@keyframes fade-up-short {
	0% {
		transform: translateY(100%);
        opacity: 0;
	}
	100% {
		transform: translateY(0);
        opacity: 1;
	}
}
@keyframes fade-up-long {
	0% {
		transform: translateY(500%);
        opacity: 0;
	}
	100% {
		transform: translateY(0);
        opacity: 1;
	}
}

.fade-down-anim {
    animation: fade-down .7s ease 0.2s forwards; 
}
@keyframes fade-down {
	0% {
		transform: translateY(-50px);
        opacity: 0;
	}
	100% {
		transform: translateY(0);
        opacity: 1;
	}
}

.fade-left-anim {
    animation: fade-left .7s ease 0.2s forwards; 
}
@keyframes fade-left {
	0% {
		transform: translateX(-50px);
        opacity: 0;
	}
	100% {
		transform: translateX(0);
        opacity: 1;
	}
}

.fade-right-anim {
    animation: fade-right .7s ease 0.2s forwards; 
}
@keyframes fade-right {
	0% {
		transform: translateX(50px);
        opacity: 0;
	}
	100% {
		transform: translateX(0);
        opacity: 1;
	}
}

.opa-anim {
    animation: opa 2s ease 0.2s forwards;
}
@keyframes opa {
	0% {
        opacity: 0;
	}
	100% {
        opacity: 1;
	}
}

.flip-letter-anim {
    animation: flip-letter 2s;
    animation-delay: calc(.2s * var(--i))
}
@keyframes flip-letter {
    0% {
		transform: rotateY(0deg) 
	  }
	40% {
      transform: rotateY(360deg) 
    }
	100% {
		transform: rotateY(360deg) 
	}
}

.text-color-anim {
    animation: text-color 1s 2s forwards ease-in-out;
}
@keyframes text-color {
	0% {color: white;}
	100% {color: var(--magenta)}
}

.zoom-in-anim {
    animation: zoom-in .8s ease .5s forwards;
}
@keyframes zoom-in {
	0% {
		transform: scale(0.9);
        opacity: 0;
	}
	100% {
		transform: scale(1);
        opacity: 1;
	}
}

.zoom-out-anim {
    animation: zoom-out .8s ease .5s forwards;
}
@keyframes zoom-out {
	0% {
		transform: scale(1.1);
        opacity: 0;
	}
	100% {
		transform: scale(1);
        opacity: 1;
	}
}

.bounce-anim {
	animation: bounce-anim 1.2s ease-out 1s both;
 }
 @keyframes bounce-anim {
	20% {opacity: 1;} 
	40%, 70%, 85%, 100% {opacity: 1; transform: translateX(0);} 
	60% {transform: translateX(-6%);} 
	80% {transform: translateX(3%);}
	90% {transform: translateX(-1.5%);}
  }