@layer animations {
    @keyframes rise {
        0% {
            opacity: 0;
            transform: translateY(10px);
        }
    }

    .js .reveal {
        opacity: 0;
        transform: translateY(14px);
        transition:
            opacity 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
            transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
    }
    .js .reveal.is-in {
        opacity: 1;
        transform: none;
    }
    .js .reveal.is-in > * {
        animation: rise 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
    }
    .js .reveal.is-in > *:nth-child(1) {
        animation-delay: 0.02s;
    }
    .js .reveal.is-in > *:nth-child(2) {
        animation-delay: 0.07s;
    }
    .js .reveal.is-in > *:nth-child(3) {
        animation-delay: 0.12s;
    }
    .js .reveal.is-in > *:nth-child(4) {
        animation-delay: 0.17s;
    }
    .js .reveal.is-in > *:nth-child(5) {
        animation-delay: 0.22s;
    }
    .js .reveal.is-in > *:nth-child(6) {
        animation-delay: 0.27s;
    }
    .js .reveal.is-in > *:nth-child(n + 7) {
        animation-delay: 0.3s;
    }
    .js .reveal.is-in > p,
    .js .reveal.is-in > h2,
    .js .reveal.is-in > h3,
    .js .reveal.is-in > span {
        animation: none;
    }
}