/* NOT ANIMATION */
.not-animation{
    opacity: 0;
}

/* ----------------------------------------------------------------------------------------------------------------------- */

/* ANIMATION IN 1 */
.animation-in-1 p {
    animation: Text-Animation-1 4s;
}

.animation-in-1 li:nth-child(1) {
    animation: Text-Animation-1 4s;
}

.animation-in-1 li:nth-child(2){
    animation: Text-Animation-1 5s;
}

.animation-in-1 li:nth-child(3){
    animation: Text-Animation-1 6s;
}

.animation-in-1 h1 {
    animation: Title-Animation-1 2s;
}

.animation-in-1 h2 {
    animation: Title-Animation-1 3s;
}

.animation-in-1 h3 {
    animation: Title-Animation-1 4s;
}

.animation-in-1 button {
    animation: Button-Animation-1 4.5s;
}

/* ANIMATION IN 2 */
.animation-in-2 p {
    animation: Text-Animation-2 1.5s forwards;
}

.animation-in-2 h2 {
    animation: Title-Animation-2 0.7s forwards;
}

.animation-in-2 h3 {
    animation: Title-Animation-2 0.7s forwards;
}

/* ----------------------------------------------------------------------------------------------------------------------- */

/* ANIMATIONS DELAY */
.animation-in-2 p:nth-child(2) { animation-delay: 0s; }
.animation-in-2 p:nth-child(3) { animation-delay: 0.5s; }
.animation-in-2 p:nth-child(4) { animation-delay: 1s; }
.animation-in-2 p:nth-child(5) { animation-delay: 1.5s; }
.animation-in-2 p:nth-child(6) { animation-delay: 2s; }
.animation-in-2 p:nth-child(7) { animation-delay: 2.5s; }
.animation-in-2 p:nth-child(8) { animation-delay: 3s; }
.animation-in-2 p:nth-child(9) { animation-delay: 3.5s; }
.animation-in-2 p:nth-child(10) { animation-delay: 4s; }

/* ----------------------------------------------------------------------------------------------------------------------- */

/* ANIMATIONS */
@keyframes Title-Animation-1 {
    0% {
        transform: translateY(50px);
        letter-spacing: 2px;
        opacity: 0;
    }
    100% {
        transform: translateY(0px);
        opacity: 1;
    }
}

@keyframes Text-Animation-1 {
    0% {
        transform: translateY(35px);
        opacity: 0;
    }
    38% {
        transform: translateY(35px);
        opacity: 0;
    }
    100% {
        transform: translateY(0px);
        opacity: 1;
    }
}

@keyframes Button-Animation-1 {
    0% {
        transform: translateX(-35px);
        opacity: 0;
    }
    58% {
        transform: translateX(-35px);
        opacity: 0;
    }
    70% {
        transform: translateY(0px);
        opacity: 1;
    }
}

@keyframes Title-Animation-2 {
    0% {
        transform: translateY(-65px);
        scale: 0;
        opacity: 0;
    }
    12% {
        transform: translateY(-65px);
        scale: 0;
        opacity: 0.2;
    }
    70% {
        transform: translateY(-0px);
        scale: 1;
        opacity: 1;
    }
    100% {
        transform: translateY(-0px);
        scale: 1;
        opacity: 1;
    }
}

@keyframes Text-Animation-2 {
    0% {
        transform: translateY(175px);
        opacity: 0;
    }
    20% {
        transform: translateY(175px);
        opacity: 0;
    }
    70% {
        transform: translateY(0px);
        scale: 1;
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}

@keyframes Invisible-Animation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

/* ----------------------------------------------------------------------------------------------------------------------- */