@keyframes page404Float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-12px); }
}

@keyframes page404Swing {
    0%, 100% { transform: rotate(0deg); }
    20%       { transform: rotate(-15deg); }
    40%       { transform: rotate(12deg); }
    60%       { transform: rotate(-8deg); }
    80%       { transform: rotate(5deg); }
}

@keyframes page404FadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}



.page-404 {
    padding: 60px 0 80px;
    text-align: center;
}



.page-404__code {
    font-size: 9em;
    font-weight: 700;
    line-height: 1;
    color: var(--brand-c);
    letter-spacing: -4px;
    margin: 0 0 10px;

    animation:
        page404FadeUp .6s ease both,
        page404Float  3.6s ease-in-out 0.6s infinite;
}

.page-404__icon {
    font-size: 3em;
    color: var(--icon-muted-c);
    margin: 0 0 25px;
    display: inline-block;

    animation:
        page404FadeUp  .6s ease .15s both,
        page404Swing   4s   ease-in-out 1s infinite;
}

.page-404__title {
    font-size: 1.6em;
    font-weight: 700;
    color: var(--h1-c);
    margin: 0 0 12px;

    animation: page404FadeUp .6s ease .3s both;
}

.page-404__text {
    font-size: 1em;
    color: var(--text-dim-c);
    max-width: 420px;
    margin: 0 auto 35px;
    line-height: 1.6;

    animation: page404FadeUp .6s ease .42s both;
}

.page-404__buttons {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;

    animation: page404FadeUp .6s ease .54s both;
}



.page-404__btn {
    display: inline-block;
    height: auto;
    padding: 10px 28px;
    font-size: .95em;
    font-weight: 600;
    border-radius: 4px;
    text-decoration: none;
    transition: background .2s, color .2s, transform .15s;
}

.page-404__btn:hover {
    transform: translateY(-2px);
}

.page-404__btn--primary {
    color: var(--white);
    background: var(--brand-c);
}

.page-404__btn--primary:hover,
.page-404__btn--primary:focus {
    color: var(--white);
    background: var(--brand-dark-c);
    text-decoration: none;
}

.page-404__btn--default {
    color: var(--btn-default-c);
    background: var(--btn-default-bg);
}

.page-404__btn--default:hover,
.page-404__btn--default:focus {
    color: var(--btn-default-c);
    background: var(--border-medium-c);
    text-decoration: none;
}



@media (max-width: 575px) {
    .page-404__code {
        font-size: 6em;
    }

    .page-404__title {
        font-size: 1.3em;
    }
}