@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(16px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes fadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes logoIn {
    from {
        opacity: 0;
        transform: scale(.88)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

@keyframes ripple {
    from {
        opacity: 0.4;
        transform: scale(0)
    }

    to {
        opacity: 0;
        transform: scale(2.5)
    }
}

.logo {
    animation: logoIn 0.5s var(--ease) both
}

.title {
    animation: fadeUp 0.45s var(--ease) 0.08s both
}

.desc {
    animation: fadeUp 0.45s var(--ease) 0.14s both
}

.link-card {
    animation: fadeUp 0.45s var(--ease) both
}

.footer {
    animation: fadeUp 0.45s var(--ease) 0.8s both
}

.link-ripple {
    position: absolute;
    width: 100px;
    height: 100px;
    background: var(--fg);
    pointer-events: none;
    margin: -50px 0 0 -50px;
    animation: ripple 0.55s var(--ease) forwards;
}

@media(prefers-reduced-motion:reduce) {

    .logo,
    .title,
    .desc,
    .link-card,
    .footer {
        animation: none
    }
}