.home-animate-stroke {
    stroke-dasharray: 1200;
    stroke-dashoffset: 1200;
    animation: dash 2s ease-in-out forwards;
    animation-delay: 3s;
}

.home-animate-grow {
    transform: scaleY(0);
    transform-origin: bottom;
    animation: grow 1s forwards;
    animation-delay: 3s;
}

.home-animate-fade-right-left {
    animation: fade-right-left 2s ease-in-out forwards;
    animation-delay: 3s;
    transform: translateX(32px);
}

.home-animate-fade-left-right {
    animation: fade-left-right 2s ease-in-out forwards;
    animation-delay: 3s;
    transform: translateX(-32px);
}

.home-animate-fade-top-bottom {
    animation: fade-top-bottom 2s ease-in-out forwards;
    animation-delay: 3s;
    transform: translateY(-32px);
}

.home-animate-fade-bottom-top {
    animation: fade-bottom-top 2s ease-in-out forwards;
    animation-delay: 3s;
    transform: translateY(32px);
}

.home-animate-scale-up {
    animation: scale-up 2s ease-in-out forwards;
    animation-delay: 3s;
    transform-origin: center;
}

@keyframes scale-up {
    0% {
        transform: scale(90%)
    }

    100% {
        transform: scale(100%);
    }
}

@keyframes fade-top-bottom {
    0% {
        transform: translateY(-32px);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes fade-bottom-top {
    0% {
        transform: translateY(32px);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes fade-right-left {
    0% {
        transform: translateX(32px);
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes fade-left-right {
    0% {
        transform: translateX(-32px);
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes dash {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes grow {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 0;
    }

    98% {
        opacity: 100%;
    }

    100% {
        transform: scaleY(1);
    }
}