:root {
    --beat: .6s;
}


/* Keyframes */

@keyframes fade-in-out {
    0% {
        opacity: 0;
    }
    15% {
        opacity: 1;
    }
    85% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}


/* Vieth logo animation */

animation {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    pointer-events: none;
}

blur {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99;
    pointer-events: none;
    backdrop-filter: blur(5px);
}

animation>svg {
    max-width: 100%;
}

@media (min-width: 701px) {
    animation>svg {
        transform: scale(2);
    }
}

animation :is(.logo-mark, .Vieth, .Consulting, .tagline) {
    transition: .125s transform ease-in-out;
}

animation .logo-mark {
    transition-delay: calc(var(--beat) * 2.5);
    transform: translateY(101%);
}

animation .Vieth {
    transition-delay: calc(var(--beat) * 3.5);
    transform: translateX(-260px);
}

animation .Consulting {
    transition-delay: calc(var(--beat) * 4.5);
    transform: translateX(-260px);
}

animation .tagline {
    transition-delay: calc(var(--beat) * 5.5);
    transform: translateX(-260px);
}


/* Logo animation timeline */

.start animation,
.start blur {
    animation: calc(var(--beat) * 8) ease-in-out fade-in-out;
    animation-fill-mode: both;
}

.start animation :is(.logo-mark, .Vieth, .Consulting, .tagline) {
    transform: translate(0);
}

.start #next-button {
    opacity: 1;
    transition: calc(var(--beat) * 2) opacity ease-in-out;
    transition-delay: calc(var(--beat) * 7);
}

.start.next #service-list li {
    color: #555;
    transform: translateX(0);
    transition: 0 transform;
}

.start.next #service-list li:nth-child(2) {
    transition-delay: calc((var(--beat) / 3) * 1);
}

.start.next #service-list li:nth-child(3) {
    transition-delay: calc((var(--beat) / 3) * 2);
}

.start.next #service-list li:nth-child(4) {
    transition-delay: calc((var(--beat) / 3) * 3);
}

.start.next #service-list li:nth-child(5) {
    transition-delay: calc((var(--beat) / 3) * 4);
}

.start.next #service-list li:nth-child(6) {
    transition-delay: calc((var(--beat) / 3) * 5);
}

.start.next #service-list li:nth-child(7) {
    transition-delay: calc((var(--beat) / 3) * 6);
}

.start.next #service-list li:nth-child(8) {
    transition-delay: calc((var(--beat) / 3) * 7);
}

.start.next #service-list li:nth-child(9) {
    transition-delay: calc((var(--beat) / 3) * 8);
}

.start.next #service-list li:nth-child(10) {
    transition-delay: calc((var(--beat) / 3) * 9);
}