@keyframes head-list-main {
    0% {
        transform: translateY(-100px);
    }

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

@keyframes head-list-services {
    0% {
        transform: translateY(-100px);
    }

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

@keyframes head-list-gallery {
    0% {
        transform: translateY(-100px);
    }

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

@keyframes head-list-reviews {
    0% {
        transform: translateY(-100px);
    }

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

@keyframes head-list-contacts {
    0% {
        transform: translateY(-100px);
    }

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

@keyframes contacts-list-item {
    0% {
        transform: translateX(750px);
    }

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

@keyframes header-title {
    0% {
        transform: translateX(-1000px);
    }

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

@keyframes header-p {
    0% {
        transform: translateY(500px);
    }

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

@keyframes mobile-contacts-item {
    0% {
        transform: translateY(500px);
    }

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

@keyframes shake {
    0% {
        transform: translateY(-1%);
    }

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

@keyframes line {
    0% {
        stroke-dashoffset: 22;
    }

    25% {
        stroke-dashoffset: 22;
    }

    50% {
        stroke-dashoffset: 0;
    }

    51% {
        stroke-dashoffset: 0;
    }

    80% {
        stroke-dashoffset: -22;
    }

    100% {
        stroke-dashoffset: -22;
    }
}

/* transition and js animation */

.load__anchor.show {
    display: block;
    opacity: 1;
}

.car__body {
    animation: shake 0.2s ease-in-out infinite alternate;
}

.car__line {
    transform-origin: center right;
    stroke-dasharray: 22;
    animation: line 0.8s ease-in-out infinite;
    animation-fill-mode: both;
}

.car__line--top {
    animation-delay: 0s;
}

.car__line--middle {
    animation-delay: 0.2s;
}

.car__line--bottom {
    animation-delay: 0.4s;
}

.nav-link {
    position: relative;
    cursor: pointer;
    line-height: 1;
    text-decoration: none;
    transition: 0.25s;
}

.nav-link:after {
    display: block;
    position: absolute;
    right: 0;
    width: 0;
    height: 2px;
    background-color: white;
    content: "";
    transition: width 0.5s ease-out;
}

.nav-link:hover:after, .nav-link:focus:after {
    width: 100%;
}

.header__nav-link:active {
    font-size: 15px;
}

.header__contacts-item {
    transition: 0.25s;
}

.header__contacts-item:hover {
    transform: translateX(-25px);
}

.header__contacts-link:active {
    font-size: 15px;
}

.header__logo:hover {
    transform: scale(0.95);
}

.header__logo:active {
    transform: scale(0.9);
}

.header__nav-item:first-child {
    animation: head-list-main 0.5s;
}

.header__nav-item:nth-child(2) {
    animation: head-list-services 0.75s;
}

.header__nav-item:nth-child(3) {
    animation: head-list-gallery 1s;
}

.header__nav-item:nth-child(4) {
    animation: head-list-reviews 1.25s;
}

.header__nav-item:last-child {
    animation: head-list-contacts 1.5s;
}

.header__contacts-item:first-child {
    animation: contacts-list-item 1.5s ease-in-out;
}

.header__contacts-item:last-child {
    animation: contacts-list-item 1.5s ease-out;
}

.reviews__window-title:hover {
    transform: translateX(25px);
}

.reviews__window-title:active {
    font-size: 30px;
}

.contacts__nav-link:hover {
    transform: translateX(25px);
}

.mobile-contacts-item:nth-child(1) {
    animation: mobile-contacts-item 1.5s ease-in;
}

.mobile-contacts-item:nth-child(2) {
    animation: mobile-contacts-item 1.5s ease-in-out;
}