:root{
    --logo-slide-x: 75%;
    --logo-slide-y: 0%;

    --text-slide-x: -20%;
    --text-slide-y: 0%;
}

#logo {
    animation: logo-slide 2.5s ease-in-out forwards;

    .logo-outline {
        path {
            stroke-dasharray: 5200;
            animation: logo-dash 1.5s ease-in-out forwards;
        }
    }

    img,
    svg {
        animation-duration: 2s;
        animation-timing-function: cubic-bezier(0.5, 0.0, 0.1, 1.0);
    }

    .logo-raster {
        animation-name: logo-swing, logo-opacity-raster;
    }

    .logo-outline {
        animation-name: logo-swing, logo-opacity-outline;
    }
}

@keyframes logo-opacity-outline {
    0% { opacity: 1; }
    60% { opacity: 1; }
    70% { opacity: 0; }
    100% { opacity: 0; }
}

@keyframes logo-opacity-raster {
    0% { opacity: 0; }
    60% { opacity: 0; }
    70% { opacity: 1; }
    100% { opacity: 1; }
}

@keyframes logo-swing {
    0% { transform: scale(0.5) rotate(-380deg); }
    40% { transform: scale(0.8) rotate(-420deg); }
    100% { transform: scale(1) rotate(0deg); }
}

@keyframes logo-dash {
    0% { stroke-dashoffset: 5200; }
    100% { stroke-dashoffset: 0; }
}

@keyframes logo-slide {
    0% { transform: translate(var(--logo-slide-x), var(--logo-slide-y)); }
    70% { transform: translate(var(--logo-slide-x), var(--logo-slide-y)); }
    100% { transform: translateX(0); }
}

#title{
    animation: title-slide 2.5s ease-in-out forwards;
}

@keyframes title-slide{
    0% {
        transform: translate(var(--text-slide-x), var(--text-slide-y));
        opacity: 0;
    }
    70% {
        transform: translate(var(--text-slide-x), var(--text-slide-y));
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

#main nav{
    animation: nav-slide 2.5s ease-in-out forwards;
}

@keyframes nav-slide{
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }
    80% {
        transform: translateY(-100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}