.reveal.pop-up {
        opacity: 0.25;
        transform: translateY(300px) scale(0.2);
        transition: transform 800ms cubic-bezier(.2, .9, .2, 1), opacity 400ms ease;
        will-change: transform, opacity;
    }

    .reveal.pop-up.is-visible {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    .reveal.fade-in {
        opacity: 0.25;
        transform: translateY(20px);
        transition: opacity .6s ease, transform .6s ease;
    }

    .reveal.fade-in.is-visible {
        opacity: 1;
        transform: translateY(0);
    }

    .reveal.pop-in {
        opacity: 0.25;
        transform: scale(.6);
        transition: opacity .35s cubic-bezier(.2, .8, .2, 1), transform .35s cubic-bezier(.2, .8, .2, 1);
    }

    .reveal.pop-in.is-visible {
        opacity: 1;
        transform: scale(1);
    }

    .reveal.rotate {
        opacity: 0.25;
        transform: rotate(-20deg) translateY(20px);
        transition: opacity .6s ease, transform .6s ease;
    }

    .reveal.rotate.is-visible {
        opacity: 1;
        transform: rotate(0) translateY(0);
    }

    .reveal.slide-left {
        opacity: 0.25;
        transform: translateX(-60px);
        transition: opacity .6s ease, transform .6s ease;
    }

    .reveal.slide-left.is-visible {
        opacity: 1;
        transform: translateX(0);
    }

    .reveal.slide-right {
        transform: translateX(60px);
        opacity: 0.25;
        transition: opacity .6s ease, transform .6s ease;
    }

    .reveal.slide-right.is-visible {
        transform: translateX(0);
        opacity: 1;
    }

    .reveal.card-drop {
        height: 0px;
        opacity: 0.25;
        transition: opacity .6s ease, height 1000ms ease;
    }

    .reveal.card-drop.is-visible {
        height: 380px;
        opacity: 1;
    }

    .reveal.card-drop-bullet {
        height: 0%;
        opacity: 0.25;
        transition: opacity .6s ease, height 1000ms ease;
    }

    .reveal.card-drop-bullet.is-visible {
        height: 100%;
        opacity: 1;
    }