@keyframes header-animation {
    0% {
        transform: translateY(-100px);
    }
    100% {
        transform: translateY(0);
    }
}

@keyframes binary-animation {
    0% {
        transform: rotate(0);
        opacity: 1;
    }
    100% {
        transform: rotate(-360deg);
        opacity: 0;
    }
}

@keyframes binary-animation-out {
    0% {
        transform: rotate(-360deg);
        opacity: 0;
    }
    100% {
        transform: rotate(0);
        opacity: 1;
    }
}

@keyframes qa-animation {
    0% {
        transform: translateZ(0) translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateZ(-250px) translateY(250px);
        opacity: 0;
    }
}

@keyframes qa-animation-out {
    0% {
        transform: translateZ(-250px) translateY(250px);
        opacity: 0;
    }
    100% {
        transform: translateZ(0) translateY(0);
        opacity: 1;
    }
}

@keyframes js-animation {
    0% {
        transform: translateZ(-800px) rotateY(90deg);
        opacity: 0;
    }
    54% {
        transform: translateZ(-160px) rotateY(87deg);
        opacity: 1;
    }
    100% {
        transform: translateZ(0) rotateY(0);
        opacity: 1;
    }
}

@keyframes js-animation-out {
    0% {
        transform: translateZ(0) rotateY(0);
        opacity: 1;
    }
    54% {
        transform: translateZ(-160px) rotateY(87deg);
        opacity: 1;
    }
    100% {
        transform: translateZ(-800px) rotateY(90deg);
        opacity: 0;
    }
}

@keyframes java-animation {
    0% {
        transform: translateZ(-1100px);
        opacity: 0;
    }
    100% {
        transform: translateZ(0);
        opacity: 1;
    }
}

@keyframes java-animation-out {
    0% {
        transform: translateZ(0);
        opacity: 1;
    }
    100% {
        transform: translateZ(-1100px);
        opacity: 0;
    }
}

@keyframes net-animation {
    0% {
        transform: rotateX(-100deg);
        transform-origin: top;
        opacity: 0;
    }
    100% {
        transform: rotateX(0deg);
        transform-origin: top;
        opacity: 1;
    }
}

@keyframes net-animation-out {
    0% {
        transform: rotateX(0deg);
        transform-origin: top;
        opacity: 1;
    }
    100% {
        transform: rotateX(-100deg);
        transform-origin: top;
        opacity: 0;
    }
}

@keyframes php-animation {
    0% {
        transform: scale(1.1);
        filter: blur(4px);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        filter: blur(0px);
        opacity: 1;
    }
}

@keyframes php-animation-out {
    0% {
        transform: scale(1);
        filter: blur(0px);
        opacity: 1;
    }
    100% {
        transform: scale(1.1);
        filter: blur(4px);
        opacity: 0;
    }
}

@keyframes event-animation {
    0% {
        transform: rotateY(-70deg);
        transform-origin: right;
        opacity: 0;
    }
    100% {
        transform: rotateY(0);
        transform-origin: right;
        opacity: 1;
    }
}

@keyframes event-animation-out {
    0% {
        transform: rotateY(0);
        transform-origin: right;
        opacity: 1;
    }
    100% {
        transform: rotateY(-70deg);
        transform-origin: right;
        opacity: 0;
    }
}

@keyframes blog-animation {
    0% {
        transform: translateY(-600px) rotateX(-30deg) scale(0);
        transform-origin: 50% 100%;
        opacity: 0;
    }
    100% {
        transform: translateY(0) rotateX(0) scale(1);
        transform-origin: 50% 1400px;
        opacity: 1;
    }
}

@keyframes blog-animation-out {
    0% {
        transform: translateY(0) rotateX(0) scale(1);
        transform-origin: 50% 1400px;
        opacity: 1;
    }
    100% {
        transform: translateY(-600px) rotateX(-30deg) scale(0);
        transform-origin: 50% 100%;
        opacity: 0;
    }
}

@keyframes contact-animation {
    0% {
        transform: translateY(200px);
        animation-timing-function: ease-in;
        opacity: 0;
    }
    38% {
        transform: translateY(0);
        animation-timing-function: ease-out;
        opacity: 1;
    }
    55% {
        transform: translateY(65px);
        animation-timing-function: ease-in;
    }
    72% {
        transform: translateY(0);
        animation-timing-function: ease-out;
    }
    81% {
        transform: translateY(28px);
        animation-timing-function: ease-in;
    }
    90% {
        transform: translateY(0);
        animation-timing-function: ease-out;
    }
    95% {
        transform: translateY(8px);
        animation-timing-function: ease-in;
    }
    100% {
        transform: translateY(0);
        animation-timing-function: ease-out;
    }
}

@keyframes contact-animation-out {
    0% {
        transform: translateY(0);
        animation-timing-function: ease-out;
    }
    38% {
        transform: translateY(8px);
        animation-timing-function: ease-in;
    }
    55% {
        transform: translateY(0);
        animation-timing-function: ease-out;
    }
    72% {
        transform: translateY(28px);
        animation-timing-function: ease-in;
    }
    81% {
        transform: translateY(0);
        animation-timing-function: ease-out;
    }
    90% {
        transform: translateY(65px);
        animation-timing-function: ease-in;
    }
    95% {
        transform: translateY(0);
        animation-timing-function: ease-out;
        opacity: 1;
    }
    100% {
        transform: translateY(200px);
        animation-timing-function: ease-in;
        opacity: 0;
    }
}