.button-entrance {
    opacity: 0;
    animation: as-rise 520ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: calc(var(--delay) / 12);
}

.fadein {
    opacity: 0;
    animation: as-fade 620ms ease-out 80ms forwards;
}

.button-hover,
.credit-hover,
.social-hover,
.icon-hover,
.footer-hover {
    transition: transform 170ms ease, opacity 170ms ease;
}

.credit-hover:hover,
.social-hover:hover,
.icon-hover:hover,
.footer-hover:hover {
    transform: translateY(-2px);
}

@keyframes as-rise {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes as-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .button-entrance,
    .fadein {
        opacity: 1;
        animation: none;
    }
}