/* Logo animation */
@keyframes slideInFromTop {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }
    50% {
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}
.logo-shape-part1,
.logo-shape-part2,
.logo-text-part1,
.logo-text-part2,
.logo-text-part3,
.logo-text-part4,
.logo-text-part5,
.logo-text-part6,
.logo-text-part7,
.logo-text-part8 {
    transform: translateY(-100%);
    opacity: 0;
    animation: slideInFromTop 0.8s forwards;
}
.logo-shape-part1 { animation-delay: 0s; }
.logo-shape-part2 { animation-delay: 0.01s; }
.logo-text-part1  { animation-delay: 0.02s; }
.logo-text-part2  { animation-delay: 0.04s; }
.logo-text-part3  { animation-delay: 0.06s; }
.logo-text-part4  { animation-delay: 0.08s; }
.logo-text-part5  { animation-delay: 0.10s; }
.logo-text-part6  { animation-delay: 0.12s; }
.logo-text-part7  { animation-delay: 0.14s; }
.logo-text-part8  { animation-delay: 0.16s; }

/* Text animation controlled by scroll */
.element-animation {
    opacity: 0;
    transform: translateY(20px);
}
.element-animation.element-show {
    opacity: 1;
    transition: all 0.8s;
    transform: translateY(0%);
}

/* Text animation */
@keyframes fadeIn {
    0% {
        transform: translateY(5%);
        opacity: 0;
    }
    30% {
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}
.animate {
    opacity: 0;
    animation: fadeIn 0.8s forwards;
}