body {
    box-sizing: border-box;
    max-width: 42rem;
    margin: clamp(2rem, 8vw, 5rem) auto;
    padding: 0 1.25rem;
    line-height: 1.55;
    -webkit-mask-image: linear-gradient(to bottom, black 0 34%, transparent 50% 100%);
    mask-image: linear-gradient(to bottom, black 0 34%, transparent 50% 100%);
    -webkit-mask-size: 100% 300%;
    mask-size: 100% 300%;
    animation: page-reveal 1000ms cubic-bezier(0.4, 0, 0.2, 1) 150ms both;
}

h1 {
    margin: 0 0 2.5rem;
}

.wave {
    display: inline-block;
    padding: 0;
    border: 0;
    color: inherit;
    background: none;
    font: inherit;
    line-height: 1;
    cursor: pointer;
    transform-origin: 70% 70%;
    animation: hand-wave 600ms ease-in-out 1200ms both;
}

h2 {
    margin: 2.25rem 0 0.5rem;
    font-size: 1rem;
}

ul {
    margin: 0;
    padding-left: 1.25rem;
}

li + li {
    margin-top: 0.25rem;
}

a {
    text-underline-offset: 0.15em;
}

@keyframes hand-wave {
    0%, 100% {
        transform: rotate(0);
    }

    20% {
        transform: rotate(18deg);
    }

    40% {
        transform: rotate(-12deg);
    }

    60% {
        transform: rotate(14deg);
    }

    80% {
        transform: rotate(-6deg);
    }
}

@keyframes page-reveal {
    from {
        opacity: 0;
        filter: blur(4px);
        -webkit-mask-position: 0 100%;
        mask-position: 0 100%;
    }

    to {
        opacity: 1;
        filter: blur(0);
        -webkit-mask-position: 0 0;
        mask-position: 0 0;
    }
}

.is-reload body {
    -webkit-mask-image: none;
    mask-image: none;
    animation: none;
}

.is-reload .wave {
    animation: none;
}

@media (prefers-reduced-motion: reduce) {
    body {
        -webkit-mask-image: none;
        mask-image: none;
        animation: none;
    }

    .wave {
        animation: none;
    }
}